@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('crm.leads') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard.clinic.home') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('crm.title') }}</li>
            </ul>
        </div>
        @if (Route::has('admin.dashboard.crm.leads.create'))
            @can('crm.leads.create')
                <a href="{{ route('admin.dashboard.crm.leads.create') }}" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg"></i>{{ trans('crm.list.add') }}</a>
            @endcan
        @endif
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        @if (session('success'))
            <div class="alert alert-success mb-5">{{ session('success') }}</div>
        @endif

        {{-- Quick views: each card sets the filters below. --}}
        <div class="row g-5 mb-7">
            @foreach ([
                ['due', 'timer', 'danger', $dueCount, trans('crm.list.card_due'), ['tab' => 'open', 'follow_up' => 'due', 'assignee' => '']],
                ['unassigned', 'user-square', 'warning', $unassignedCount, trans('crm.list.card_unassigned'), ['tab' => 'open', 'follow_up' => '', 'assignee' => 'unassigned']],
                ['new', 'notification-status', 'primary', (int) ($counts['new'] ?? 0), trans('crm.list.card_new'), ['tab' => 'new', 'follow_up' => '', 'assignee' => '']],
                ['converted', 'calendar-tick', 'success', (int) ($counts['converted'] ?? 0), trans('crm.list.card_converted'), ['tab' => 'converted', 'follow_up' => '', 'assignee' => '']],
            ] as [$key, $icon, $color, $count, $label, $filters])
                <div class="col-sm-6 col-xl-3">
                    <a href="#" class="card card-flush h-100 hover-elevate-up" data-quick-view='@json($filters)'>
                        <div class="card-body d-flex align-items-center py-6">
                            <span class="symbol symbol-50px me-5"><span class="symbol-label bg-light-{{ $color }}"><i class="ki-duotone ki-{{ $icon }} fs-2x text-{{ $color }}">@for ($p = 1; $p <= 5; $p++)<span class="path{{ $p }}"></span>@endfor</i></span></span>
                            <div>
                                <div class="fs-2hx fw-bold text-gray-900 lh-1">{{ $count }}</div>
                                <div class="text-muted fw-semibold mt-1">{{ $label }}</div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="tableSearch" class="form-control form-control-solid w-250px ps-12" placeholder="{{ trans('crm.list.search') }}">
                    </div>
                </div>
                <div class="card-toolbar gap-3">
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="source" id="sourceFilter">
                        <option value="">{{ trans('crm.list.all_sources') }}</option>
                        @foreach (\App\Models\Crm\Lead::SOURCES as $source)
                            <option value="{{ $source }}" @selected($preset['source'] === $source)>{{ trans('crm.sources.' . $source) }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="assignee" id="assigneeFilter">
                        <option value="">{{ trans('crm.list.all_assignees') }}</option>
                        <option value="mine" @selected($preset['assignee'] === 'mine')>{{ trans('crm.list.mine') }}</option>
                        <option value="unassigned" @selected($preset['assignee'] === 'unassigned')>{{ trans('crm.list.unassigned') }}</option>
                        @foreach ($agents as $agent)
                            <option value="{{ $agent->id }}" @selected($preset['assignee'] === (string) $agent->id)>{{ $agent->name }}</option>
                        @endforeach
                    </select>
                    <select class="form-select form-select-solid form-select-sm w-175px" data-filter="follow_up" id="followUpFilter">
                        <option value="">{{ trans('crm.list.any_follow_up') }}</option>
                        @foreach (['due', 'overdue', 'today', 'week', 'none'] as $option)
                            <option value="{{ $option }}" @selected($preset['follow_up'] === $option)>{{ trans('crm.list.follow_up_' . $option) }}</option>
                        @endforeach
                    </select>
                    <input type="hidden" data-filter="tab" id="tabFilter" value="{{ $preset['tab'] }}">
                </div>
            </div>
            <div class="card-body pt-0">
                <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-6 fw-bold mb-5" id="leadTabs">
                    @foreach (\App\Http\Controllers\Admin\Crm\LeadController::TABS as $tab)
                        <li class="nav-item">
                            <a href="#" class="nav-link text-active-primary py-4 {{ $tab === $preset['tab'] ? 'active' : '' }}" data-tab="{{ $tab }}">
                                {{ in_array($tab, ['open', 'all'], true) ? trans('crm.list.tab_' . $tab) : trans('crm.statuses.' . $tab) }}
                                <span class="badge badge-light ms-2">{{ (int) ($counts[$tab] ?? 0) }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>

                <table class="table align-middle table-row-dashed fs-6 gy-4 w-100" id="leadsTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-175px">{{ trans('crm.lead') }}</th>
                        <th class="min-w-150px">{{ trans('crm.list.source_interest') }}</th>
                        <th>{{ trans('crm.list.status') }}</th>
                        <th>{{ trans('crm.list.assignee') }}</th>
                        <th>{{ trans('crm.list.next_follow_up') }}</th>
                        <th>{{ trans('crm.list.last_update') }}</th>
                        <th class="text-end min-w-150px">{{ trans('clinic.common.actions') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('dashboard.admin.partials.crud-table-js')
    @include('dashboard.admin.partials.server-table', [
        'tableId' => 'leadsTable',
        'url' => route('admin.dashboard.crm.leads.index'),
        'columns' => [
            ['data' => 'lead', 'name' => 'lead', 'orderable' => false],
            ['data' => 'source_interest', 'name' => 'source', 'searchable' => false],
            ['data' => 'status', 'name' => 'crm_leads.status', 'searchable' => false],
            ['data' => 'assignee', 'name' => 'assigned_to', 'searchable' => false],
            ['data' => 'next_follow_up_at', 'name' => 'next_follow_up_at', 'searchable' => false],
            ['data' => 'updated_at', 'name' => 'crm_leads.updated_at', 'searchable' => false],
            ['data' => 'action', 'name' => 'action', 'orderable' => false, 'searchable' => false],
        ],
        'order' => [[5, 'desc']],
    ])
    <script>
        $(function () {
            var setTab = function (tab) {
                $('#tabFilter').val(tab);
                $('#leadTabs [data-tab]').removeClass('active').filter('[data-tab="' + tab + '"]').addClass('active');
            };

            $('#leadTabs').on('click', '[data-tab]', function (event) {
                event.preventDefault();
                setTab(this.dataset.tab);
                window.ServerTables.leadsTable.ajax.reload();
            });

            // Quick-view cards set the tab and filters in one go.
            $('[data-quick-view]').on('click', function (event) {
                event.preventDefault();
                var filters = $(this).data('quickView');
                setTab(filters.tab);
                $('#followUpFilter').val(filters.follow_up);
                $('#assigneeFilter').val(filters.assignee);
                window.ServerTables.leadsTable.ajax.reload();
            });

            $('#leadsTable').on('click', '[data-take-lead]', function () {
                $.ajax({url: this.dataset.takeLead, type: 'PATCH', headers: {Accept: 'application/json'}})
                    .done(function (response) {
                        toastr.success(response.message);
                        window.ServerTables.leadsTable.ajax.reload(null, false);
                    })
                    .fail(function () { toastr.error(@json(trans('dash_site.request_failed'))); });
            });
        });
    </script>
@endsection