@extends('admin_dashboard')
@section('admin')
<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-1">
            <h4 class="page-title">Land Registration</h4>
        </div>

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

                <form id="landRegForm" enctype="multipart/form-data">
                    @csrf
                    <div class="row mt-3">
                        <div class="col-md-3 mb-2">
                            <label>Type of Deed</label>
                            <input type="text" id="type_of_deed" name="type_of_deed" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Deed No</label>
                            <input type="text" id="deed_no" name="deed_no" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Date</label>
                            <input type="text" id="date" name="date" class="form-control">
                        </div>

                        <div class="col-md-3 mb-2">
                            <label>Giver</label>
                            <input type="text" id="giver_name" name="giver_name" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Mobile No</label>
                            <input type="text" id="giver_mobile" name="giver_mobile" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Receiver</label>
                            <input type="text" id="receiver_name" name="receiver_name" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Mobile No</label>
                            <input type="text" id="receiver_mobile" name="receiver_mobile" class="form-control">
                        </div>

                        <div class="col-md-3 mb-2">
                            <label>Mouza</label>
                            <input type="text" id="mouza" name="mouza" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Quantity of Land</label>
                            <input type="text" id="quantity_of_land" name="quantity_of_land" class="form-control">
                        </div>

                        <div class="col-md-3 mb-2" hidden>
                            <input type="text" id="registration_id" name="registration_id" class="form-control" value="0">
                            <input type="text" id="total_amount" name="total_amount" class="form-control" value="0">
                            <input type="text" id="advance_amount" name="advance_amount" class="form-control" value="0">
                            <input type="text" id="due_amount" name="due_amount" class="form-control" value="0">
                        </div>

                        <div class="col-md-3 mb-2">
                            <label>Ticket Delivery</label>
                            <input type="text" id="ticket_delivery" name="ticket_delivery" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Compare Delivery</label>
                            <input type="text" id="compare_delivery" name="compare_delivery" class="form-control">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Deed Delivery</label>
                            <input type="text" id="deed_delivery" name="deed_delivery" class="form-control">
                        </div>

                        <div class="col-md-3 mb-2">
                            <label>Photo</label>
                            <input type="file" name="photo" id="photo" class="form-control" onchange="preview_photo(this)">
                        </div>
                        <div class="col-md-3 mb-2">
                            <img id="photo_preview" src="/upload/no_image.jpg" class="rounded img-thumbnail" style="width:120px;height:120px;" alt="photo">
                        </div>
                    </div>

                    <button type="button" 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>Registration List</h5>
                <div class="table-responsive">
                    <table id="land-reg-datatable" class="table table-bordered table-striped table-auto">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>Type of Deed</th>
                                <th>Deed No</th>
                                <th>Date</th>
                                <th>Giver</th>
                                <th>Giver Mobile</th>
                                <th>Receiver</th>
                                <th>Receiver Mobile</th>
                                <th>Mouza</th>
                                <th>Quantity of Land</th>
                                <th>Ticket Delivery</th>
                                <th>Compare Delivery</th>
                                <th>Deed Delivery</th>
                                <th>Balance</th>
                                <th>Photo</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 t = new Date();
        const d = String(t.getDate()).padStart(2,'0');
        const m = String(t.getMonth()+1).padStart(2,'0');
        const y = t.getFullYear();
        document.getElementById('date').value = `${d}-${m}-${y}`;
    });

    function preview_photo(input) {
        if (input.files && input.files[0]) {
            document.getElementById('photo_preview').src = window.URL.createObjectURL(input.files[0]);
        }
    }

    $(function () {
        const table = $.fn.dataTable.isDataTable('#land-reg-datatable')
            ? $('#land-reg-datatable').DataTable()
            : $('#land-reg-datatable').DataTable({
            ajax: {
                url: "{{ route('sale.land_registration.fetch') }}",
                type: "GET",
                dataSrc: "data"
            },
            columns: [
                { data: 'id' },
                { data: 'type_of_deed' },
                { data: 'deed_no' },
                { data: 'date' },
                { data: 'giver_name' },
                { data: 'giver_mobile' },
                { data: 'receiver_name' },
                { data: 'receiver_mobile' },
                { data: 'mouza' },
                { data: 'quantity_of_land' },
                { data: 'ticket_delivery' },
                { data: 'compare_delivery' },
                { data: 'deed_delivery' },
                { data: 'advance_amount' },
                {
                    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>
                        `;
                    }
                }
            ]
        });

        let editId = null;

        $('#saveBtn').on('click', function(e){
            e.preventDefault();
            const form = document.getElementById('landRegForm');
            const fd = new FormData(form);
            if (editId) fd.append('_method', 'PUT');

            $.ajax({
                url: editId 
                    ? "{{ url('sale/land_registration/update') }}/" + editId
                    : "{{ route('sale.land_registration.store') }}",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name=\"csrf-token\"]').attr('content') },
                success: function() {
                    alert(editId ? 'Updated successfully' : 'Saved successfully');
                    form.reset();
                    $('#photo_preview').attr('src','/upload/no_image.jpg');
                    (function() {
                        const t = new Date();
                        const d = String(t.getDate()).padStart(2,'0');
                        const m = String(t.getMonth()+1).padStart(2,'0');
                        const y = t.getFullYear();
                        $('#date').val(`${d}-${m}-${y}`);
                    })();
                    editId = null;
                    $('#cancelEdit').addClass('d-none');
                    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;
                    }
                    alert(msg);
                }
            });
        });

        $('#land-reg-datatable').on('click', '.editBtn', function(){
            const data = table.row($(this).closest('tr')).data();
            editId = data.id;
            $('#type_of_deed').val(data.type_of_deed);
            $('#deed_no').val(data.deed_no);
            $('#date').val(data.date);
            $('#giver_name').val(data.giver_name);
            $('#giver_mobile').val(data.giver_mobile);
            $('#receiver_name').val(data.receiver_name);
            $('#receiver_mobile').val(data.receiver_mobile);
            $('#mouza').val(data.mouza);
            $('#quantity_of_land').val(data.quantity_of_land);
            $('#total_amount').val(data.total_amount);
            $('#advance_amount').val(data.advance_amount);
            $('#due_amount').val(data.due_amount);
            $('#ticket_delivery').val(data.ticket_delivery);
            $('#compare_delivery').val(data.compare_delivery);
            $('#deed_delivery').val(data.deed_delivery);
            if (data.photo) $('#photo_preview').attr('src','/' + data.photo);
            $('#cancelEdit').removeClass('d-none');
            $('html, body').animate({ scrollTop: 0 }, 300);
        });

        $('#land-reg-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/land_registration/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();
                }
            });
        });

        $('#cancelEdit').on('click', function(){
            const form = document.getElementById('landRegForm');
            form.reset();
            $('#photo_preview').attr('src','/upload/no_image.jpg');
            (function() {
                const t = new Date();
                const d = String(t.getDate()).padStart(2,'0');
                const m = String(t.getMonth()+1).padStart(2,'0');
                const y = t.getFullYear();
                $('#date').val(`${d}-${m}-${y}`);
            })();
            editId = null;
            $('#cancelEdit').addClass('d-none');
        });
    });
</script>
@endsection