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

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

    <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="d-flex align-items-center gap-3 flex-wrap">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <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>
                    </div>

                    @can('crm_leads_bulk_assign-update')
                        <div class="leads-bulk-panel">
                            <div class="leads-bulk-panel__title">Bulk Actions</div>
                            <div class="leads-bulk-panel__control">
                                <select id="bulk_leads_action" name="bulk_leads_action" class="asset-select select2">
                                    <option value="" selected>Select Action</option>
                                    <option value="assigned_to" @selected(old('assigned_to') == 'assigned_to')>Assign To</option>
                                </select>
                            </div>
                        </div>
                    @endcan



                    <x-table :headers="[
                        auth()
                            ->user()
                            ->hasAnyRole(['Super admin', 'Agent Manager', 'HR', 'Academic'])
                            ? 'Select'
                            : null,
                        '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"
                                @can('crm_leads-update')
                                    onclick="window.location='{{ route('leads.edit', $lead->id) }}'"
                                @endcan>

                                @hasrole('Super admin|Agent Manager|HR|Academic')
                                    <td class="text-center" onclick="event.stopPropagation()">
                                        <input type="checkbox" class="lead-checkbox form-check-input"
                                            style="border: aqua solid 2px !important" value="{{ $lead->id }}">
                                    </td>
                                @endhasrole

                                <td class="text-center">
                                    @can('crm_leads-update')
                                        <a href="{{ route('leads.edit', $lead->id) }}" class="leads-name-link"
                                            onclick="event.stopPropagation()">
                                            <div class="ui-title">{{ $lead->first_name ?: '—' }}</div>
                                        </a>
                                    @else
                                        <div class="ui-title">{{ $lead->first_name ?: '—' }}</div>
                                    @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 === 'no_eligible_staff';
                                    @endphp

                                    @if ($lead->assignedUser?->full_name)
                                        <a
                                            href="{{ route('leads.agent.index', $lead->assignedUser) }}"
                                            class="ui-pill ui-pill--soft"
                                            style="text-decoration: none;"
                                            onclick="event.stopPropagation()">
                                            {{ $lead->assignedUser->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">

                                        @can('crm_leads-update')
                                            <x-table-action type="edit" :url="route('leads.edit', $lead->id)" />
                                        @endcan

                                        @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;
        }

        .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