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

<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-1">
            <h4 class="page-title">🏠 Plot / Flat Buy</h4>
        </div>

        {{-- 🔹 Sale Info Form --}}
        <div class="card mb-2 shadow-sm">
            <div class="card-body">
                <h5 id="formTitle">➕ Add New Purchase </h5>

                <form id="saleForm">
                    @csrf
                    <input type="hidden" id="sale_id">

                    <div class="row mt-3">
                        <div class="col-md-2 mb-2">
                            <label>Wings No:</label>
                            <input type="text" id="wings_no" class="form-control" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Deed No:</label>
                            <input type="text" id="deed_no" class="form-control" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Date:</label>
                            <input type="text" id="date" class="form-control" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Deed Receiver:</label>
                            <input type="text" id="deed_reciever" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Plot / Flat No:</label>
                            <input type="text" id="flat_no" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Plot / Flat Size:</label>
                            <input type="text" id="flat_size" class="form-control">
                        </div>

                        <div class="col-md-4 mb-2">
                            <label>Client Name:</label>
                            <input type="text" id="client_name" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>Cell No:</label>
                            <input type="text" id="cell_no" class="form-control">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label>Address:</label>
                            <input type="text" id="address" class="form-control">
                        </div>
                        <div class="col-md-2 mb-2">
                            <label>BPO Code:</label>
                            <input type="text" id="bpo_code" class="form-control">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label>Total Price :</label>
                            <input type="text" id="total_price" class="form-control">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label>Paid Amount:</label>
                            <input type="text" id="paid_amount" class="form-control">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label>Due Amount:</label>
                            <input type="text" id="due_amount" class="form-control">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label>Numer Of Installmrnt:</label>
                            <input type="text" id="installment" class="form-control">
                        </div>
                    </div>

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

        {{-- 🔹 Data Table --}}
        <div class="card shadow-sm">
            <div class="card-body">
                <h5>📋 Plot / Flat Buy List</h5>
                <div class="table-responsive">
                    <table id="sale-datatable"
                        class="table table-bordered table-striped  table-auto align-middle nowrap text-center">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>Wings No</th>
                                <th>Deed No</th>
                                <th>Date</th>
                                <th>Deed Receiver</th>
                                <th>Flat/Plot No</th>
                                <th>Flat/Plot Size</th>
                                <th>Client Name</th>
                                <th>Mobile</th>
                                <th>Address</th>
                                <th>BPO No</th>
                                <th>Action</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",
                error: function(xhr) {
                    console.log("Ajax Error:", xhr.responseText);
                }
            },
            columns: [{
                    data: 'id'
                },
                {
                    data: 'wings_no'
                },
                {
                    data: 'deed_no'
                },
                {
                    data: 'date'
                },
                {
                    data: 'deed_reciever'
                },
                {
                    data: 'flat_no'
                },
                {
                    data: 'flat_size'
                },
                {
                    data: 'client_name'
                },
                {
                    data: 'cell_no'
                },
                {
                    data: 'address'
                },
                {
                    data: 'bpo_code'
                },
                {
                    data: null,
                    render: function() {
                        return `
                        <button class="btn btn-sm btn-success editBtn">Edit</button>
                        <button class="btn btn-sm btn-danger deleteBtn">Delete</button>
                    `;
                    }
                }
            ]
        });

        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
        $('#basic-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');

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

        // ➤ DELETE click event
        $('#basic-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();
                }
            });
        });

        // ➤ SAVE / UPDATE
        $('#saleForm').on('submit', function(e) {
            e.preventDefault();

            const formData = {};

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

            if (editId) formData._method = "PUT";

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

                success: function() {

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

                    $('#saleForm')[0].reset();
                    $('#saveBtn').text('Save');
                    $('#cancelEdit').addClass('d-none');
                    $('#formTitle').text('➕ Add New Sale Info');

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

        $('#cancelEdit').click(function() {
            $('#saleForm')[0].reset();
            $('#saveBtn').text('Save');
            $('#cancelEdit').addClass('d-none');
            $('#formTitle').text('➕ Add New Sale Info');
            editId = null;
        });

    });
</script>

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

@endsection