@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

<link href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.min.css" rel="stylesheet">

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
        <div>
            <div class="admin-breadcrumb">
                <span>Admin</span>
                <span class="material-symbols-outlined" style="font-size:16px;">chevron_right</span>
                <span class="active">Customers</span>
            </div>
            <h2 class="admin-page-title">Customer Management</h2>
            <p class="admin-page-subtitle">Monitor customer activity, account health, and marketplace engagement.</p>
        </div>
        <button class="btn-primary-action" id="addCustomerButton" type="button">
            <span class="material-symbols-outlined" style="font-size:18px;">person_add</span>
            Add Customer
        </button>
    </section>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Please review the form.</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">groups</span></div><p class="admin-stat-value">{{ number_format($statistics['total']) }}</p><p class="admin-stat-label">Total customers</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">person_check</span></div><p class="admin-stat-value">{{ number_format($statistics['active']) }}</p><p class="admin-stat-label">Active customers</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">person_add</span></div><p class="admin-stat-value">{{ number_format($statistics['new_this_month']) }}</p><p class="admin-stat-label">New this month</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">verified_user</span></div><p class="admin-stat-value">{{ number_format($statistics['verified']) }}</p><p class="admin-stat-label">Verified mobile accounts</p></div></div>
    </section>

    <section class="admin-card">
        <div class="admin-card-body d-flex flex-column flex-lg-row justify-content-between gap-3">
            <div><h3 class="admin-card-title">Customer Directory</h3><p class="admin-meta mt-1">Manage customer profiles and access status</p></div>
            <div class="admin-toolbar">
                <input class="admin-search" id="customerSearch" type="search" value="{{ request('search') }}" placeholder="Search customer...">
                <select class="admin-select" id="customerStatus">
                    <option value="">All statuses</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                    <option value="blocked">Blocked</option>
                </select>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table admin-table mb-0 w-100" id="customersTable">
                <thead><tr><th>Customer</th><th>Mobile</th><th>Location</th><th>Status</th><th>Joined</th><th class="text-end">Action</th></tr></thead>
            </table>
        </div>
    </section>
</main>

@include('admin.customers.create_edit')

