@extends('admin_dashboard')
@section('admin')

<style>
    .dp-header {
        background: linear-gradient(135deg, #1d6fca, #0d4a8a);
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px 6px 0 0;
        font-weight: 600;
        font-size: .95rem;
        letter-spacing: .03em;
    }
    .dp-header i { margin-right: 6px; opacity: .85; }
    .dp-card { border: 1px solid #c5d9f5; border-radius: 0 0 6px 6px; }

    .cash-badge {
        background: #e8f0ff;
        color: #1d6fca;
        border: 1px solid #c5d9f5;
        border-radius: 6px;
        padding: 6px 14px;
        font-size: .85rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .section-label {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #1d6fca;
        border-bottom: 2px solid #dce8f8;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }

    .form-label { font-size: .8rem; font-weight: 600; color: #344563; margin-bottom: 3px; }

    .member-field {
        background: #f5f8ff !important;
        border-color: #b8cff0 !important;
        color: #1a2a4c !important;
        font-weight: 500;
    }

    #basic-datatable thead th {
        background: #1d6fca;
        color: #fff;
        font-size: .78rem;
        font-weight: 600;
        border-color: #1558a8;
    }
    #basic-datatable tbody tr:hover { background: #f0f6fc; }
    #basic-datatable td { font-size: .82rem; vertical-align: middle; }

    .tbl-header {
        background: linear-gradient(135deg, #1d6fca, #0d4a8a);
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px 6px 0 0;
        font-weight: 600;
        font-size: .92rem;
    }
    .tbl-card { border: 1px solid #c5d9f5; border-radius: 0 0 6px 6px; }
</style>

<div class="content">
<div class="container-fluid">

    {{-- Page Title --}}
    <div class="page-title-box mb-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <h4 class="page-title mb-0" style="color:#1d6fca;">
            <i class="mdi mdi-arrow-up-circle-outline me-1"></i> GSS Members Deposit Payment
        </h4>
        <span class="cash-badge">
            <i class="mdi mdi-cash"></i> Cash in Hand: <strong>{{ $cash_total }}</strong>
        </span>
    </div>

    {{-- ══ ENTRY FORM ══ --}}
    <div class="mb-4">
        <div class="dp-header">
            <i class="mdi mdi-plus-circle-outline"></i> New GSS Payment Entry
        </div>
        <div class="card dp-card shadow-sm mb-0">
            <div class="card-body pt-3 pb-3">

                {{-- Search --}}
                <p class="section-label"><i class="mdi mdi-magnify me-1"></i> Search Member</p>
                <div class="row g-2 mb-3">
                    <div class="col-md-2">
                        <label class="form-label">Payment Date</label>
                        <input type="text" id="payment_date" class="form-control form-control-sm"
                                   value="{{ date('d-m-Y') }}" onfocus="(this.type='date')" onblur="(this.type='text')">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">A/C Number</label>
                        <div class="input-group input-group-sm">
                            <input class="form-control" id="ac_number" placeholder="Enter account number">
                            <button class="btn btn-primary px-3" id="acNoSearch" type="button">
                                <i class="mdi mdi-magnify"></i> Search
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Member Info --}}
                <p class="section-label"><i class="mdi mdi-account-outline me-1"></i> Member Information</p>
                <div class="row g-2 mb-3 align-items-start">
                    {{-- Photo --}}
                    <div class="col-auto" id="photoCol" style="display:none;">
                        <label class="form-label">Photo</label>
                        <div style="width:72px; height:72px; border-radius:10px; overflow:hidden; border:2px solid #c5d9f5; background:#f5f8ff;">
                            <img id="member_photo" src="" alt="Photo"
                                 style="width:100%; height:100%; object-fit:cover; display:none;">
                            <div id="photoPlaceholder" style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
                                <i class="fa fa-user" style="font-size:26px; color:#ccc;"></i>
                            </div>
                        </div>
                    </div>
                    {{-- Signature --}}
                    <div class="col-auto" id="sigCol" style="display:none;">
                        <label class="form-label">Signature</label>
                        <div style="width:120px; height:52px; border-radius:10px; overflow:hidden; border:2px solid #c5d9f5; background:#f5f8ff; display:flex; align-items:center; justify-content:center; padding:4px;">
                            <img id="member_signature" src="" alt="Signature"
                                 style="max-width:100%; max-height:100%; object-fit:contain; display:none;">
                            <span id="sigPlaceholder" style="font-size:11px; color:#ccc;">No signature</span>
                        </div>
                    </div>
                    {{-- Text fields --}}
                    <div class="col">
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="form-label">Name</label>
                                <input type="text" id="member_name" class="form-control form-control-sm member-field" readonly placeholder="—">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Father/Husband Name</label>
                                <input type="text" id="member_fat_hus_name" class="form-control form-control-sm member-field" readonly placeholder="—">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Address</label>
                                <input type="text" id="member_address" class="form-control form-control-sm member-field" readonly placeholder="—">
                            </div>
                        </div>

                        <div class="row g-2" style="margin-top:2px;">
                            <div class="col-md-4">
                                <label class="form-label">Mobile</label>
                                <input type="text" id="member_mobile" class="form-control form-control-sm member-field" readonly placeholder="—">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Group</label>
                                <input type="text" id="member_group" class="form-control form-control-sm member-field" readonly placeholder="—">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Current Balance</label>
                                <input type="text" id="member_balance" class="form-control form-control-sm member-field" readonly placeholder="—">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Payment Amount --}}
                <p class="section-label"><i class="mdi mdi-currency-bdt me-1"></i> Payment</p>
                <div class="row g-2 mb-3">
                    <div class="col-md-3">
                        <label class="form-label">Pay Amount</label>
                        <input type="number" step="1" id="pay_amount" class="form-control form-control-sm" placeholder="0.00" min="0">
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button class="btn btn-primary btn-sm px-4" id="saveBtn">
                        <i class="mdi mdi-content-save-outline me-1"></i>
                        <span id="saveText">Save</span>
                    </button>
                    <button class="btn btn-secondary btn-sm px-3" id="cancelBtn">
                        <i class="mdi mdi-close me-1"></i> Cancel
                    </button>
                </div>

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

    {{-- ══ PAYMENTS TABLE ══ --}}
    <div>
        <div class="tbl-header">
            <i class="mdi mdi-format-list-bulleted me-1"></i> Payment Records
            <span class="badge bg-light text-dark ms-2" style="font-size:.72rem;">{{ count($payments) }}</span>
        </div>
        <div class="card tbl-card shadow-sm mb-0">
            <div class="card-body p-2">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover mb-0 w-100" id="basic-datatable">
                        <thead>
                            <tr>
                                <th style="width:45px;">#</th>
                                <th>Payment Date</th>
                                <th>A/C Number</th>
                                <th>Member Name</th>
                                <th class="text-end">Pay Amount</th>
                                <th class="text-center" style="width:70px;">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($payments as $key => $row)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ \Carbon\Carbon::parse($row->date)->format('d-m-Y') }}</td>
                                <td>{{ $row->account_no }}</td>
                                <td>{{ $row->member_name }}</td>
                                <td class="text-end font-monospace">{{ number_format($row->payment_amount, 2) }}</td>
                                <td class="text-center">
                                    <form action="{{ route('delete.acpayment', $row->invoice_no) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm py-0 px-2"
                                                onclick="return confirm('Are you sure you want to delete?')">
                                            <i class="mdi mdi-trash-can-outline"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const t = new Date();
        document.getElementById('payment_date').value =
            String(t.getDate()).padStart(2,'0') + '-' +
            String(t.getMonth()+1).padStart(2,'0') + '-' + t.getFullYear();
        document.getElementById('ac_number').focus();
    });

    document.getElementById('acNoSearch').addEventListener('click', searchMember);
    document.getElementById('ac_number').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') { e.preventDefault(); searchMember(); }
    });

    function searchMember() {
        const acNumber = document.getElementById('ac_number').value.trim();
        if (!acNumber) { alert('Please enter an A/C number.'); return; }
        $.ajax({
            url: '{{ route("getCustomerInfoByAcNo") }}',
            type: 'POST',
            data: { acNumber: acNumber, _token: '{{ csrf_token() }}' },
            success: function(response) {
                if (response.customerDetails) {
                    const d = response.customerDetails;
                    $('#member_name').val(d.member_name);
                    $('#member_fat_hus_name').val(d.fat_hus_name || '');
                    $('#member_group').val(d.group_name || '');
                    $('#member_address').val(d.member_address);
                    $('#member_mobile').val(d.member_mobile);
                    $('#member_balance').val(d.balance);

                    // Photo
                    if (d.photo) {
                        $('#member_photo').attr('src', '/' + d.photo).show();
                        $('#photoPlaceholder').hide();
                        $('#photoCol').show();
                    } else {
                        $('#member_photo').hide();
                        $('#photoPlaceholder').show();
                        $('#photoCol').show();
                    }

                    // Signature
                    if (d.signature) {
                        $('#member_signature').attr('src', '/' + d.signature).show();
                        $('#sigPlaceholder').hide();
                        $('#sigCol').show();
                    } else {
                        $('#member_signature').hide();
                        $('#sigPlaceholder').show();
                        $('#sigCol').show();
                    }

                    $('#pay_amount').focus().select();
                } else {
                    alert('No member found for this A/C number.');
                }
            },
            error: function() { alert('Error fetching member details.'); }
        });
    }

    document.getElementById('saveBtn').addEventListener('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: '{{ route("deposit_payment.store") }}',
            type: 'POST',
            dataType: 'json',
            data: {
                payment_date: document.getElementById('payment_date').value.trim(),
                acNumber:     document.getElementById('ac_number').value.trim(),
                pay_amount:   document.getElementById('pay_amount').value.trim(),
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status) {
                    alert(response.message);

                    // Clear amount only; keep ac_number and payment_date
                    document.getElementById('pay_amount').value = '';

                    // Refresh balance from fresh member_info data
                    if (response.member_balance !== undefined) {
                        document.getElementById('member_balance').value = response.member_balance;
                    }
                }
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message
                    || Object.values(xhr.responseJSON?.errors || {}).flat().join('\n')
                    || 'Server error occurred.';
                alert(msg);
            }
        });
    });

    document.getElementById('cancelBtn').addEventListener('click', function() {
        ['ac_number','member_name','member_fat_hus_name','member_group','member_address','member_mobile','member_balance','pay_amount']
            .forEach(id => document.getElementById(id).value = '');
        $('#photoCol, #sigCol').hide();
        $('#member_photo, #member_signature').hide().attr('src','');
        $('#photoPlaceholder').show();
        $('#sigPlaceholder').show();
        document.getElementById('ac_number').focus();
    });
</script>

@endsection