@extends('admin.admin_dashboard')

@section('admin')

<div class="container mt-4" style="padding-top: 30px;">
    <!-- Rollback Request Details -->
    <div class="card shadow-lg border-light mb-4 rounded-3">
        <div class="card-header text-white fw-bold d-flex align-items-center" style="background-color: #6f4f37;">
            <i class="bx bx-info-circle me-2" style="font-size: 1.5rem;"></i>
            Payment Voucher Decision
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
    <p class="mb-2" style="font-size: 1.5rem; font-weight: bold;">
        📌 Voucher ID: {{ $voucher->grn_id }}
    </p>

    @php
        $formattedAmount = number_format($voucher->net_pay, 0);
        $formatter = new NumberFormatter("en", NumberFormatter::SPELLOUT);
        $amountInWords = ucfirst($formatter->format($voucher->net_pay));
    @endphp

    <p class="mb-2" style="font-size: 2rem; font-weight: bold; color: #6f4f37;">
        💵 Payment Amount: UGX {{ $formattedAmount }}
    </p>
    <p class="mb-2" style="font-size: 1.2rem; font-style: italic; color: #555;">
        ({{ $amountInWords }} only)
    </p>

    <p class="mb-2" style="font-size: 1.8rem; font-weight: bold; color: #333;">
        🏦 Account: 
        <span style="color: #d9534f;">
            {{ $voucher->sacco_account ?? 'Pay Cash From Hope Coffee Account 2009000277' }}
        </span>
    </p>

    @if($voucher->grn && $voucher->grn->farmer)
        <p class="mb-2" style="font-size: 1.8rem; font-weight: bold; color: #008000;">
            👨‍🌾 Farmer: {{ $voucher->grn->farmer->farmer_fname }} {{ $voucher->grn->farmer->farmer_lname }}
        </p>
    @else
        <p class="mb-2" style="font-size: 1.8rem; font-weight: bold; color: #FF0000;">
            🚨 Farmer not found!
        </p>
    @endif
</div>


                <div class="col-md-6">
                    <form id="approveForm" action="{{ route('payment-voucher-payment.process', $voucher->id) }}" method="POST">
                        @csrf
                        <input type="hidden" id="voucherStatus" value="{{ $voucher->voucher_status }}">
                        
                        <button type="button" class="btn btn-success btn-lg w-100 mb-3 shadow-sm" style="border-radius: 10px;"
                                onclick="confirmPayment()">
                            <i class="bx bx-check-circle me-2"></i> Confirm Payment
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Button -->
    <div class="mt-4 text-center">
        <button class="btn px-4 py-2 rounded-3 shadow-sm fw-bold"
                data-bs-toggle="collapse" data-bs-target="#filterSection"
                style="border: 2px solid #6f4f37; color: #6f4f37; background: #f8f3f0; transition: 0.3s;">
            <i class="bx bx-show me-2"></i> Preview Voucher
        </button>
    </div>

    <br>

    <!-- Filter Section (Initially Hidden) -->
    <div id="filterSection" class="collapse mb-4">
        <div id="previewContent" class="reader-preview">
            <iframe src="{{ route('payment.voucher.preview', ['id' => $voucher->id]) }}" 
                    width="100%" height="900px" frameborder="0" 
                    class="border rounded shadow-sm"
                    style="border-color: #6f4f37; padding-top: 20px;">
                Your browser does not support embedded PDFs.
            </iframe>
        </div>
    </div>
</div>

<!-- SweetAlert Script -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function confirmPayment() {
    let voucherStatus = document.getElementById("voucherStatus").value;

    if (voucherStatus == 4) { // 4 means already paid
        Swal.fire({
            title: "Already Paid",
            text: "This voucher has already been paid and cannot be paid again.",
            icon: "info",
            confirmButtonColor: "#3085d6",
            confirmButtonText: "OK"
        });
        return;
    }

    Swal.fire({
        title: "Confirm Payment",
        text: "Are you sure you want to mark this voucher as paid?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#28a745",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, Mark as Paid"
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById("approveForm").submit();
        }
    });
}
</script>

@endsection