<div class="modal fade" id="deleteCustomerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="deleteCustomerForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header"><h5 class="modal-title">Delete Customer</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
                <div class="modal-body">Delete <strong id="deleteCustomerName"></strong>? This removes the customer from active records.</div>
                <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn btn-danger" type="submit">Delete</button></div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const storeUrl = @json(route('admin.customers.store'));
        const updateUrl = @json(route('admin.customers.update', ['customer' => '__CUSTOMER__']));
        const destroyUrl = @json(route('admin.customers.destroy', ['customer' => '__CUSTOMER__']));
        const oldMode = @json(old('_form_mode'));
        const oldCustomerId = @json(old('_customer_id'));
        const oldValues = @json(old());
        const initialSearch = @json(request('search', ''));
        const customerModalElement = document.getElementById('customerModal');
        const customerModal = bootstrap.Modal.getOrCreateInstance(customerModalElement);
        const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteCustomerModal'));
        const customerForm = document.getElementById('customerForm');
        let searchTimer;

        const escapeHtml = value => $('<div>').text(value ?? '').html();
        const customerUrl = (template, id) => template.replace('__CUSTOMER__', id);
        const location = customer => [customer.city, customer.state].filter(Boolean).join(', ') || 'Not provided';
        const initials = name => (name === 'Profile incomplete' ? 'CU' : name.substring(0, 2)).toUpperCase();
        const photoPreview = document.getElementById('customerPhotoPreview');
        const resetPhotoPreview = () => {
            photoPreview.innerHTML = '<span class="material-symbols-outlined">person</span>';
        };
        const setPhotoPreview = url => {
            photoPreview.innerHTML = url ? `<img src="${escapeHtml(url)}" alt="">` : '<span class="material-symbols-outlined">person</span>';
        };

        const table = $('#customersTable').DataTable({
            processing: true,
            serverSide: true,
            searchDelay: 400,
            search: { search: initialSearch },
            ajax: {
                url: @json(route('admin.customers.data')),
                data: data => {
                    data.status = document.getElementById('customerStatus').value;
                },
            },
            order: [[4, 'desc']],
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            dom: 'rt<"admin-card-body border-top d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2"lip>',
            columns: [
                {
                    data: 'name',
                    render: (value, type, customer) => type !== 'display' ? value : `
                        <div class="d-flex align-items-center gap-3">
                            ${customer.profile_photo ? `<img class="admin-avatar" src="${escapeHtml(customer.profile_photo)}" alt="">` : `<div class="admin-initials">${escapeHtml(initials(value))}</div>`}
                            <div>
                                <p class="admin-name">${escapeHtml(value)}</p>
                                <p class="admin-meta">${escapeHtml(customer.reference)} &middot; ${escapeHtml(customer.email)}</p>
                            </div>
                        </div>`,
                },
                { data: 'mobile' },
                { data: null, render: (value, type, customer) => type !== 'display' ? location(customer) : escapeHtml(location(customer)) },
                {
                    data: 'status',
                    render: value => {
                        const style = value === 'active' ? 'success' : (value === 'blocked' ? 'danger' : 'warning');
                        return `<span class="admin-status ${style}">${escapeHtml(value.charAt(0).toUpperCase() + value.slice(1))}</span>`;
                    },
                },
                { data: 'joined_at', className: 'admin-meta' },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    className: 'text-end',
                    render: (value, type, customer) => type !== 'display' ? '' : `
                        <button class="admin-action js-edit-customer" data-customer-id="${customer.id}" title="Edit" type="button"><span class="material-symbols-outlined">edit</span></button>
                        <button class="admin-action js-delete-customer" data-customer-id="${customer.id}" title="Delete" type="button"><span class="material-symbols-outlined">delete</span></button>`,
                },
            ],
        });

        const setCustomerForm = (mode, customer = {}) => {
            const editing = mode === 'edit';
            customerForm.reset();
            customerForm.action = editing ? customerUrl(updateUrl, customer.id) : storeUrl;
            document.getElementById('customerModalTitle').textContent = editing ? 'Edit Customer' : 'Add Customer';
            document.getElementById('customerSubmitButton').textContent = editing ? 'Update Customer' : 'Create Customer';
            document.getElementById('customerFormMode').value = mode;
            document.getElementById('customerId').value = customer.id ?? '';
            document.getElementById('customerMethod').disabled = ! editing;
            document.getElementById('customerName').value = customer.name === 'Profile incomplete' ? '' : (customer.name ?? '');
            document.getElementById('customerMobile').value = customer.mobile ?? '';
            document.getElementById('customerEmail').value = customer.email === 'Email pending' ? '' : (customer.email ?? '');
            document.getElementById('customerStatusField').value = customer.status ?? 'active';
            document.getElementById('customerCity').value = customer.city ?? '';
            document.getElementById('customerState').value = customer.state ?? '';
            document.getElementById('customerAddress').value = customer.address ?? '';
            document.getElementById('customerPasswordHelp').textContent = editing ? 'Leave blank to keep the current password.' : 'Optional for OTP-first customers.';
            setPhotoPreview(customer.profile_photo ?? '');
        };

        const rowCustomer = button => table.row($(button).closest('tr')).data();

        document.getElementById('addCustomerButton').addEventListener('click', () => {
            setCustomerForm('create');
            customerModal.show();
        });

        $('#customersTable').on('click', '.js-edit-customer', function () {
            setCustomerForm('edit', rowCustomer(this));
            customerModal.show();
        });

        $('#customersTable').on('click', '.js-delete-customer', function () {
            const customer = rowCustomer(this);
            document.getElementById('deleteCustomerForm').action = customerUrl(destroyUrl, customer.id);
            document.getElementById('deleteCustomerName').textContent = customer.name === 'Profile incomplete' ? customer.mobile : customer.name;
            deleteModal.show();
        });

        document.getElementById('customerSearch').addEventListener('input', event => {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(() => table.search(event.target.value).draw(), 350);
        });

        document.getElementById('customerStatus').addEventListener('change', () => table.ajax.reload());
        document.getElementById('customerProfilePhoto').addEventListener('change', event => {
            const file = event.target.files[0];

            if (! file) {
                resetPhotoPreview();
                return;
            }

            setPhotoPreview(URL.createObjectURL(file));
        });

        if (oldMode) {
            setCustomerForm(oldMode, { ...oldValues, id: oldCustomerId });
            customerModal.show();
        }
    });
</script>

@include('admin.partials.footer')