<style>
    .modal {
        z-index: 20000 !important;
    }

    .modal-backdrop {
        z-index: 19999 !important;
    }
</style>
<div class="modal fade" id="logout" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to logout?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                <form action="{{ route('admin.login') }}" method="get" id="logoutForm">
                    @csrf

                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-danger p-3 fw-semibold" id="logout_btn">
                        Yes, Sure
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- delete -->
<div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to delete?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-danger p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="block" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to block?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-secondary p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirm" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="imageViewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content p-3 rounded-4">

            <div class="d-flex justify-content-end">
                <button type="button" class="close-circle" data-bs-dismiss="modal">×</button>
            </div>

            <div class="text-center px-2 pb-3">
                <img id="previewImage" src="" class="img-fluid rounded-3"
                    style="max-height: 500px; object-fit: contain;" alt="Preview">
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="approvalModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-4">

            <div class="mb-3">
                <h5 class="fw-semibold mb-0">Approval</h5>
            </div>

            <form id="approvalForm">

                <div class="mb-3">
                    <label class="form-label small text-muted">Amount</label>
                    <input type="text" name="amount" class="form-control" placeholder="Enter Amount" readonly>
                </div>

                <div class="mb-3">
                    <label class="form-label small text-muted">Remarks</label>
                    <textarea name="remarks" class="form-control" rows="3" placeholder="Enter Remarks"
                        required></textarea>
                </div>



                <div class="d-flex justify-content-center">
                    <button type="button" class="btn btn-light px-4 me-2" data-bs-dismiss="modal">
                        Discard
                    </button>

                    <button type="submit" class="btn btn-primary px-4">
                        Submit
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
<div class="modal fade" id="rejectionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-4">

            <div class="mb-3">
                <h5 class="fw-semibold mb-0">Rejection</h5>
            </div>

            <form id="rejectionForm">

                <div class="mb-4">
                    <label class="form-label small text-muted">Remarks</label>
                    <textarea name="remarks" class="form-control" rows="3" placeholder="Enter Remarks"
                        required></textarea>
                </div>

                <div class="d-flex justify-content-center">
                    <button type="button" class="btn btn-light px-4 me-2" data-bs-dismiss="modal">
                        Discard
                    </button>

                    <button type="submit" class="btn btn-primary px-4">
                        Submit
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
<!-- Bootstrap 5 Modal -->
<div class="modal fade" id="percentageModal" tabindex="-1" aria-labelledby="percentageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">

            <!-- Header -->
            <div class="modal-header rounded-top-4">
                <h5 class="modal-title fw-semibold" id="percentageModalLabel">
                    Enter Percentage
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <!-- Body -->
            <div class="modal-body p-4">
                <form action="#">

                    <div class="mb-3">
                        <label for="percentage" class="form-label fw-semibold">
                            Percentage
                        </label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="percentage" name="percentage"
                                placeholder="Enter percentage" min="0" max="100" step="0.01" required>
                            <span class="input-group-text bg-light">%</span>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="daysModal" tabindex="-1" aria-labelledby="DaysModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">

            <!-- Header -->
            <div class="modal-header rounded-top-4">
                <h5 class="modal-title fw-semibold" id="DaysModalLabel">
                    Enter Days
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <!-- Body -->
            <div class="modal-body p-4">
                <form action="#">

                    <div class="mb-3">
                        <label for="Days" class="form-label fw-semibold">
                            Days
                        </label>

                            <input type="number" class="form-control" id="Days" name="Days"
                                placeholder="Enter Days" min="0" max="100" step="0.01" required>

                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>