@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    @push('styles')
        <style>
            .leads-filters-toolbar {
                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .leads-filters-toolbar .table-controls-form {
                flex: 1 1 100%;
                min-width: 0;
            }

            .leads-filters-toolbar .table-controls-left,
            .leads-filters-toolbar .table-controls-actions {
                gap: 0.35rem;
                min-width: 0;
            }

            .leads-filters-toolbar .table-controls-left {
                flex: 1 1 auto;
            }

            .leads-filters-toolbar .table-controls-actions {
                flex: 0 0 auto;
            }

            .leads-filters-toolbar .table-control-select {
                flex: 0 0 128px;
                min-width: 128px;
                max-width: 128px;
            }

            .leads-filters-toolbar .table-control-search-group {
                flex: 1 1 260px;
                min-width: 220px;
                max-width: 320px;
            }

            .leads-filters-toolbar .table-control-search-group .form-control {
                min-width: 0;
            }

            .leads-filters-toolbar .table-control-search-btn {
                min-width: 40px;
            }

            .leads-filters-toolbar .table-control-search-btn,
            .leads-filters-toolbar .table-control-save-btn,
            .leads-filters-toolbar .table-control-clear-btn {
                white-space: nowrap;
            }

            .leads-filters-toolbar .table-controls-actions {
                align-self: flex-start;
            }

            @media (max-width: 575.98px) {
                .leads-filters-toolbar {
                    gap: 0.4rem;
                }

                .leads-filters-toolbar .table-controls-left,
                .leads-filters-toolbar .table-controls-actions {
                    gap: 0.25rem;
                }

                .leads-filters-toolbar .table-control-select {
                    flex-basis: 100%;
                    min-width: 100%;
                    max-width: 100%;
                }

                .leads-filters-toolbar .table-control-search-group {
                    flex-basis: 100%;
                    min-width: 100%;
                    max-width: 100%;
                }
            }
        </style>
    @endpush

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Leads"
                    description="Manage leads, monitor assignment, filter records, and track workflow progress.">
                    @can('crm_leads-create')
                        <a href="{{ route('leads.create') }}" class="asset-btn asset-btn--primary">
                            + Add New Lead
                        </a>
                    @endcan
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="leads-filters-toolbar">
                            <x-table-controls :action="route('leads.index')" :export="true" :exportRoute="route('LeadController.export')" :saveRoute="route('LeadController.saveFilteredTable')"
                                searchName="name" searchPlaceholder="Search e.g. lead name" :filters="$tableFilters"
                                :filterLabels="$filterLabels" :date="false" formId="leads-table-controls">
                                <div class="input-group input-group-sm w-auto">
                                    <input type="text" class="form-control table-control-auto-submit" name="lead_code"
                                        placeholder="Lead ID" value="{{ request('lead_code') }}" autocomplete="off"
                                        style="min-width: 88px; max-width: 88px;">
                                </div>
                            </x-table-controls>
                        </div>
                    </div>

                    <x-table :headers="[
                        'Lead ID',
                        'First Name',
                        'Last Name',
                        'Email',
                        'Phone',
                        'Assigned To',
                        'Flag',
                        'Workflow',
                        'Actions',
                    ]" :paginator="$leads" emptyMessage="No leads found matching the current filters."
                        emptyActionText="+ Add First Lead" :emptyActionUrl="route('leads.create')">

                        @foreach ($leads as $lead)
                            <tr class="ui-row-click"
                                @if (!empty($canUseLeadActions) || auth()->user()->can('crm_leads-update'))
                                    onclick="window.location='{{ route('leads.edit', $lead->id) }}'"
                                @endif>

                                <td class="text-center">
                                    <span class="ui-muted">{{ $lead->lead_code ?: '—' }}</span>
                                </td>

                                <td class="text-center">
                                    @if (!empty($canUseLeadActions) || auth()->user()->can('crm_leads-update'))
                                    @php
                                        $creatorDept = $lead->creator?->staff?->department?->name ?? '';
                                        $isFromRetention = str_contains(strtolower($creatorDept), 'retention');
                                    @endphp
                                    @can('crm_leads-update')
                                        <a href="{{ route('leads.edit', $lead->id) }}" class="leads-name-link"
                                            onclick="event.stopPropagation()">
                                            <div class="ui-title d-flex align-items-center justify-content-center gap-1 flex-wrap">
                                                {{ $lead->first_name ?: '—' }}
                                                @if ($isFromRetention)
                                                    <span class="ui-pill ui-pill--retention">Retention</span>
                                                @endif
                                            </div>
                                        </a>
                                    @else
                                        <div class="ui-title">{{ $lead->first_name ?: '—' }}</div>
                                    @endif
                                    @endcan
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $lead->last_name ?: '—' }}
                                </td>

                                <td class="text-center">
                                    @if ($lead->email)
                                        <span class="ui-muted leads-email">{{ $lead->email }}</span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <span class="secure-mobile ui-muted leads-phone">
                                        {{ $lead->phone_masked ?: '—' }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @php
                                        $isQueuedOverCapacity =
                                            ! $lead->assigned_to
                                            && $lead->latestAssignment?->staff_id === null
                                            && $lead->latestAssignment?->reason === 'over_capacity';
                                        $assignmentStaff = $lead->assignments->first()?->staff;
                                        $assignmentUser = $assignmentStaff?->user;
                                    @endphp



                                    @if ($assignmentStaff && $assignmentUser)
                                        <a
                                            href="{{ route('leads.agent.index', $assignmentUser) }}"
                                            class="ui-pill ui-pill--soft"
                                            style="text-decoration: none;"
                                            onclick="event.stopPropagation()">
                                            {{ $assignmentStaff->full_name }}
                                        </a>
                                    @elseif ($isQueuedOverCapacity)
                                        <span class="ui-pill ui-pill--warn">
                                            Over Capacity
                                        </span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    @php
                                        $flagVariant =
                                            $lead->flag === 'high'
                                                ? 'danger'
                                                : ($lead->flag === 'medium'
                                                    ? 'warn'
                                                    : 'neutral');
                                    @endphp

                                    <span class="ui-pill ui-pill--{{ $flagVariant }}">
                                        {{ str($lead->flag)->title() }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if ($lead->workflow?->name)
                                        <span class="ui-pill ui-pill--info">
                                            {{ $lead->workflow->name }}
                                        </span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">

                                        @if (!empty($canUseLeadActions) || auth()->user()->can('crm_leads-update'))
                                            <x-table-action type="edit" :url="route('leads.edit', $lead->id)" />
                                        @endif

                                        @php
                                            $hasStudent = !empty($lead->student_id);

                                            $retentionBaseUrl = rtrim(config('app.Retention_URL'), '/') . '/';

                                            $scheduleDemoUrl = $hasStudent
                                                ? $retentionBaseUrl .
                                                    'schedule-demo?' .
                                                    http_build_query([
                                                        'student_id' => $lead->student_id,
                                                        'embedded' => 1,
                                                    ])
                                                : '#';

                                            $scheduleUrl = $hasStudent
                                                ? $retentionBaseUrl .
                                                    'schedule?' .
                                                    http_build_query([
                                                        'student_id' => $lead->student_id,
                                                        'embedded' => 1,
                                                    ])
                                                : '#';
                                        @endphp

                                        <button type="button"
                                            class="btn btn-sm {{ $hasStudent ? 'btn-outline-primary js-open-schedule-demo' : 'btn-outline-secondary' }}"
                                            title="{{ $hasStudent ? 'Schedule Demo' : 'No student linked to this lead' }}"
                                            data-url="{{ $scheduleDemoUrl }}" onclick="event.stopPropagation()"
                                            @disabled(!$hasStudent)>
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                        <button type="button"
                                            class="btn btn-sm {{ $hasStudent ? 'btn-outline-primary js-open-schedule-demo' : 'btn-outline-secondary' }}"
                                            title="{{ $hasStudent ? 'Schedule' : 'No student linked to this lead' }}"
                                            data-url="{{ $scheduleUrl }}" onclick="event.stopPropagation()"
                                            @disabled(!$hasStudent)>
                                            <i class="fa fa-calendar"></i>
                                        </button>

                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignedtoModal" tabindex="-1" aria-labelledby="assignedtoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <form action="{{ route('leads.update.assigned.to') }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <input type="hidden" name="lead_ids" id="selectedLeadIds">

                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title" id="assignedtoModalLabel">Assign Selected Leads</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <label for="assigned_to" class="asset-label">Assigned To</label>
                        <select class="asset-select select2" id="assigned_to" name="assigned_to">
                            <option value="">Select User</option>
                            @foreach ($usersSelect as $id => $fullName)
                                <option value="{{ $id }}" @selected(old('assigned_to') == $id)>
                                    {{ $fullName }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="scheduleDemoModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered schedule-demo-dialog">
            <div class="modal-content schedule-demo-modal">

                <div class="modal-header schedule-demo-header">
                    <div>
                        <h5 class="modal-title mb-0">Schedule</h5>
                        <small class="text-muted">Create demo appointment without leaving leads page</small>
                    </div>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <div class="modal-body p-0 schedule-demo-body">
                    <iframe id="scheduleDemoIframe" src="" style="width: 100%; height: 100%; border: 0;">
                    </iframe>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .select2-container--open {
            z-index: 999999 !important;
        }

        .leads-bulk-panel {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
            flex-wrap: wrap;
        }

        .leads-bulk-panel__title {
            color: #374151;
            font-weight: 700;
            font-size: 0.92rem;
        }

        .leads-bulk-panel__control {
            min-width: 260px;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-select,
        .select2-container .select2-selection--single,
        .select2-container .select2-selection--multiple {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .select2-container .select2-selection--single {
            display: flex !important;
            align-items: center;
        }

        .selection {
            width: 100%;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0 !important;
            padding-right: 1.5rem !important;
            color: #111827 !important;
            line-height: 1.5 !important;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 100% !important;
            right: 10px !important;
        }

        .asset-select:focus,
        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .leads-name-link {
            display: inline-block;
            color: inherit;
            text-decoration: none;
        }

        .leads-name-link:hover .ui-title {
            text-decoration: underline;
        }

        .ui-pill--retention {
            background: #ede9fe;
            color: #6d28d9;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 99px;
            white-space: nowrap;
        }

        .leads-email,
        .leads-phone {
            font-weight: 600;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
            color: #374151;
        }

        .form-check-input {
            cursor: pointer;
        }

        @media (max-width: 991.98px) {
            .leads-bulk-panel__control {
                min-width: 100%;
            }
        }
    </style>
@endpush
@push('styles')
    <style>
        .schedule-demo-dialog {
            max-width: 95%;
        }

        .schedule-demo-modal {
            height: 90vh;
            border: 0;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        }

        .schedule-demo-header {
            background: #fff;
            border-bottom: 1px solid #eef0f3;
            padding: 14px 20px;
        }

        .schedule-demo-body {
            height: calc(90vh - 72px);
            background: #f8f9fb;
        }

        .js-open-schedule-demo {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });

            $('[data-bs-toggle="tooltip"]').tooltip();

            $.fn.modal.Constructor.prototype._enforceFocus = function() {};

            $('#assignedtoModal').on('shown.bs.modal', function() {
                $('#assigned_to').select2({
                    dropdownParent: $('#assignedtoModal'),
                    width: '100%'
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.secure-mobile').forEach(function(el) {
                el.addEventListener('copy', function(e) {
                    e.preventDefault();
                    if (typeof toastr !== 'undefined') {
                        toastr.warning('Copy is disabled.');
                    }
                });

                el.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                });

                el.addEventListener('mousedown', function(e) {
                    e.preventDefault();
                });
            });

            const bulkLeadsAction = document.getElementById('bulk_leads_action');
            const selectedLeadIdsInput = document.getElementById('selectedLeadIds');

            function getCheckedLeads() {
                return Array.from(document.querySelectorAll('.lead-checkbox:checked'));
            }

            function updateSelectedLeadIds() {
                if (!selectedLeadIdsInput) return;
                selectedLeadIdsInput.value = getCheckedLeads().map(cb => cb.value).join(',');
            }

            document.addEventListener('change', function(e) {
                if (e.target.classList.contains('lead-checkbox')) {
                    updateSelectedLeadIds();
                }
            });

            if (bulkLeadsAction) {
                bulkLeadsAction.addEventListener('change', function() {
                    if (this.value !== 'assigned_to') return;

                    const checkedLeads = getCheckedLeads();

                    if (checkedLeads.length === 0) {
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                text: 'Please select at least one lead.',
                                timer: 3000,
                                timerProgressBar: true,
                                showConfirmButton: false
                            });
                        } else {
                            alert('Please select at least one lead.');
                        }

                        this.selectedIndex = 0;
                        return;
                    }

                    updateSelectedLeadIds();

                    const modal = new bootstrap.Modal(document.getElementById('assignedtoModal'));
                    modal.show();
                    this.selectedIndex = 0;
                });
            }

            setTimeout(() => {
                let alert = document.getElementById('successAlert');
                if (alert) {
                    let bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 10000);
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modalElement = document.getElementById('scheduleDemoModal');
            const iframe = document.getElementById('scheduleDemoIframe');

            document.querySelectorAll('.js-open-schedule-demo').forEach(function(button) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    const url = this.getAttribute('data-url');

                    if (!url || url === '#') {
                        return;
                    }

                    iframe.src = url;

                    const modal = new bootstrap.Modal(modalElement);
                    modal.show();
                });
            });

            modalElement.addEventListener('hidden.bs.modal', function() {
                iframe.src = '';
            });
        });
    </script>
@endpush