@extends('layouts.app')

@section('title', 'Customers | Saai Cards')

@section('content')
<div class="max-w-container-max mx-auto space-y-lg">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-md mb-xl">
        <div>
            <h2 class="font-headline-md text-headline-md text-on-surface">Customers</h2>
            <p class="font-body-md text-body-md text-secondary">Manage customers with Name, Address and Mobile for quotation booking.</p>
        </div>
        <button onclick="addRecord()" class="bg-primary text-on-primary px-lg py-sm rounded-xl font-label-md text-label-md flex items-center gap-sm hover:shadow-lg transition-all active:scale-[0.98]">
            <span class="material-symbols-outlined text-[20px]">person_add</span>
            Add Customer
        </button>
    </div>

    <div class="master-card bg-surface-container-lowest rounded-xl overflow-hidden border border-surface-container">
        <div class="overflow-x-auto p-md">
            <table id="customersTable" class="w-full text-left border-collapse stripe hover dataTable">
                <thead>
                    <tr class="bg-surface-container-low/50">
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">#</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Name</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Address</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Mobile</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Status</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container text-right">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="fixed inset-0 bg-on-surface/40 backdrop-blur-sm z-50 hidden flex items-center justify-center p-md" id="modal-overlay">
    <div class="bg-white rounded-2xl w-full max-w-md master-card p-xl shadow-2xl">
        <div class="flex items-center justify-between mb-lg">
            <h3 class="font-headline-sm text-headline-sm text-on-surface" id="modalTitle">Add Customer</h3>
            <button class="p-xs rounded-full hover:bg-surface-container transition-colors text-secondary" onclick="toggleModal()">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>
        <form id="customerForm" class="space-y-lg">
            <input type="hidden" id="record_id" name="id">
            <div>
                <label class="block font-label-md text-label-md text-on-surface-variant mb-xs">Name <span class="text-error">*</span></label>
                <input class="w-full border-outline-variant border rounded-lg p-sm text-body-md outline-none" id="name" name="name" type="text" required/>
            </div>
            <div>
                <label class="block font-label-md text-label-md text-on-surface-variant mb-xs">Address</label>
                <textarea class="w-full border-outline-variant border rounded-lg p-sm text-body-md h-24 outline-none resize-none" id="address" name="address"></textarea>
            </div>
            <div>
                <label class="block font-label-md text-label-md text-on-surface-variant mb-xs">Mobile</label>
                <input class="w-full border-outline-variant border rounded-lg p-sm text-body-md outline-none" id="mobile" name="mobile" type="text"/>
            </div>
            <div class="flex items-center gap-sm">
                <input type="checkbox" id="status" name="status" value="1" checked>
                <label for="status" class="font-label-md text-label-md text-on-surface-variant">Active</label>
            </div>
            <div class="flex items-center gap-md pt-md">
                <button type="button" class="flex-1 py-sm border border-outline-variant rounded-xl font-label-md text-label-md text-secondary" onclick="toggleModal()">Cancel</button>
                <button type="submit" class="flex-1 py-sm bg-primary text-on-primary rounded-xl font-label-md text-label-md" id="saveBtn">Save</button>
            </div>
        </form>
    </div>
</div>
@endsection

@stack('scripts')
<script>
    function toggleModal() {
        document.getElementById('modal-overlay').classList.toggle('hidden');
    }

    document.addEventListener("DOMContentLoaded", function() {
        let table = $('#customersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('customers.index') }}",
            columns: [
                {data: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'name', name: 'name', render: function(data) {
                    return '<span class="font-label-md text-label-md text-on-surface font-bold">'+data+'</span>';
                }},
                {data: 'address', name: 'address', render: function(data) {
                    return '<span class="font-body-md text-body-md text-on-surface-variant">'+(data || '-')+'</span>';
                }},
                {data: 'mobile', name: 'mobile', render: function(data) {
                    return '<span class="font-body-md text-body-md">'+(data || '-')+'</span>';
                }},
                {data: 'status', name: 'status', orderable: false, render: function(data, type, row) {
                    let isChecked = data == 1 ? 'checked' : '';
                    return `<input type="checkbox" class="status-toggle" data-id="${row.id}" ${isChecked}/>`;
                }},
                {data: 'action', orderable: false, searchable: false, className: 'text-right', render: function(data, type, row) {
                    let escName = (row.name || '').replace(/"/g, '&quot;');
                    let escAddr = (row.address || '').replace(/"/g, '&quot;');
                    let escMobile = (row.mobile || '').replace(/"/g, '&quot;');
                    return `<div class="flex justify-end gap-xs">
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-primary-container text-secondary edit-btn"
                            data-id="${row.id}" data-name="${escName}" data-address="${escAddr}" data-mobile="${escMobile}" data-status="${row.status}">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-error-container text-secondary delete-btn" data-id="${row.id}">
                            <span class="material-symbols-outlined text-[18px]">delete</span>
                        </button>
                    </div>`;
                }},
            ],
            order: [[0, 'desc']],
            pageLength: 25,
            createdRow: function(row) {
                $(row).find('td').addClass('px-lg py-md border-b border-surface-container');
            }
        });

        window.addRecord = function() {
            $('#customerForm')[0].reset();
            $('#record_id').val('');
            $('#status').prop('checked', true);
            $('#modalTitle').text('Add Customer');
            toggleModal();
        };

        $('body').on('click', '.edit-btn', function() {
            $('#record_id').val($(this).data('id'));
            $('#name').val($(this).data('name'));
            $('#address').val($(this).data('address'));
            $('#mobile').val($(this).data('mobile'));
            $('#status').prop('checked', $(this).data('status') == 1);
            $('#modalTitle').text('Edit Customer');
            toggleModal();
        });

        $('#customerForm').on('submit', function(e) {
            e.preventDefault();
            let id = $('#record_id').val();
            let url = id ? "{{ url('customers') }}/" + id : "{{ route('customers.store') }}";
            let type = id ? 'PUT' : 'POST';
            let formData = $(this).serializeArray();
            if (!$('#status').is(':checked')) formData.push({name: 'status', value: 0});

            $('#saveBtn').prop('disabled', true).text('Saving...');
            $.ajax({
                url: url, type: type, data: $.param(formData),
                success: function(res) {
                    toggleModal();
                    table.draw();
                    Swal.fire({icon: 'success', title: 'Success', text: res.message, timer: 1500, showConfirmButton: false});
                    $('#saveBtn').prop('disabled', false).text('Save');
                },
                error: function(xhr) {
                    $('#saveBtn').prop('disabled', false).text('Save');
                    Swal.fire({icon: 'error', title: 'Error', text: xhr.responseJSON?.message || 'Something went wrong'});
                }
            });
        });

        $('body').on('click', '.delete-btn', function() {
            let id = $(this).data('id');
            Swal.fire({
                title: 'Delete customer?', icon: 'warning', showCancelButton: true,
                confirmButtonColor: '#ba1a1a', confirmButtonText: 'Yes, delete'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('customers') }}/" + id, type: 'DELETE',
                        success: function(res) {
                            table.draw();
                            Swal.fire({icon: 'success', title: 'Deleted', text: res.message, timer: 1500, showConfirmButton: false});
                        }
                    });
                }
            });
        });

        $('body').on('change', '.status-toggle', function() {
            $.ajax({
                url: "{{ url('customers') }}/" + $(this).data('id') + "/status",
                type: 'PATCH',
                data: { status: $(this).prop('checked') ? 1 : 0 }
            });
        });
    });
</script>