@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-lg-row align-items-lg-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">Agents</span>
            </div>
            <h2 class="admin-page-title">Agent Management</h2>
            <p class="admin-page-subtitle">Create and manage agent codes used when agents help providers submit listings.</p>
        </div>
    </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="admin-card mb-4">
        <div class="admin-card-body">
            <h3 class="admin-card-title mb-3">Add Agent</h3>
            <form class="row g-3 align-items-end" method="POST" action="{{ route('admin.agents.store') }}">
                @csrf
                <div class="col-lg-4">
                    <label class="form-label fw-semibold">Name</label>
                    <input class="form-control" name="name" value="{{ old('name') }}" placeholder="Agent name" required>
                </div>
                {{-- <div class="col-lg-2">
                    <label class="form-label fw-semibold">Agent ID Code</label>
                    <input class="form-control" value="Auto generated from AGT-1000" readonly>
                </div> --}}
                <div class="col-lg-3">
                    <label class="form-label fw-semibold">Mobile</label>
                    <input class="form-control" name="mobile" value="{{ old('mobile') }}" placeholder="9876543210">
                </div>
                <div class="col-lg-2">
                    <label class="form-label fw-semibold">Status</label>
                    <select class="form-select" name="status">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="col-lg-3">
                    <button class="btn-primary-action w-100" type="submit"><span class="material-symbols-outlined" style="font-size:18px;">person_add</span> Add Agent</button>
                </div>
            </form>
        </div>
    </section>

    <section class="admin-card">
        <div class="admin-card-body border-bottom">
            <div class="admin-toolbar flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                <div>
                    <h3 class="admin-card-title mb-0">Agents</h3>
                    <p class="admin-meta mt-1 mb-0">Search, filter, and manage agent records.</p>
                </div>
                <div class="admin-toolbar">
                    <input id="agentSearch" class="admin-search" type="search" placeholder="Search agents...">
                    <select id="agentStatus" class="admin-select">
                        <option value="">All statuses</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table id="agentsTable" class="table admin-table align-middle mb-0 w-100">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Code</th>
                        <th>Contact</th>
                        <th>Status</th>
                        <th>Listings</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </section>
</main>

<div class="modal fade" id="editAgentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editAgentForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Agent</h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body d-grid gap-3">
                    <label><span class="form-label fw-semibold">Name</span><input id="editAgentName" class="form-control" name="name" required></label>
                    <label><span class="form-label fw-semibold">Agent ID Code</span><input id="editAgentCode" class="form-control text-uppercase" readonly></label>
                    <label><span class="form-label fw-semibold">Mobile</span><input id="editAgentMobile" class="form-control" name="mobile"></label>
                    <label><span class="form-label fw-semibold">Email</span><input id="editAgentEmail" class="form-control" name="email" type="email"></label>
                    <label><span class="form-label fw-semibold">Status</span><select id="editAgentStatus" class="form-select" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
                    <label><span class="form-label fw-semibold">Notes</span><textarea id="editAgentNotes" class="form-control" name="notes" rows="3"></textarea></label>
                </div>
                <div class="modal-footer">
                    <button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button>
                    <button class="btn-primary-action" type="submit"><span class="material-symbols-outlined" style="font-size:18px;">save</span> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteAgentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="deleteAgentForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h5 class="modal-title">Delete Agent</h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body">Delete <strong id="deleteAgentName"></strong>? Existing listings will keep the saved agent code.</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 updateUrl = @json(route('admin.agents.update', ['agent' => '__AGENT__']));
    const destroyUrl = @json(route('admin.agents.destroy', ['agent' => '__AGENT__']));
    const editModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('editAgentModal'));
    const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteAgentModal'));
    const escapeHtml = value => $('<div>').text(value ?? '').html();
    const url = (template, id) => template.replace('__AGENT__', id);
    let searchTimer;

    const table = $('#agentsTable').DataTable({
        processing: true,
        serverSide: true,
        searchDelay: 400,
        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>',
        ajax: {
            url: @json(route('admin.agents.data')),
            data: data => {
                data.status = document.getElementById('agentStatus').value;
            },
        },
        columns: [
            { data: 'name', render: (value, type, row) => type !== 'display' ? value : `<div><strong>${escapeHtml(value)}</strong>${row.notes ? `<div class="admin-meta">${escapeHtml(String(row.notes).slice(0, 70))}</div>` : ''}</div>` },
            { data: 'code', render: value => `<span class="admin-chip">${escapeHtml(value)}</span>` },
            { data: null, render: (value, type, row) => `<div>${escapeHtml(row.mobile || 'Not provided')}</div>${row.email ? `<div class="admin-meta">${escapeHtml(row.email)}</div>` : ''}` },
            { data: 'status', render: value => `<span class="admin-status ${value === 'active' ? 'success' : 'warning'}">${escapeHtml(value.charAt(0).toUpperCase() + value.slice(1))}</span>` },
            { data: 'listings_count', className: 'text-center' },
            { data: null, orderable: false, searchable: false, className: 'text-end', render: () => `<button class="admin-action js-edit-agent" type="button" title="Edit"><span class="material-symbols-outlined">edit</span></button><button class="admin-action text-danger js-delete-agent" type="button" title="Delete"><span class="material-symbols-outlined">delete</span></button>` },
        ],
    });

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

    $('#agentsTable').on('click', '.js-edit-agent', function () {
        const row = rowData(this);
        document.getElementById('editAgentForm').action = url(updateUrl, row.id);
        document.getElementById('editAgentName').value = row.name || '';
        document.getElementById('editAgentCode').value = row.code || '';
        document.getElementById('editAgentMobile').value = row.mobile || '';
        document.getElementById('editAgentEmail').value = row.email || '';
        document.getElementById('editAgentStatus').value = row.status || 'active';
        document.getElementById('editAgentNotes').value = row.notes || '';
        editModal.show();
    });

    $('#agentsTable').on('click', '.js-delete-agent', function () {
        const row = rowData(this);
        document.getElementById('deleteAgentForm').action = url(destroyUrl, row.id);
        document.getElementById('deleteAgentName').textContent = `${row.name} (${row.code})`;
        deleteModal.show();
    });

    document.getElementById('agentSearch').addEventListener('input', event => {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => table.search(event.target.value).draw(), 350);
    });
    document.getElementById('agentStatus').addEventListener('change', () => table.ajax.reload());
});
</script>

@include('admin.partials.footer')