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

<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-1">
            <h4 class="page-title">🏠 Client List</h4>
        </div>

        <div class="card mb-2 shadow-sm">
            <div class="card-body">
                <h5 id="formTitle">➕ Add New Client </h5>

                <form id="saleForm" enctype="multipart/form-data">

                    @csrf
                    <input type="hidden" id="sale_id" name="sale_id">

                    <div class="row mt-3">

                        <div class="col-md-2 mb-2">
                            <label>Client Name:</label>
                            <input type="text" id="client_name" name="client_name" class="form-control">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label>Address:</label>
                            <input type="text" id="address" name="address" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Mobile No:</label>
                            <input type="text" id="cell_no" name="cell_no" class="form-control">
                        </div>
                

                        <div class="col-md-2 mb-2">
                            <label>Deed Receiver:</label>
                            <input type="text" id="deed_reciever" name="deed_reciever" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Deed No:</label>
                            <input type="text" id="deed_no" name="deed_no" class="form-control" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Date:</label>
                            <input type="text" id="date" name="date" class="form-control" required>
                        </div>

                        <div class="col-md-2 mb-2">
                            <label>Wings No:</label>
                            <input type="text" id="wings_no" name="wings_no" class="form-control" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Plot / Flat No:</label>
                            <input type="text" id="flat_no" name="flat_no" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Plot / Flat Size:</label>
                            <input type="text" id="flat_size" name="flat_size" class="form-control">
                        </div>

                        <div class="col-md-2 mb-2">
                                <label> Photo</label>
                                <input type="file" name="photo" id="photo" class="form-control @error('photo') is-invalid @enderror" onchange="ceo_photo_image(this)">
                                @error('photo')
                                    <span class="text-danger"> {{ $message }} </span>
                                @enderror
                        </div>
                        <div class="col-md-2 mb-2">
                                <img id="ceo_photo_blah" src="{{ url('upload/no_image.jpg') }}" class="rounded-circle avatar-lg img-thumbnail" alt="profile-image">
                        </div>

                        <div class="col-md-2 mb-2">
                            <label>BPO Code:</label>
                            <input type="text" id="bpo_code" name="bpo_code" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2" hidden>
                            <label>Total Price :</label>
                            <input type="text" id="total_price" name="total_price" class="form-control" value="0">
                        </div>
                        <div class="col-md-2 mb-2" hidden>
                            <label>Paid Amount:</label>
                            <input type="text" id="paid_amount" name="paid_amount" class="form-control" value="0">
                        </div>
                        <div class="col-md-3 mb-3" hidden>
                            <label>Due Amount:</label>
                            <input type="text" id="due_amount" name="due_amount" class="form-control" value="0">
                        </div>
                        <div class="col-md-3 mb-3" hidden>
                            <label>Numer Of Installment:</label>
                            <input type="text" id="installment" name="installment" class="form-control" value="0">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-2" id="saveBtn" style="width:16%;">Save</button>
                    <button type="button" class="btn btn-secondary mt-2 d-none" id="cancelEdit">Cancel</button>
                </form>
            </div>
        </div>


        <div class="card shadow-sm">
            <div class="card-body">
                <h5>📋 Client List</h5>
                <div class="table-responsive">
                    <table id="sale-datatable"
                        class="table table-bordered table-striped  table-auto">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>Client Name <br> Address <br> Mobile </th>
                                <th>Deed Receiver <br> Deed No <br> Date</th>
                                <th> Wings No <br> Flat/Plot No</th>
                                <th> Flat/Plot Size <br> BPO Code </th>
                                <th> Balance</th>
                                <th>Photo</th>
                                <th>Action</th>
                                <th>Group</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

<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('date').value = `${day}-${month}-${year}`;
    });
</script>

