@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"><strong>📌 Voucher ID:</strong> {{ $voucher->grn_id }}</p>
                   @php
    $formattedAmount = number_format($voucher->net_pay, 0); // Formats as 1,250.00
    $formatter = new NumberFormatter("en", NumberFormatter::SPELLOUT);
    $amountInWords = ucfirst($formatter->format($voucher->net_pay));
@endphp

<p class="mb-2"><strong>💵 Payment Amount:</strong> UGX{{ $formattedAmount }} ({{ $amountInWords }} only)</p>

                </div>

                <div class="col-md-6">
                    <form id="approveForm" action="{{ route('payment-voucher-decision.approve', $voucher->id) }}" method="POST">
                        @csrf
                        <button type="button" class="btn btn-success btn-lg w-100 mb-3 shadow-sm" style="border-radius: 10px;"
                                onclick="confirmApproval()">
                            <i class="bx bx-check-circle me-2"></i> Sign Voucher
                        </button>
                    </form>

                    <form id="denyForm" action="{{ route('payment-voucher-decision.deny', $voucher->id) }}" method="POST">
                        @csrf
                        <button type="button" class="btn btn-danger btn-lg w-100 shadow-sm" style="border-radius: 10px;"
                                onclick="confirmDenial()">
                            <i class="bx bx-x-circle me-2"></i> Deny 
                        </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 confirmApproval() {
        Swal.fire({
            title: "Are you sure?",
            text: "You are about to approve this voucher.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#28a745",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, Approve it!"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById("approveForm").submit();
            }
        });
    }

     function confirmDenial() {
        Swal.fire({
            title: "Deny Voucher",
            text: "Please enter the reason for denial:",
            input: "text",
            inputPlaceholder: "Enter reason here...",
            showCancelButton: true,
            confirmButtonColor: "#dc3545",
            cancelButtonColor: "#6c757d",
            confirmButtonText: "Deny Voucher",
            inputValidator: (value) => {
                if (!value) {
                    return "Denial reason is required!";
                }
            }
        }).then((result) => {
            if (result.isConfirmed) {
                let denialReason = result.value;
                
                // Create a hidden input field to store the reason
                let denyForm = document.getElementById("denyForm");
                let input = document.createElement("input");
                input.type = "hidden";
                input.name = "denial_reason";
                input.value = denialReason;
                denyForm.appendChild(input);

                denyForm.submit();
            }
        });
    }
</script>

@endsection