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

<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-2">
            <h4 class="page-title" style="color:teal;"><i class="fa fa-list"> </i>  Take an Advance </h4>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">

                <p style="color:red;">Cash In Hand: {{ $cash_total }}</p>

                <!-- GSS Selector -->
                <div class="row">
                    <div class="col-md-3">
                        <label>Deposit Date:</label>
                        <input type="text" id="deposit_date" class="form-control">
                    </div>
                </div>

                <br>

                <div class="row">
                    <div class="col-md-3">
                        <label for="ac_number"><strong>ID No:</strong></label>
                        <input class="form-control shadow-sm" id="ac_number" placeholder="A/C Number">
                    </div>
                    <div class="col-md-2">
                        <br>
                        <button class="btn btn-success px-4 shadow-sm" id="acNoSearch">
                                <i class="fa fa-search" aria-hidden="true"></i> Search
                        </button>
                    </div>
                </div>

                <br>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label>Name:</label>
                        <input type="text" id="member_name" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label>Address:</label>
                        <input type="text" id="member_address" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label>Mobile:</label>
                        <input type="text" id="member_mobile" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label>Balance:</label>
                        <input type="text" id="member_balance" class="form-control" readonly>
                    </div>
                </div>

                <!-- Account Form -->
                <div class="row mt-3">

                    <div class="col-md-3">
                        <label>Amount:</label>
                        <input type="number" step="1" id="deposit_amount" class="form-control">
                    </div>
                </div>

                <br>

                <div class="col-md-3 d-flex gap-2">
                    <button class="btn btn-primary flex-fill" id="saveBtn">
                        <span id="saveText">Receive</span>
                    </button>
                    <button class="btn btn-warning flex-fill" id="payBtn">Payment</button>
                    <button class="btn btn-secondary flex-fill" id="cancelBtn">
                        Cancel
                    </button>
                </div>


                <!-- Table -->
                <div class="table-responsive mt-4">
                    <table class="table dt-responsive table-bordered table-hover" id="basic-datatable">
                        <thead class="table-dark">
                            <tr>
                                <th>Deposit Date</th>
                                <th>ID No #</th>
                                <th>Name</th>
                                <th style="text-align: right;">Deposit Amount</th>
                                <th style="text-align: center;">DELETE</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($transactions ?? [] as $t)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($t->date)->format('d-m-Y') }}</td>
                                    <td>{{ $t->subledger_code }}</td>
                                    <td>{{ $t->client_name }}</td>
                                    <td class="text-end">{{ number_format($t->cr_amount, 2) }}</td>
                                    <td style="text-align:center;">
                                        <form action="{{ route('sale.delete.landinstallment', $t->invoice_no) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure want to delete?')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            @if(empty($transactions) || count($transactions) === 0)
                                <tr>
                                    <td colspan="5" class="text-center">No transactions found</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

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

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const today = new Date();
        const day = String(today.getDate()).padStart(2, '0');
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const year = today.getFullYear();

        document.getElementById('deposit_date').value = `${day}-${month}-${year}`;
    });
</script>

<script>
    document.getElementById('acNoSearch').addEventListener('click', function () {

        let acNumber = document.getElementById("ac_number").value.trim();

         $.ajax({
                    url: '{{ route('sale.getLandCustomerInfoByAcNo') }}',
                    type: 'POST',
                    data: {
                        acNumber: acNumber,
                        _token: '{{ csrf_token() }}'
                    },

                    success: function(response) {

                        if (response.customerDetails ) {
                            $('#member_name').val(response.customerDetails.client_name);
                            $('#member_address').val(response.customerDetails.address);
                            $('#member_mobile').val(response.customerDetails.cell_no);
                            $('#member_balance').val(response.customerDetails.due_amount);

                        } else {
                            alert('No details found for the given AC No.');
                        }

                    }
                });
    });

</script>
<script>
document.getElementById('saveBtn').addEventListener('click', function (e) {
    e.preventDefault(); // VERY IMPORTANT

    let deposit_date = document.getElementById("deposit_date").value.trim();
    let acNumber = document.getElementById("ac_number").value.trim();
    let deposit_amount = document.getElementById("deposit_amount").value.trim();

    $.ajax({
        url: '{{ route("sale.deposit") }}',
        type: 'POST',
        dataType: 'json',
        data: {
            deposit_date: deposit_date,
            acNumber: acNumber,
            deposit_amount: deposit_amount,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            if (response.status) {
                alert(response.message);
                // Update visible balances without full reload
                const newDue = response.data?.due_amount ?? null;
                const newPaid = response.data?.paid_amount ?? null;
                if (newDue !== null) $('#member_balance').val(newDue);
                if (newPaid !== null) {
                    // optional: show a toast/alert with new paid
                }
                // Clear form fields
                $('#deposit_amount').val('');
                $('#ac_number').val('');
                $('#member_name').val('');
                $('#member_address').val('');
                $('#member_mobile').val('');
                $('#member_balance').val('');
                // Reset deposit date to today
                (function() {
                    const today = new Date();
                    const day = String(today.getDate()).padStart(2, '0');
                    const month = String(today.getMonth() + 1).padStart(2, '0');
                    const year = today.getFullYear();
                    $('#deposit_date').val(`${day}-${month}-${year}`);
                })();
            }
        },
        error: function (xhr) {
            if (xhr.status === 422) {
                // Validation errors
                let errors = xhr.responseJSON.errors;
                let msg = '';
                for (let key in errors) {
                    msg += errors[key][0] + '\n';
                }
                alert(msg);
            } else {
                alert('Server error occurred');
            }
        }
    });
});

document.getElementById('payBtn').addEventListener('click', function (e) {
    e.preventDefault();
    let payment_date = document.getElementById("deposit_date").value.trim();
    let acNumber = document.getElementById("ac_number").value.trim();
    let pay_amount = document.getElementById("deposit_amount").value.trim();

    $.ajax({
        url: '{{ route("sale.payment.installment") }}',
        type: 'POST',
        dataType: 'json',
        data: {
            payment_date: payment_date,
            acNumber: acNumber,
            pay_amount: pay_amount,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            if (response.status) {
                alert(response.message);
                const newDue = response.data?.due_amount ?? null;
                const newPaid = response.data?.paid_amount ?? null;
                if (newDue !== null) $('#member_balance').val(newDue);
                $('#deposit_amount').val('');
            }
        },
        error: function (xhr) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let msg = '';
                for (let key in errors) {
                    msg += errors[key][0] + '\n';
                }
                alert(msg);
            } else if (xhr.responseJSON?.message) {
                alert(xhr.responseJSON.message);
            } else {
                alert('Server error occurred');
            }
        }
    });
});
</script>



@endsection