<script>
    $(document).ready(function () {

    const table = $('#sale-datatable').DataTable({
        ajax: {
            url: "{{ url('sale/fetch') }}",
            type: "GET",
            dataSrc: "data"
        },
            "order": [[ 8, 'asc' ]],
            "displayLength": 25,
            "columnDefs": [
                { "visible": false, "targets": 8 }
            ],
        columns: [

            { data: 'id' },

            {
                data: null,
                render: function (data) {
                    return `
                        <strong>${data.client_name ?? ''}</strong><br>
                        ${data.address ?? ''}<br>
                        ${data.cell_no ?? ''}
                    `;
                }
            },

            {
                data: null,
                render: function (data) {
                    return `
                        ${data.deed_reciever ?? ''}<br>
                        ${data.deed_no ?? ''}<br>
                        ${data.date ?? ''}
                    `;
                }
            },

            {
                data: null,
                render: function (data) {
                    return `
                        ${data.wings_no ?? ''}<br>
                        ${data.flat_no ?? ''}
                    `;
                }
            },

            {
                data: null,
                render: function (data) {
                    return `
                        ${data.flat_size ?? ''}<br>
                        ${data.bpo_code ?? ''}
                    `;
                }
            },

            {
                data: null,
                render: function (data) {
                    const due = Number(data.paid_amount ?? 0);
                    const inst = Number(data.installment ?? 0);
                    const dueBtn = due > 0 
                        ? `<br><button type="button" class="btn btn-sm btn-success mt-1">Advance</button>` 
                        : '';
                    return `${due}<br>${inst}${dueBtn}`;
                }
            },

            {
                data: 'photo',
                render: function (data) {
                    if (!data) return 'No Photo';
                    return `<img src="/${data}" width="60" height="60" class="img-thumbnail"/>`;
                }
            },

            {
                data: null,
                render: function (data) {
                    return `
                        <button class="btn btn-sm btn-success editBtn" data-id="${data.id}">Edit</button>
                        <button class="btn btn-sm btn-danger deleteBtn" data-id="${data.id}">Delete</button>
                    `;
                }
            },
            { data: 'wings_no' }

        ],
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last = null;

            api.column(8, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group table-secondary"><td colspan="8"><strong style="color: black;">Wings No: '+group+'</strong></td></tr>'
                    );

                    last = group;
                }
            } );
        }
    });




        let editId = null;

        const fields = [
            'wings_no', 'deed_no', 'date', 'deed_reciever',
            'flat_no', 'flat_size', 'client_name', 'cell_no',
            'address', 'bpo_code' , 'total_price' , 'paid_amount' , 'due_amount', 'installment'
        ];

        // ➤ EDIT click event
        $('#sale-datatable').on('click', '.editBtn', function() {

            const data = table.row($(this).closest('tr')).data();

            editId = data.id;

            fields.forEach(f => $('#' + f).val(data[f]));

            $('#formTitle').text('✏️ Edit Sale Info');
            $('#saveBtn').text('Update');
            $('#cancelEdit').removeClass('d-none');

            if (data.photo) {
                $('#ceo_photo_blah').attr('src', '/' + data.photo);
            } else {
                $('#ceo_photo_blah').attr('src', '/upload/no_image.jpg');
            }

            $('html, body').animate({
                scrollTop: 0
            }, 300);
        });

        // ➤ DELETE click event
        $('#sale-datatable').on('click', '.deleteBtn', function() {

            const data = table.row($(this).closest('tr')).data();

            if (!confirm("Are you sure to delete?")) return;

            $.ajax({
                url: "{{ url('sale/delete') }}/" + data.id,
                type: "POST",
                data: {
                    _method: "DELETE"
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                success: function() {
                    alert("Deleted Successfully!");
                    table.ajax.reload();
                }
            });
        });


        $('#saleForm').on('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this); // 👈 IMPORTANT

        if (editId) {
            formData.append('_method', 'PUT');
        }

        $.ajax({
            url: editId 
                ? "{{ url('sale/update') }}/" + editId 
                : "{{ route('sale.store') }}",
            type: "POST",
            data: formData,
            processData: false,  // 👈 MUST
            contentType: false,  // 👈 MUST
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            success: function(response) {

                alert(editId ? "Updated Successfully!" : "Saved Successfully!");

                $('#saleForm')[0].reset();
                $('#saveBtn').text('Save');
                $('#cancelEdit').addClass('d-none');
                $('#formTitle').text('➕ Add New Client Info');
                $('#ceo_photo_blah').attr('src', '/upload/no_image.jpg');

                editId = null;
                table.ajax.reload();
            },

            error: function(xhr) {
                let msg = "Something went wrong!";
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    msg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    try {
                        const parsed = JSON.parse(xhr.responseText);
                        if (parsed.message) msg = parsed.message;
                    } catch (e) {}
                }
                alert(msg);
            }
        });
    });

    // ➤ CANCEL edit
    $('#cancelEdit').on('click', function() {
        $('#saleForm')[0].reset();
        $('#saveBtn').text('Save');
        $('#cancelEdit').addClass('d-none');
        $('#formTitle').text('➕ Add New Client Info');
        $('#ceo_photo_blah').attr('src', '/upload/no_image.jpg');
        editId = null;
    });

 });
</script>

<style>
    .table td,
    .table th {
        font-size: 13px;
        vertical-align: middle;
    }
</style>


<script>
    function ceo_photo_image(input) {
        if (input.files && input.files[0]) {
            document.getElementById('ceo_photo_blah').src = window.URL.createObjectURL(input.files[0]);
        }
    }
</script>

@endsection