@extends('layouts/contentNavbarLayout')
@section('title', 'Bank Accounts')

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <span>Bank Accounts</span>
            <button class="btn btn-light btn-sm text-primary" data-bs-toggle="modal" data-bs-target="#addAccountModal">
                Add Account
            </button>
        </div>

        <div class="table-responsive p-1 mt-3">
            <table class="table table-bordered table-striped table-hover text-center align-middle w-100"
                id="bankAccountsTable">
                <thead class="table-primary">
                    <tr>
                        <th>S.No</th>
                        <th>Bank Name</th>
                        <th>Branch</th>
                        <th>Holder Name</th>
                        <th>Account Number</th>
                        <th>IFSC</th>
                        <th>Status</th>
                        <th>Docs</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="addAccountModal" tabindex="-1" aria-labelledby="addAccountModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form id="accountForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Bank Account</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body row g-3">
                        <div class="col-md-6">
                            <label for="bank_name" class="form-label">Bank Name</label>
                            <input type="text" class="form-control" name="bank_name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="branch_name" class="form-label">Branch Name</label>
                            <input type="text" class="form-control" name="branch_name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="account_holder_name" class="form-label">Account Holder Name</label>
                            <input type="text" class="form-control" name="account_holder_name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="account_number" class="form-label">Account Number</label>
                            <input type="text" class="form-control" name="account_number" required>
                        </div>
                        <div class="col-md-6">
                            <label for="ifsc" class="form-label">IFSC Code</label>
                            <input type="text" class="form-control" name="ifsc" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Upload Documents <small class="text-muted">(Aadhar Card, PAN Card,
                                    Cancel Cheque)</small></label>
                            <input type="file" class="form-control" name="docs[]" multiple
                                accept=".jpg,.jpeg,.png,.pdf">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            <span class="spinner-border spinner-border-sm d-none me-1" role="status"></span>
                            Submit
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@section('js')
    <!-- jQuery + DataTables + SweetAlert -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            $('#bankAccountsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('bank-accounts.list') }}',
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false, // ✅ Fix: make it not orderable
                        searchable: false // ✅ Fix: make it not searchable
                    },
                    {
                        data: 'bank_name',
                        name: 'bank_name'
                    },
                    {
                        data: 'branch_name',
                        name: 'branch_name'
                    },
                    {
                        data: 'account_holder_name',
                        name: 'account_holder_name'
                    },
                    {
                        data: 'account_number',
                        name: 'account_number'
                    },
                    {
                        data: 'ifsc',
                        name: 'ifsc'
                    },
                    {
                        data: 'status_label',
                        name: 'status'
                    },
                    {
                        data: 'docs',
                        name: 'docs',
                        orderable: false,
                        searchable: false
                    }
                ]
            });


            $('#accountForm').submit(function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                let submitBtn = $(this).find('button[type="submit"]');
                let spinner = submitBtn.find('.spinner-border');
                spinner.removeClass('d-none'); // Show loading spinner

                $.ajax({
                    url: '{{ route('bank-accounts.store') }}',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        $('#addAccountModal').modal('hide');
                        $('#accountForm')[0].reset();
                        Swal.fire('Success', res.message, 'success');
                        $('#bankAccountsTable').DataTable().ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        let message = xhr.responseJSON?.message || 'Validation failed';
                        if (xhr.responseJSON?.errors) {
                            message = Object.values(xhr.responseJSON.errors).flat().join(
                            '<br>');
                        }
                        Swal.fire('Error', message, 'error');
                    },
                    complete: function() {
                        spinner.addClass('d-none'); // Hide spinner
                    }
                });
            });

        });
    </script>
@endsection