@php
    use App\Enums\Leads\FlagType;
    use App\Enums\Leads\SourceType;
@endphp
<x-Dashboard.Layout.Layout title="Leads">
    <!-- في head -->

    <style>
        .select2-container--open {
            z-index: 999999 !important;
        }
    </style>

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="card shadow-sm border-0 rounded-3 p-3">


                    <div class="card-header py-4 px-4 d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 fw-semibold">Leads</h5>
                        @can('crm_leads-create')
                            <a href="{{ route('leads.create') }}"
                                class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                                <i class="bi bi-plus-circle"></i> Add New Lead
                            </a>
                        @endcan
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <form method="GET" action="">
                                <div class="row g-3 align-items-end">

                                    <div class="col-md-2">
                                        <label for="name" class="form-label">Name</label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            placeholder="Name" value="{{ request('name') }}">
                                    </div>

                                    <div class="col-md-2">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="text" name="email" id="email" class="form-control"
                                            placeholder="Email" value="{{ request('email') }}">
                                    </div>

                                    <div class="col-md-2">
                                        <label for="flag" class="form-label">Flag</label>
                                        <select name="flag" id="flag" class="form-select select2">
                                            <option value="">Select flag</option>
                                            @foreach (FlagType::cases() as $flag)
                                                <option value="{{ $flag->value }}" @selected(request('flag') === $flag->value)>
                                                    {{ str($flag->value)->replace('_', ' ')->lower()->ucfirst() }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @if (Auth::user()->role?->name != 'Agent')

                                        <div class="col-md-2">
                                            <label for="assigned_to" class="form-label">Assigned to</label>
                                            <select name="assigned_to" id="" class="form-select select2">
                                                <option value="">Select user</option>
                                                @foreach ($usersSelect as $id => $fullName)
                                                    <option value="{{ $id }}" @selected(request('assigned_to') == $id)>
                                                        {{ $fullName }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif

                                    <div class="col-md-2">
                                        <label for="program_id" class="form-label">Program</label>
                                        <select name="program_id" id="program_id" class="form-select select2">
                                            <option value="">Select Program</option>
                                            @foreach ($programs as $program)
                                                <option value="{{ $program->id }}" @selected(request('program_id') == $program->id)>
                                                    {{ $program->name_en }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="source" class="form-label">Source</label>
                                        <select name="source" id="source" class="form-select select2">
                                            <option value=""> Select Source</option>
                                            @foreach (SourceType::cases() as $source)
                                                <option value="{{ $source->value }}" @selected(request('source') == $source->value)>
                                                    {{ str($source->value)->replace('_', ' ')->lower()->ucfirst() }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="plan_type_id" class="form-label">Lead Type</label>
                                        <select class="form-select select2" id="plan_type_id" name="plan_type_id">
                                            <option value="">Select plan type</option>
                                            @foreach ($getPricingPlanType as $plan_type)
                                                <option value="{{ $plan_type->id }}" @selected(request('plan_type_id') == $plan_type->id)>
                                                    {{ $plan_type->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="track_type_id" class="form-label">Track type</label>
                                        <select class="form-select select2" id="track_type_id" name="track_type_id">
                                            <option value="">Select type</option>
                                            @foreach ($trackTypesSelect as $id => $name)
                                                <option value="{{ $id }}" @selected(request('track_type_id') == $id)>
                                                    {{ $name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="workflow_id" class="form-label">Workflow</label>
                                        <select class="form-select select2" id="workflow_id" name="workflow_id">
                                            <option value="">Select Workflow</option>
                                            @foreach ($workFlowSelect as $id => $name)
                                                <option value="{{ $id }}" @selected(request('workflow_id') == $id)>
                                                    {{ $name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="assign_type" class="form-label">Assignation Type</label>
                                        <select class="form-select select2" id="assign_type" name="assign_type">
                                            <option value="">Select Assignation Type</option>
                                            <option value="assigned" @selected(request('assign_type') == 'assigned')>
                                                Assigned Leads
                                            </option>
                                            <option value="not_assigned" @selected(request('assign_type') == 'not_assigned')>
                                                Unassigned Leads
                                            </option>
                                        </select>
                                    </div>


                                    <div class="col-md-2 d-grid">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-filter me-1"></i> Filter
                                        </button>
                                    </div>

                                    <div class="col-md-2 d-grid">
                                        <a href="{{ url()->current() }}" class="btn btn-primary">
                                            <i class="bi bi-x-lg me-1"></i> Clear
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card-header py-4 px-4 d-flex justify-content-start align-items-end">

                        <div class="col-md-1">
                            <span class="text-secondary fw-medium p-2">Show</span>
                            <form action="{{ route('leads.index') }}" method="GET">
                                @foreach (request()->query() as $name => $value)
                                    @if ($name !== 'per_page')
                                        <input type="hidden" name="{{ $name }}"
                                            value="{{ $value }}">
                                    @endif
                                @endforeach
                                <select name="per_page" class="form-select form-select-sm w-auto"
                                    onchange="this.form.submit()">
                                    @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                        <option value="{{ $count }}"
                                            {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                            {{ $count }}
                                        </option>
                                    @endforeach
                                </select>
                            </form>
                        </div>

                        @can('crm_leads_bulk_assign-update')
                            <div class="col-md-6">

                                <x-forms.select.basic id="bulk_leads_action" name="bulk_leads_action">
                                    <option selected>Select Action</option>
                                    <option value="assigned_to" @selected(old('assigned_to') == 'assigned_to')>Assigned to</option>
                                </x-forms.select.basic>

                            </div>
                        @endcan

                    </div>

                    <div class="card-body p-4">
                        <div class="table-responsive">
                            @if ($leads->count() > 0)
                                <table class="table bordered-table mb-0 table-hover">
                                    <thead>
                                        <tr>
                                            <th scope="col">
                                                <input type="checkbox" id="select-all-leads"
                                                    class="form-check-input">
                                            </th>
                                            <th scope="col">First name</th>
                                            <th scope="col">Last name</th>
                                            <th scope="col">Email</th>
                                            <th scope="col">Phone</th>
                                            <th scope="col" class="text-center">Assigned To</th>
                                            <th scope="col" class="text-center">Flag</th>
                                            <th scope="col" class="text-center">Workflow</th>
                                            <th scope="col" class="text-center">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($leads as $lead)
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="lead-checkbox form-check-input"
                                                        value="{{ $lead->id }}">
                                                </td>


                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        @can('crm_leads-update')
                                                            <a href="{{ route('leads.edit', $lead->id) }}"
                                                                class="text-lg text-secondary-light fw-semibold flex-grow-1">{{ $lead->first_name }}
                                                            </a>
                                                        @else
                                                            <p
                                                                class="text-lg text-secondary-light fw-semibold flex-grow-1">
                                                                {{ $lead->first_name }}
                                                            </p>
                                                        @endcan

                                                    </div>
                                                </td>
                                                <td>{{ $lead->last_name }}</td>
                                                <td>{{ $lead->email }}</td>
                                                <td>{{ $lead->phone }}</td>

                                                <td class="text-center">{{ $lead->assignedUser?->full_name }}</td>
                                                <td class="text-center">
                                                    <span
                                                        class="px-24 py-4 rounded-pill fw-medium text-sm
                                                        {{ $lead->flag === 'high'
                                                            ? 'bg-danger-focus text-danger-main'
                                                            : ($lead->flag === 'medium'
                                                                ? 'bg-warning-focus text-warning-main'
                                                                : 'bg-secondary-focus text-secondary-main') }}">
                                                        {{ str($lead->flag)->title() }}
                                                    </span>
                                                </td>
                                                <td>{{ $lead->workflow?->name }}</td>

                                                <td class="text-center">
                                                    <div class="d-flex justify-content-center gap-2">
                                                        @can('crm_leads-update')
                                                            <a href="{{ route('leads.edit', $lead->id) }}"
                                                                class="btn btn-outline-primary btn-sm radius-8"
                                                                title="Edit Lead">
                                                                <iconify-icon icon="lucide:edit"
                                                                    class="text-lg"></iconify-icon>
                                                            </a>
                                                        @endcan
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <div class="alert text-center rounded-3 shadow-sm mt-8" role="alert">
                                    <i class="bi bi-info-circle me-2"></i> No leads exist
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="py-8 px-4">
            {{ $leads->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>
    </div>

    <div class="modal fade" id="assignedtoModal" tabindex="-1" aria-labelledby="assignedtoModal"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('leads.update.assigned.to') }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="lead_ids[]" id="selectedLeadIds">
                    <div class="modal-header">
                        <h5 class="modal-title">Assigned Leads to</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div>
                            {{-- <x-forms.labels.basic>Assigned to</x-forms.labels.basic>
                            <x-forms.select.basic name="assigned_to" class="select2 form-select">
                                <option value="">Select user</option>
                                @foreach ($usersSelect as $id => $fullName)
                                    <option value="{{ $id }}" @selected(old('assigned_to') == $id)>
                                        {{ $fullName }}
                                    </option>
                                @endforeach
                            </x-forms.select.basic> --}}

                            <select class="form-select select2" id="assigned_to" name="assigned_to">
                                <option value="">Select type</option>
                                @foreach ($usersSelect as $id => $fullName)
                                    <option value="{{ $id }}" @selected(old('assigned_to') == $id)>
                                        {{ $fullName }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <x-forms.buttons.primary type="submit">
                            Save
                        </x-forms.buttons.primary>

                        <x-forms.buttons.secondary type="button" data-bs-dismiss="modal">
                            Close
                        </x-forms.buttons.secondary>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- في نهاية الصفحة -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const scheduleButtons = document.querySelectorAll('.scheduleCallBtn');

            scheduleButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const leadId = this.getAttribute('data-lead-id');
                    const leadName = this.getAttribute('data-lead-name');

                    document.getElementById('title').value = `Call the lead ${leadName}`;
                    document.getElementById('related_to_id').value = leadId;
                });
            });

            const scheduleForm = document.getElementById('scheduleModalForm');
            scheduleForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(scheduleForm);

                fetch("{{ route('api.v1.tasks.store') }}", {
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            // Optional: show a success toast or alert
                            console.log(data.message);
                        }
                        // Close modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById(
                            'scheduleModal'));
                        modal.hide();

                        // Reset form
                        scheduleForm.reset();
                    })
                    .catch(error => {
                        console.error("Error:", error);
                    });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const bulkLeadsAction = document.getElementById('bulk_leads_action');
            bulkLeadsAction.addEventListener('change', function() {
                if (this.value === 'assigned_to') {
                    const checkedLeads = document.querySelectorAll('.lead-checkbox:checked');
                    if (checkedLeads.length === 0) {
                        // No checkboxes are checked, do not show modal and reset select
                        Swal.fire({
                            icon: 'error',
                            text: 'Please select at least one lead.',
                            timer: 3000,
                            timerProgressBar: true,
                            showConfirmButton: false
                        });
                        this.selectedIndex = 0;
                        return;
                    }

                    const modal = new bootstrap.Modal(document.getElementById('assignedtoModal'));
                    modal.show();
                    // Reset select to default after showing modal (optional)
                    this.selectedIndex = 0;
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectAll = document.getElementById('select-all-leads');
            const table = document.querySelector('.table-responsive');

            function updateSelectedLeadIds() {
                const ids = Array.from(document.querySelectorAll('.lead-checkbox:checked')).map(cb => cb.value);
                document.getElementById('selectedLeadIds').value = ids.join(',');
            }

            // Event delegation for checkboxes
            table.addEventListener('change', function(e) {
                if (e.target.classList.contains('lead-checkbox')) {
                    updateSelectedLeadIds();
                    // تحديث حالة select-all إذا لزم
                    const all = document.querySelectorAll('.lead-checkbox');
                    const checked = document.querySelectorAll('.lead-checkbox:checked');
                    selectAll.checked = all.length === checked.length && all.length > 0;
                }
                if (e.target === selectAll) {
                    document.querySelectorAll('.lead-checkbox').forEach(cb => cb.checked = selectAll
                        .checked);
                    updateSelectedLeadIds();
                }
            });

            // عند فتح المودال، حدث الـ input
            const bulkLeadsAction = document.getElementById('bulk_leads_action');
            bulkLeadsAction.addEventListener('change', function() {
                if (this.value === 'assigned_to') {
                    const checkedLeads = document.querySelectorAll('.lead-checkbox:checked');
                    if (checkedLeads.length === 0) {
                        // No checkboxes are checked, do not show modal and reset select
                        Swal.fire({
                            icon: 'error',
                            text: 'Please select at least one lead.',
                            timer: 3000,
                            timerProgressBar: true,
                            showConfirmButton: false
                        });
                        this.selectedIndex = 0;
                        return;
                    }

                    updateSelectedLeadIds();
                    const modal = new bootstrap.Modal(document.getElementById('assignedtoModal'));
                    modal.show();
                    this.selectedIndex = 0;
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $.fn.modal.Constructor.prototype._enforceFocus = function() {};

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


</x-Dashboard.Layout.Layout>