@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>  Give an Advance </h4>
        </div>

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

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

                <!-- Payment Selector -->
                <div class="row">
                    <div class="col-md-3">
                        <label>Payment 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>Registration ID:</strong></label>
                        <input class="form-control shadow-sm" id="ac_number" placeholder="Registration ID">
                    </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>Receiver Name:</label>
                        <input type="text" id="member_name" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label>Mouza:</label>
                        <input type="text" id="member_address" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label>Receiver Mobile:</label>
                        <input type="text" id="member_mobile" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label>Due:</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">Payment</span>
                    </button>
                    <button class="btn btn-warning flex-fill" id="receiveBtn">Receive</button>
                    <button class="btn btn-secondary flex-fill" id="cancelBtn">
                        Cancel
                    </button>
                </div>


                <!-- List from land_registrations -->
                <div class="table-responsive mt-4">
                    <table class="table dt-responsive table-bordered table-hover" id="land-registration-list">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>Type of Deed</th>
                                <th>Deed No</th>
                                <th>Date</th>
                                <th>Receiver</th>
                                <th>Mouza</th>
                                <th>Amount</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="table-responsive mt-4">
                    <table class="table dt-responsive table-bordered table-hover" id="payment-table">
                        <thead class="table-dark">
                            <tr>
                                <th>Payment Date</th>
                                <th>Registration ID</th>
                                <th style="text-align: right;">Pay Amount</th>
                                <th style="text-align:center;">DELETE</th>
                            </tr>
                        </thead>
                        <tbody></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.land_registration.find') }}',
                    type: 'POST',
                    data: {
                        id: acNumber,
                        _token: '{{ csrf_token() }}'
                    },

                    success: function(response) {

                        if (response.details ) {
                            $('#member_name').val(response.details.receiver_name || '');
                            $('#member_address').val(response.details.mouza || '');
                            $('#member_mobile').val(response.details.receiver_mobile || '');
                            $('#member_balance').val(response.details.due_amount || '');

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

                    }
                });
    });

</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.land_registration.payment") }}',
        type: 'POST',
        dataType: 'json',
        data: {
            payment_date: deposit_date,
            id: acNumber,
            pay_amount: deposit_amount,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            if (response.status) {
                alert(response.message);
                $('#member_balance').val(response.data?.due_amount || '');
                $('#deposit_amount').val('');
                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}`);
                $('#land-registration-list').DataTable().ajax.reload();
                $('#payment-table').DataTable().ajax.reload();
            }
        },
        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('receiveBtn').addEventListener('click', function (e) {
    e.preventDefault(); // VERY IMPORTANT
    let receive_date = document.getElementById("deposit_date").value.trim();
    let regId = document.getElementById("ac_number").value.trim();
    let receive_amount = document.getElementById("deposit_amount").value.trim();

    $.ajax({
        url: '{{ route("sale.land_registration.receive") }}',
        type: 'POST',
        dataType: 'json',
        data: {
            receive_date: receive_date,
            id: regId,
            receive_amount: receive_amount,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            if (response.status) {
                alert(response.message);
                $('#member_balance').val(response.data?.due_amount || '');
                $('#deposit_amount').val('');
                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}`);
                $('#land-registration-list').DataTable().ajax.reload();
                $('#payment-table').DataTable().ajax.reload();
            }
        },
        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 {
                alert(xhr.responseJSON?.message || 'Server error occurred');
            }
        }
    });
});
</script>
<script>
$(function(){
    var basicTable = $.fn.dataTable.isDataTable('#land-registration-list')
        ? $('#land-registration-list').DataTable()
        : $('#land-registration-list').DataTable({
        retrieve: true,
        ajax: {
            url: '{{ route("sale.land_registration.fetch") }}',
            type: 'GET',
            dataSrc: 'data'
        },
        columns: [
            { data: 'id' },
            { data: 'type_of_deed' },
            { data: 'deed_no' },
            { data: 'date' },
            { data: 'receiver_name' },
            { data: 'mouza' },
            { data: 'advance_amount' },
            {
                data: null,
                render: function (data) {
                    return `<button class="btn btn-sm btn-info pickReg" data-id="${data.id}">Pick</button>`;
                }
            }
        ]
    });

    $('#land-registration-list').on('click', '.pickReg', function(){
        const regId = $(this).data('id');
        $('#ac_number').val(regId);
        $('#acNoSearch').click();
        $('html, body').animate({ scrollTop: 0 }, 300);
    });

    var payTable = $.fn.dataTable.isDataTable('#payment-table')
        ? $('#payment-table').DataTable()
        : $('#payment-table').DataTable({
        retrieve: true,
        ajax: {
            url: '{{ route("sale.land_registration.payments") }}',
            type: 'GET',
            dataSrc: 'data'
        },
        columns: [
            { data: 'date' },
            { data: 'id' },
            { data: 'amount', render: function(d){ return parseFloat(d).toFixed(2); }, className: 'text-end' },
            {
                data: null,
                render: function (row) {
                    const action = `{{ route('sale.land_registration.payment.delete', '__INVOICE__') }}`.replace('__INVOICE__', row.invoice_no);
                    return `
                        <form action="${action}" method="POST" style="display:inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                            <input type="hidden" name="_method" value="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>
                    `;
                },
                className: 'text-center'
            }
        ]
    });
});
</script>



@endsection