@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>
            Rollback Request Details
        </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>
                    <p class="mb-2"><strong>📝 Roll Back Reason:</strong> {{ $voucher->rollback_reason }}</p>
                </div>

                <div class="col-md-6">
                   <form id="approveForm" action="{{ route('payment-voucher-rollback.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> Approve Rollback
    </button>
</form>

                   <form id="denyForm" action="{{ route('payment-voucher-rollback.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 Rollback
    </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>

<script>
    function confirmApproval() {
        Swal.fire({
            title: "Are you sure?",
            text: "This will approve the rollback request.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#28a745",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, Approve!"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById("approveForm").submit();
            }
        });
    }
</script>


<script>
    function confirmDenial() {
        Swal.fire({
            title: "Are you sure?",
            text: "This will deny the rollback request.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#dc3545",
            cancelButtonColor: "#6c757d",
            confirmButtonText: "Yes, Deny!"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById("denyForm").submit();
            }
        });
    }
</script>





@endsection