@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">Providers</span></div>
            <h2 class="admin-page-title">Provider Management</h2>
            <p class="admin-page-subtitle">Manage, verify, and monitor marketplace service providers.</p>
        </div>
        <button class="btn-primary-action" id="addProviderButton" type="button"><span class="material-symbols-outlined" style="font-size:18px;">person_add</span>Add Provider</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 providers</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 providers</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">Provider Directory</h3><p class="admin-meta mt-1">Manage provider profiles and access status</p></div>
            <div class="admin-toolbar"><input class="admin-search" id="providerSearch" type="search" placeholder="Search provider..."><select class="admin-select" id="providerStatus"><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="providersTable">
                <thead><tr><th>Provider</th><th>Business</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.provider.create_edit')

<div class="modal fade" id="deleteProviderModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><form id="deleteProviderForm" method="POST">@csrf @method('DELETE')<div class="modal-header"><h5 class="modal-title">Delete Provider</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div><div class="modal-body">Delete <strong id="deleteProviderName"></strong>? This removes the provider 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.providers.store'));
    const updateUrl = @json(route('admin.providers.update', ['provider' => '__PROVIDER__']));
    const destroyUrl = @json(route('admin.providers.destroy', ['provider' => '__PROVIDER__']));
    const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('providerModal'));
    const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteProviderModal'));
    const form = document.getElementById('providerForm');
    const escapeHtml = value => $('<div>').text(value ?? '').html();
    const url = (template, id) => template.replace('__PROVIDER__', id);
    const location = row => [row.city, row.state].filter(Boolean).join(', ') || 'Not provided';
    const photoPreview = document.getElementById('providerPhotoPreview');
    const resetPhotoPreview = () => { photoPreview.innerHTML = '<span class="material-symbols-outlined">storefront</span>'; };
    const setPhotoPreview = url => { photoPreview.innerHTML = url ? `<img src="${escapeHtml(url)}" alt="">` : '<span class="material-symbols-outlined">storefront</span>'; };
    let searchTimer;

    const table = $('#providersTable').DataTable({
        processing: true, serverSide: true, searchDelay: 400, order: [[5, '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>',
        ajax: { url: @json(route('admin.providers.data')), data: data => { data.status = document.getElementById('providerStatus').value; } },
        columns: [
            { data: 'name', render: (value, type, row) => type !== 'display' ? value : `<div class="d-flex align-items-center gap-3">${row.profile_photo ? `<img class="admin-avatar" src="${escapeHtml(row.profile_photo)}" alt="">` : `<div class="admin-initials">${escapeHtml((value === 'Profile incomplete' ? 'PR' : value.substring(0, 2)).toUpperCase())}</div>`}<div><p class="admin-name">${escapeHtml(value)}</p><p class="admin-meta">${escapeHtml(row.reference)} &middot; ${escapeHtml(row.email)}</p></div></div>` },
            { data: 'business_name' }, { data: 'mobile' },
            { data: null, render: (value, type, row) => escapeHtml(location(row)) },
            { data: 'status', render: value => `<span class="admin-status ${value === 'active' ? 'success' : (value === 'blocked' ? 'danger' : 'warning')}">${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, row) => `<button class="admin-action js-edit-provider" type="button"><span class="material-symbols-outlined">edit</span></button><button class="admin-action js-delete-provider" type="button"><span class="material-symbols-outlined">delete</span></button>` },
        ],
    });

    const setForm = (mode, row = {}) => {
        const editing = mode === 'edit'; form.reset(); form.action = editing ? url(updateUrl, row.id) : storeUrl;
        document.getElementById('providerMethod').disabled = !editing; document.getElementById('providerModalTitle').textContent = editing ? 'Edit Provider' : 'Add Provider'; document.getElementById('providerSubmitButton').textContent = editing ? 'Update Provider' : 'Create Provider';
        document.getElementById('providerFormMode').value = mode; document.getElementById('providerId').value = row.id ?? '';
        ['Name','Mobile','Email','BusinessName','ContactNumber','WhatsappNumber','City','State','Address','GstNumber','Website','Bio'].forEach(key => { const field = document.getElementById(`provider${key}`); const prop = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`).replace(/^_/, ''); let value = row[prop] ?? ''; if (value === 'Profile incomplete' || value === 'Email pending' || value === 'Business pending') value = ''; field.value = value; });
        document.getElementById('providerStatusField').value = row.status ?? 'active';
        setPhotoPreview(row.profile_photo ?? '');
    };
    const rowData = button => table.row($(button).closest('tr')).data();
    document.getElementById('addProviderButton').addEventListener('click', () => { setForm('create'); modal.show(); });
    $('#providersTable').on('click', '.js-edit-provider', function () { setForm('edit', rowData(this)); modal.show(); });
    $('#providersTable').on('click', '.js-delete-provider', function () { const row = rowData(this); document.getElementById('deleteProviderForm').action = url(destroyUrl, row.id); document.getElementById('deleteProviderName').textContent = row.name === 'Profile incomplete' ? row.mobile : row.name; deleteModal.show(); });
    document.getElementById('providerSearch').addEventListener('input', event => { clearTimeout(searchTimer); searchTimer = setTimeout(() => table.search(event.target.value).draw(), 350); });
    document.getElementById('providerStatus').addEventListener('change', () => table.ajax.reload());
    document.getElementById('providerProfilePhoto').addEventListener('change', event => {
        const file = event.target.files[0];

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

        setPhotoPreview(URL.createObjectURL(file));
    });
    if (@json(old('_form_mode'))) { setForm(@json(old('_form_mode')), { ...@json(old()), id: @json(old('_provider_id')) }); modal.show(); }
});
</script>
@include('admin.partials.footer')