@extends('Admin.layout')

@section('content')
    <style>
        .page-header {
            background: linear-gradient(135deg, #046a36cf, #046a36cf);
            border-radius: 18px;
            padding: 28px 35px;
            color: #fff;
            margin-bottom: 25px;
            box-shadow: 0 18px 34px -18px rgba(125, 41, 66, 0.4);
        }

        .page-header h3 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .page-header p {
            margin: 0;
        }

        .btn-add {
            border-radius: 10px;
            padding: 10px 22px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
    </style>

    <div class="container-fluid mt-4">
        <div class="page-header d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h3>
                    <i class="ti tabler-building-bank me-2"></i>
                    Bank Details
                </h3>
                <p>
                    Manage your clinic's bank details and QR payment information.
                </p>
            </div>
            <div>
                <a href="{{ route('create_bank_details') }}" class="btn btn-light btn-add text-primary">
                    <i class="ti tabler-plus me-1"></i> Add Bank Details
                </a>
            </div>
        </div>

        <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle" id="bankDetailsTable" width="100%">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>QR</th>
                                <th>UPI ID</th>
                                <th>Bank Name</th>
                                <th>Account Holder</th>
                                <th>Account Number</th>
                                <th>IFSC Code</th>
                                <th>Branch</th>
                                <th>Status</th>
                                <th>Created On</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- QR Full Image Modal -->
    <div class="modal fade" id="qrModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 350px;">
            <div class="modal-content text-white p-3 text-center">
                <div class="d-flex justify-content-end mb-2">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="d-flex align-items-center justify-content-center" style="height: 300px; width: 100%;">
                    <img id="qrModalImage" src="" alt="Full QR Code" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            let table = $('#bankDetailsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('bank_details_data') }}",
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false },
                    { data: 'qr_image', name: 'qr_image', searchable: false, orderable: false },
                    { data: 'upi_id', name: 'upi_id' },
                    { data: 'bank_name', name: 'bank_name' },
                    { data: 'account_holder_name', name: 'account_holder_name' },
                    { data: 'account_number', name: 'account_number' },
                    { data: 'ifsc_code', name: 'ifsc_code' },
                    { data: 'branch', name: 'branch' },
                    { data: 'status', name: 'is_active', orderable: false, searchable: false },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });

            // Open QR Modal on image click
            $(document).on('click', '.qr-preview-img', function() {
                let src = $(this).attr('src');
                $('#qrModalImage').attr('src', src);
                const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('qrModal'));
                modal.show();
            });

            // Status Toggle
            let targetStatusId = null;
            let targetNewStatus = null;

            $(document).on('click', '.status-btn', function() {
                targetStatusId = $(this).data('id');
                let currentStatus = $(this).data('status');
                targetNewStatus = currentStatus == 1 ? 0 : 1;

                if (targetNewStatus == 1) {
                    $('#statusModalTitle').text('Are you sure!!');
                    $('#statusModalMessage').text('Are you confirm to change to Active?');
                    $('#confirmStatusChange').removeClass('btn-danger').addClass('btn-primary').text('Yes, Sure');
                } else {
                    $('#statusModalTitle').text('Are you sure!!');
                    $('#statusModalMessage').text('Are you confirm to change to Inactive?');
                    $('#confirmStatusChange').removeClass('btn-primary').addClass('btn-danger').text('Yes, Sure');
                }

                const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('statusModal'));
                modal.show();
            });

            $(document).on('click', '#confirmStatusChange', function() {
                if (!targetStatusId) return;

                const button = $(this);
                button.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Updating...');

                $.ajax({
                    url: "{{ route('bank_details_activate', ':id') }}".replace(':id', targetStatusId),
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        status: targetNewStatus
                    },
                    success: function(response) {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('statusModal'));
                        if (modal) modal.hide();

                        if (response.status) {
                            table.ajax.reload(null, false);
                            targetStatusId = null;
                            frontendToaster('success', response.message || 'Status updated successfully!');
                        } else {
                            frontendToaster('error', response.message || 'Unable to update status.');
                        }
                    },
                    error: function(xhr) {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('statusModal'));
                        if (modal) modal.hide();
                        frontendToaster('error', xhr.responseJSON?.message || 'Unable to update status.');
                    },
                    complete: function() {
                        button.prop('disabled', false).html('Yes, Sure');
                    }
                });
            });

            // Delete Handler
            let deleteBankId = null;

            $(document).on('click', '.delete-bank', function() {
                deleteBankId = $(this).data('id');
                const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('delete'));
                modal.show();
            });

            $(document).on('click', '#confirmDelete', function() {
                if (!deleteBankId) return;

                const button = $(this);
                button.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Deleting...');

                $.ajax({
                    url: "{{ route('bank_details_delete', ':id') }}".replace(':id', deleteBankId),
                    type: "DELETE",
                    data: { _token: "{{ csrf_token() }}" },
                    success: function(response) {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('delete'));
                        if (modal) modal.hide();

                        if (response.status) {
                            table.ajax.reload(null, false);
                            deleteBankId = null;
                            frontendToaster('success', response.message || 'Bank details deleted successfully.');
                        } else {
                            frontendToaster('error', response.message || 'Unable to delete bank details.');
                        }
                    },
                    error: function(xhr) {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('delete'));
                        if (modal) modal.hide();
                        frontendToaster('error', xhr.responseJSON?.message || 'Unable to delete bank details.');
                    },
                    complete: function() {
                        button.prop('disabled', false).html('Yes, Sure');
                    }
                });
            });
        });
    </script>
@endsection