@extends('layouts.app')
@section('title', 'Leads')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <style>
        #leads-table_wrapper .dataTables_length,
        #leads-table_wrapper .dataTables_filter {
            display: none;
        }

        #leads-table_wrapper .dataTables_info {
            font-size: 12px;
            font-weight: 500;
            color: #718096;
        }

        #leads-table_wrapper .pagination {
            gap: 6px;
        }

        #leads-table_wrapper .page-link {
            border-radius: 8px;
        }

        #leads-table_wrapper .page-item.active .page-link {
            background-color: var(--bs-primary);
            color: #fff;
            border-color: var(--bs-primary);
        }

        #leads-table td,
        #leads-table th {
            vertical-align: middle;
            white-space: nowrap;
        }

        #leads-table td:nth-child(2) {
            white-space: normal;
            min-width: 220px;
        }
    </style>
@endpush

@section('content')
    @php
        $routePrefix = strtolower(auth()->user()->role->name);
        $canCreateLeads = auth()->user()->hasPermissionName('leads.create');
    @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0">Lead Management</h3>
            <span class="text-secondary fs-13">Track leads using the CRM theme table layout.</span>
        </div>

        @if($canCreateLeads)
            <a href="{{ route($routePrefix . '.leads.create') }}" class="btn btn-outline-primary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3 hover-bg">
                <span class="py-sm-1 d-block">
                    <i class="ri-add-line d-none d-sm-inline-block"></i>
                    <span>Add New Lead</span>
                </span>
            </a>
        @endif
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="row g-3 align-items-center">
                <div class="col-lg-4 col-md-6">
                    <label class="form-label">Search</label>
                    <input type="text" id="global-search" class="form-control" placeholder="Search name, phone, email, company">
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label">Status</label>
                    <select id="status-filter" class="form-control form-select">
                        <option value="">All Statuses</option>
                        @foreach(\App\Models\Lead::STATUSES as $status)
                            <option value="{{ $status }}">{{ $status }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label">Source</label>
                    <select id="source-filter" class="form-control form-select">
                        <option value="">All Sources</option>
                        @foreach($sources as $source)
                            <option value="{{ $source->id }}">{{ $source->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-6">
                    <label class="form-label" style="visibility: hidden">reset</label>
                    <button type="button" id="reset-filters" class="btn btn-outline-secondary w-100">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 p-4">
                <div>
                    <h5 class="mb-1">All Leads</h5>
                </div>
            </div>

            <div class="default-table-area style-two default-table-width">
                <div class="table-responsive">
                    <table id="leads-table" class="table align-middle">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Lead</th>
                                <th scope="col">Phone</th>
                                <th scope="col">Source</th>
                                <th scope="col">Assigned To</th>
                                <th scope="col">Status</th>
                                <th scope="col">Score</th>
                                <th scope="col">Created</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(function () {
            const table = $('#leads-table').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                lengthChange: true,
                pageLength: 10,
                order: [[7, 'desc']],
                ajax: {
                    url: @json(route($routePrefix . '.leads.data')),
                    data: function (d) {
                        d.global_search = $('#global-search').val();
                        d.status = $('#status-filter').val();
                        d.source_id = $('#source-filter').val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'phone', name: 'phone'},
                    {data: 'source_name', name: 'source_name', orderable: true, searchable: false},
                    {data: 'assigned_to_name', name: 'assigned_to_name', orderable: true, searchable: false},
                    {data: 'status_badge', name: 'status'},
                    {data: 'score_display', name: 'lead_score', searchable: false},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                language: {
                    paginate: {
                        previous: '<i class="ri-arrow-left-s-line"></i>',
                        next: '<i class="ri-arrow-right-s-line"></i>'
                    },
                    info: 'Showing _START_ to _END_ of _TOTAL_ results',
                    infoEmpty: 'Showing 0 to 0 of 0 results',
                    emptyTable: 'No leads found.'
                },
                drawCallback: function () {
                    feather.replace();
                }
            });

            let searchTimer;

            $('#global-search').on('input', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function () {
                    table.ajax.reload();
                }, 300);
            });

            $('#status-filter, #source-filter').on('change', function () {
                table.ajax.reload();
            });

            $('#reset-filters').on('click', function () {
                $('#global-search').val('');
                $('#status-filter').val('');
                $('#source-filter').val('');
                table.ajax.reload();
            });
        });
    </script>
@endpush