@php
    use App\Enums\Leads\FlagType;
    use App\Enums\Leads\SourceType;
    use App\Enums\Leads\TypeOfContact;
@endphp
<x-Dashboard.Layout.Layout title="Lead - {{ $lead->first_name }}">
    @push('style')
        <link rel="stylesheet" href="{{ asset('assets/css/dashboard/lead/log.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/css/dashboard/lead/lead.css') }}">
    @endpush
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />


    <style>
        #copyConfirmation {
            display: none;
            color: green;
            font-size: 0.9rem;
        }

        .modal.show {
            display: block;
        }

        .update-comment-success-alert-container {
            position: fixed;
            top: 80px;
            right: 20px;
            display: none;
            z-index: 999;
        }

        .update-comment-danger-alert-container {
            position: fixed;
            top: 80px;
            right: 20px;
            display: none;
            z-index: 999;
        }


        .iti input {
            padding-left: 80px !important;
        }
    </style>
    <div class="update-comment-success-alert-container">
        <div class="update-comment-success-alert-content">
            <div class="alert alert-success">
                Comment Updated Successfully!
            </div>
        </div>
    </div>
    <div class="update-comment-danger-alert-container">

    </div>
    <!-- Modal -->
    <div class="modal fade @if (Session::has('paymentUrl')) show @endif" id="copyLinkModal" tabindex="-1"
        aria-labelledby="copyLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="copyLinkModalLabel">Share This Link</h5>
                    <button type="button" class="btn-close close-copy-paypal-link" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Card inside the modal -->
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">Copy the Link Below</h6>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control copy-input" id="linkInput"
                                    value="{{ Session::get('paymentUrl') }}" readonly>
                                <button class="btn btn-outline-primary" type="button" id="copyButton">Copy</button>
                            </div>
                            <p id="copyConfirmation">Link copied to clipboard!</p>
                            <div class="mt-3 gap-2">
                                <div>
                                    <h6>Send via</h6>
                                </div>
                                <div class="d-flex justify-content-evenly align-items-center gap-2">
                                    <form action="{{ route('leads.send.payment.url.to.whatsapp') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="payment_url" id="payment_url"
                                            value="{{ Session::get('paymentUrl') }}">
                                        <input type="hidden" name="phone" id="phone" value="{{ $lead->phone }}">
                                        <button type="submit" class="share-payment-link-to-whatsapp">
                                            <iconify-icon icon="bi:whatsapp"></iconify-icon>
                                        </button>
                                    </form>
                                    @if ($lead->facebook_psid)
                                        <form action="{{ url('/api/lead/' . $lead->id . '/chat/send') }}"
                                            method="POST">
                                            @csrf
                                            <input type="text" name="message" id="payment_url"
                                                value="{{ Session::get('paymentUrl') }}" hidden>
                                            <button type="submit" class="share-payment-link-to-messagner">
                                                <iconify-icon icon="bi:messenger"></iconify-icon>
                                            </button>
                                        </form>
                                    @endif
                                    <form action="{{ url('/api/lead/' . $lead->id . '/chat/send') }}" method="POST">
                                        @csrf
                                        <input type="text" name="message" id="payment_url"
                                            value="{{ Session::get('paymentUrl') }}" hidden>
                                        <button type="submit" class="share-payment-link-to-instagram">
                                            <iconify-icon icon="bi:instagram"></iconify-icon>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom JS -->


    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-12">

                <div class="tabs">
                    <div class="tab active">Overview</div>
                    <div class="tab">
                        <a href="{{ route('leads.logs', $lead->id) }}">
                            Timeline
                        </a>
                    </div>
                </div>

                <div class="card mb-5">
                    <div class="d-flex gap-20 gap-20 justify-content-end">
                        @if ($lead->instagram_psid)
                            <x-forms.buttons.primary id="instagramConverstion" class="m-1" onclick="toggleIgChat()">
                                Instagram
                            </x-forms.buttons.primary>
                        @endif
                        @if ($lead->facebook_psid)
                            <x-forms.buttons.primary id="converstion" class="m-1" onclick="toggleChat()">
                                Messanger
                            </x-forms.buttons.primary>
                        @endif
                        <a href="https://api.whatsapp.com/send?phone={{ $lead->phone }}" target="_blank">
                            <x-forms.buttons.primary id="WhatsApp" class="m-1">
                                WhatsApp
                            </x-forms.buttons.primary>
                        </a>
                        <a href="tel:{{ $lead->phone }}">
                            <x-forms.buttons.primary id="phone" class="m-1">
                                Phone
                            </x-forms.buttons.primary>
                        </a>
                        {{-- <x-forms.buttons.primary id="scheduleCallBtn" class="m-1">
                            Schedule a call
                        </x-forms.buttons.primary> --}}

                    </div>

                    <div class="d-flex flex-column gap-20">
                        <div class="text-lg mb-0 d-flex gap-20 align-items-center">
                            <span class="fs-4">
                                Current workflow
                                {{-- Current state --}}
                            </span>
                            <span class="current-lead-status bg-secondary p-2 radius-24 text-white p-8"
                                style="font-size: 12px; font-weight: bolder">
                                {{ str($lead->workflow?->name)->replace('_', ' ')->ucfirst() }}
                            </span>
                        </div>
                        <div>
                            <span class="fs-4 status-reason"></span>
                        </div>
                        @can('crm_leads-update-workflow')

                            <div class="transitions d-flex gap-44 mt-6 flex-wrap">
                                <span class="fs-4">Transitions</span>
                                {{-- <div class="d-flex gap-6 statuses-container">
                                </div> --}}
                                <div class="d-flex flex-row flex-wrap align-items-start" style="gap:8px;">
                                    @foreach ($workflows->whereNull('action_type') as $workflow)
                                        <form action="{{ route('leads.update.workflow', $lead->id) }}" method="POST"
                                            style="margin:0;">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name="workflow_id" value="{{ $workflow->id }}">
                                            <button type="submit" class="btn btn-primary"
                                                style="min-width:120px; border-radius:5;">
                                                {{ str($workflow->name)->replace('_', ' ')->lower()->ucfirst() }}
                                            </button>
                                        </form>
                                    @endforeach

                                    @foreach ($workflows->whereNotNull('action_type') as $workflow)
                                        <button type="button"
                                            @if ($workflow->action_type == 'not_interested_reasons') id="selectReasonBtn" @endif
                                            @if ($workflow->action_type == 'reschedule_call') id="addCallBtn" @endif
                                            class="btn btn-primary" style="min-width:120px; border-radius:5;">
                                            {{ str($workflow->name)->replace('_', ' ')->lower()->ucfirst() }}
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @endcan

                    </div>

                </div>

                @if ($lead->facebook_psid)
                    <x-dashboard.lead.messagner lead="{{ $lead }}" pageId="{{ $pageId }}">

                    </x-dashboard.lead.messagner>
                @endif
                <x-dashboard.lead.instagram lead="{{ $lead }}" pageId="{{ $pageId }}">

                </x-dashboard.lead.instagram>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif



                <div>
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-12">
                            @can('crm_leads_personal_info-view')
                                <form method="POST" action="{{ route('leads.update', $lead->id) }}">
                                    @csrf
                                    @method('PUT')
                                    {{-- Personal Information --}}
                                    <div class="card border-0 mb-24">
                                        <div class="card-header">
                                            <h6 class="text-lg font-weight-semibold mb-0">Personal Information</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="first_name" required
                                                        value="{{ $lead->first_name }}">
                                                        First name<span style="color:red">*</span>
                                                    </x-forms.input-label.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="last_name" required
                                                        value="{{ $lead->last_name }}">
                                                        Last name<span style="color:red">*</span>
                                                    </x-forms.input-label.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="email" required
                                                        value="{{ $lead->email }}">
                                                        Email<span style="color:red">*</span>
                                                    </x-forms.input-label.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    {{-- <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="phone" required
                                                        value="{{ $lead->phone }}">
                                                        Phone<span style="color:red">*</span>
                                                    </x-forms.input-label.basic> --}}
                                                    <x-forms.input-label.basic name="phone" id="mobile"
                                                        value="{{ $lead->phone }}" required>Phone<span
                                                            style="color:red">*</span></x-forms.input-label.basic>
                                                    <span id="phone-error" style="color:red; display:none;"></span>
                                                    <input type="hidden" disabled id="country_code"
                                                        value="{{ $lead->country_code }}" name="country_code">


                                                </div>
                                                <div class="col-md-12">
                                                    <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="address" required
                                                        value="{{ $lead->address }}">
                                                        Address<span style="color:red">*</span>
                                                    </x-forms.input-label.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Nationality </x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="nationality_id">
                                                        <option selected disabled>
                                                            Select Nationality
                                                        </option>
                                                        @foreach ($nationalities as $nationality)
                                                            <option value="{{ $nationality->id }}"
                                                                @if ($lead->nationality_id == $nationality->id) selected @endif>
                                                                {{ $nationality->name }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Gender<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="gender">
                                                        <option value="">Select Gender</option>
                                                        <option value="male" @selected(old('gender', $lead->gender) == 'male')>
                                                            Male
                                                        </option>
                                                        <option value="female" @selected(old('gender', $lead->gender) == 'female')>
                                                            Female
                                                        </option>
                                                    </x-forms.select.basic>
                                                </div>


                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Country<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="country_id">
                                                        <option value="">Select country</option>
                                                        @foreach ($countriesSelect as $id => $name)
                                                            <option value="{{ $id }}"
                                                                @selected(old('country_id', $lead->country_id) == $id)>
                                                                {{ $name }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>

                                                <input type="hidden" id="country_code" name="country_code">


                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Source<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2" name="source"
                                                        required>
                                                        {{-- <option value="">Select source</option> --}}
                                                        @foreach (SourceType::cases() as $source)
                                                            <option value="{{ $source->value }}"
                                                                @selected(old('source', $lead->source) == $source->value)>
                                                                {{ str($source->value)->replace('_', ' ')->lower()->ucfirst() }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>

                                                <div class="col-md-6" id="source_id"
                                                    style="@if ($lead->source_id) display:block; @else display:none @endif">
                                                    <x-forms.labels.basic>Referral ID<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="true" class="select2"
                                                        name="source_id">
                                                        <option value="" disabled
                                                            @if (!$lead->source_id) selected @endif>Select
                                                            Referral ID</option>
                                                        @foreach ($students as $student)
                                                            <option value="{{ $student->id }}"
                                                                @selected(old('source_id', $lead->source_id) == $student->id)>
                                                                {{ $student->full_name }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Type of contact<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="type_of_contact">
                                                        <option value="">Select type</option>
                                                        @foreach (TypeOfContact::cases() as $type)
                                                            <option value="{{ $type->value }}"
                                                                @selected(old('type_of_contact', $lead->type_of_contact) == $type->value)>
                                                                {{ $type->value }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Track type<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="track_type_id">
                                                        <option value="">Select type</option>
                                                        @foreach ($trackTypesSelect as $id => $name)
                                                            <option value="{{ $id }}"
                                                                @selected(old('track_type_id', $lead->track_type_id) == $id)>
                                                                {{ $name }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>

                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Program<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="program_id">
                                                        <option value="">Select Program</option>
                                                        @foreach ($programs as $program)
                                                            <option value="{{ $program->id }}"
                                                                @selected(old('program_id', $lead->program_id) == $program->id)>
                                                                {{ $program->name_en }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Type of Lead<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="true" class="select2">
                                                        <option selected
                                                            value="{{ $getPricingPlanType?->where('id', $lead->plan_type_id)?->first()?->name }}">
                                                            {{ $getPricingPlanType?->where('id', $lead->plan_type_id)?->first()?->name }}
                                                        </option>
                                                        {{-- @foreach ($programs as $program)
                                                            <option value="{{ $program->id }}"
                                                                @selected(old('program_id', $lead->program_id) == $program->id)>
                                                                {{ $program->name_en }}
                                                            </option>
                                                        @endforeach --}}
                                                    </x-forms.select.basic>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label">Moderation Note</label>
                                                    <textarea {{ !Gate::allows('crm_leads_personal_info-update') ? 'readonly' : '' }} class="form-control" rows="4"
                                                        name="moderation_mode">{{ $lead->moderation_mode }}</textarea>
                                                </div>

                                            </div>
                                        </div>

                                    </div>

                                    {{-- Professional Details --}}
                                    <div class="card border-0 mb-24">
                                        <div class="card-header">
                                            <h6 class="text-lg font-weight-semibold mb-0">Professional Details</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    {{-- <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="industry" required
                                                        value="{{ $lead->industry }}">
                                                        Industry
                                                    </x-forms.input-label.basic> --}}
                                                    <x-forms.labels.basic>Industry</x-forms.labels.basic>
                                                    <x-forms.select.basic name="industry" id="industry" class="select2"
                                                        required>
                                                        <option value="">Select Industry</option>
                                                        @foreach (App\Enums\IndustryEnum::cases() as $industry)
                                                            <option value="{{ $industry->value }}"
                                                                @selected(old('industry', $lead->industry) === $industry->value)>
                                                                {{ $industry->value }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="position"
                                                        value="{{ $lead->position }}">
                                                        Position
                                                    </x-forms.input-label.basic>
                                                </div>
                                                <div class="col-md-6">
                                                    <x-forms.input-label.basic :readonly="!Gate::allows('crm_leads_personal_info-update')" name="ad_code" required
                                                        value="{{ $lead->ad_code }}">
                                                        Ad code<span style="color:red">*</span>
                                                    </x-forms.input-label.basic>
                                                </div>

                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Assigned to</x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="assigned_to">
                                                        <option value=" ">Select user
                                                        </option>
                                                        @foreach ($usersSelect as $id => $fullName)
                                                            <option value="{{ $id }}"
                                                                @selected(old('assigned_to', $lead->assigned_to) == $id)>
                                                                {{ $fullName }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                {{-- <div class="col-md-6">
                                                <x-forms.labels.basic>Account to</x-forms.labels.basic>
                                                <x-forms.select.basic name="account_id">
                                                    <option value="">Select user</option>
                                                    @foreach ($getAllAccounts as $account)
                                                        <option value="{{ $account->id }}"
                                                            @if (old('account_id', $lead->account_id) == $account->id) selected @endif>
                                                            {{ $account->name }}
                                                        </option>
                                                    @endforeach
                                                </x-forms.select.basic>
                                            </div> --}}
                                                {{-- <div class="col-md-6">
                                                <x-forms.labels.basic>Student to</x-forms.labels.basic>
                                                <x-forms.select.basic name="student_id">
                                                    <option value="">Select student</option>
                                                    @foreach ($getAllStudents as $student)
                                                        <option value="{{ $student->id }}"
                                                            @if (old('student_id', $lead->student_id) == $student->id) selected @endif>
                                                            {{ $student->name }}
                                                        </option>
                                                    @endforeach
                                                </x-forms.select.basic>
                                            </div> --}}
                                            </div>
                                            <div class="row">

                                                {{-- <div class="col-md-6">
                                                <x-forms.labels.basic>Lead plan type</x-forms.labels.basic>
                                                <x-forms.select.basic name="plan_type_id">
                                                    <option value="">Select plan type</option>
                                                    @foreach ($getPricingPlanType as $plan_type)
                                                        <option value="{{ $plan_type->id }}"
                                                            @if (old('plan_type_id', $lead->plan_type_id) == $plan_type->id) selected @endif>
                                                            {{ $plan_type->name }}
                                                        </option>
                                                    @endforeach
                                                </x-forms.select.basic>
                                            </div> --}}

                                            </div>
                                        </div>
                                    </div>



                                    {{-- Lead Management --}}
                                    <div class="card border-0 mb-24">
                                        <div class="card-header">
                                            <h6 class="text-lg font-weight-semibold mb-0">Lead Management</h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-3">
                                                {{-- <div class="col-md-6">
                                                <x-forms.labels.basic>Creator</x-forms.labels.basic>
                                                <x-forms.select.basic name="creator_id">
                                                    <option value="">Select user</option>
                                                    @foreach ($usersSelect as $id => $fullName)
                                                        <option value="{{ $id }}"
                                                            @selected(old('creator_id', $lead->creator_id) == $id)>
                                                            {{ $fullName }}
                                                        </option>
                                                    @endforeach
                                                </x-forms.select.basic>
                                            </div> --}}


                                                {{-- <div class="col-md-6">
                                            <x-forms.labels.basic>Program type</x-forms.labels.basic>
                                            <x-forms.select.basic name="program_type_id">
                                                <option value="">Select type</option>
                                                @foreach ($programTypesSelect as $id => $name)
                                                    <option
                                                        value="{{ $id }}"
                                                        @selected(old('program_type_id', $lead->program_type_id) == $id)
                                                    >
                                                        {{ $name }}
                                                    </option>
                                                @endforeach
                                            </x-forms.select.basic>
                                        </div> --}}

                                                {{-- <div class="col-md-6">
                                                <x-forms.input-label.basic name="last_follow_up" type="datetime-local"
                                                    value="{{ old('last_follow_up', $lead->last_follow_up) }}">
                                                    Last follow up
                                                </x-forms.input-label.basic>
                                            </div>
                                            <div class="col-md-6">
                                                <x-forms.input-label.basic name="next_follow_up"
                                                    value="{{ old('next_follow_up', $lead->next_follow_up) }}"
                                                    type="datetime-local">
                                                    Next follow up
                                                </x-forms.input-label.basic>
                                            </div> --}}
                                                <div class="col-md-6">
                                                    <x-forms.labels.basic>Flag<span
                                                            style="color:red">*</span></x-forms.labels.basic>
                                                    <x-forms.select.basic :disabled="!Gate::allows('crm_leads_personal_info-update')" class="select2"
                                                        name="flag">
                                                        <option value="">Select flag</option>
                                                        @foreach (FlagType::cases() as $flag)
                                                            <option value="{{ $flag->value }}"
                                                                @selected(old('flag', $lead->flag) === $flag->value)>
                                                                {{ str($flag->value)->replace('_', ' ')->lower()->ucfirst() }}
                                                            </option>
                                                        @endforeach
                                                    </x-forms.select.basic>
                                                </div>
                                                {{-- <div class="col-md-6">
                                                <x-forms.labels.basic>WorkFlow</x-forms.labels.basic>
                                                <x-forms.select.basic name="workflow_id" id="workflow_id">
                                                    <option value="">Select WorkFlow</option>
                                                    @foreach ($workflows as $workflow)
                                                        <option value="{{ $workflow->id }}"
                                                            @selected(old('workflow_id', $lead->workflow_id) === $workflow->id)>
                                                            {{ str($workflow?->name)->replace('_', ' ')->lower()->ucfirst() }}
                                                        </option>
                                                    @endforeach
                                                </x-forms.select.basic>
                                            </div> --}}
                                                <div class="col-12">
                                                    <x-forms.labels.basic>Notes</x-forms.labels.basic>
                                                    <x-forms.textarea.basic :readonly="!Gate::allows('crm_leads_personal_info-update')"
                                                        name="notes">{{ old('notes', $lead->notes) }}</x-forms.textarea.basic>
                                                </div>




                                                <div class="col-12 pt-4 text-end">
                                                    <x-forms.buttons.primary class="float-end">Submit
                                                    </x-forms.buttons.primary>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            @endcan


                            <div class="card border-0 mb-24">
                                <div class="col-12">
                                    <x-forms.labels.basic>Comments</x-forms.labels.basic>

                                    <div id="comments-wrapper">
                                        @php
                                            $oldComments = old(
                                                'comments',
                                                is_array($lead->comments) ? $lead->comments : [$lead->comments],
                                            );
                                        @endphp

                                        @foreach ($oldComments as $index => $comment)
                                            <div class="comment-item mb-3 d-flex gap-2 align-items-start">
                                                <textarea name="comments[]" class="form-control" rows="4">{{ $comment }}</textarea>
                                                <button type="button"
                                                    class="btn btn-outline-danger btn-sm radius-8 remove-comment"
                                                    title="Delete Comment">
                                                    <iconify-icon icon="fluent:delete-24-regular"
                                                        class="text-lg"></iconify-icon>
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>

                                    <p class="add-more-comment-btn" id="add-comment">
                                        <i class="bi bi-plus-circle me-1"></i> Add more comments
                                    </p>


                                    @error('comments.*')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12 pt-4 text-end">
                                    <x-forms.buttons.primary type="button" class="float-end update-lead-comment">
                                        update
                                    </x-forms.buttons.primary>
                                </div>
                            </div>



                            {{-- parent --}}
                            @if ($lead->parent_id && !$lead->student_id)
                                <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">

                                                <!-- Card Header -->
                                                <div
                                                    class="card-header py-4 px-4 d-flex justify-content-between align-items-center">
                                                    <h5 class="card-title mb-0 fw-semibold">
                                                        @if ($lead->pricingplantype->name == 'Family')
                                                            Family
                                                        @endif
                                                        @if ($lead->pricingplantype->name == 'B2B')
                                                            Company
                                                        @endif

                                                    </h5>
                                                    {{-- <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="@if ($lead->parent_id == null) #parentModalNotHaveParent @else #parentModal @endif">
                                                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                            Add New Student
                                                        </button> --}}
                                                    {{-- <a href="{{ env('ADD_NEW_STUDENT_URL') }}" target="_blank">
                                                        <button type="button"
                                                            class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                                                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                            Add New Student
                                                        </button>
                                                    </a> --}}

                                                    @php
                                                        $addStudentUrl =
                                                            env('ADD_NEW_STUDENT_URL') .
                                                            '?parent_id=' .
                                                            $lead->parent_id .
                                                            '&plan_type_id=' .
                                                            $lead->plan_type_id;
                                                    @endphp

                                                    <a href="{{ $addStudentUrl }}" target="_blank">
                                                        <button type="button"
                                                            class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                                                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                            Add New Student
                                                        </button>
                                                    </a>

                                                </div>

                                                <div class="card-body p-4">
                                                    <div class="table-responsive">
                                                        <table class="table table-striped align-middle">
                                                            <thead class="table-light">
                                                                <tr>
                                                                    <th scope="col">First Name</th>
                                                                    <th scope="col">last Name</th>
                                                                    <th scope="col">Email</th>
                                                                    <th scope="col">Mobile</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @forelse ($lead->parent->student as $student)
                                                                    <tr>
                                                                        <td>{{ $student->first_name }}</td>
                                                                        <td>{{ $student->last_name }}</td>
                                                                        <td>{{ $student->email }}</td>
                                                                        <td>{{ $student->mobile }}</td>
                                                                    </tr>
                                                                @empty
                                                                    <tr>
                                                                        <td class="text-align-center" colspan="4">
                                                                            No student exist
                                                                        </td>
                                                                    </tr>
                                                                @endforelse

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                            @endif
                            @if ($getCurrentLeadUserReferraledsUsers->count())
                                <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">

                                                <!-- Tabs inside card-body -->
                                                <div class="card-body p-4">
                                                    <!-- Tab Navigation -->
                                                    <ul class="nav nav-tabs mb-3" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link active" data-bs-toggle="tab"
                                                                type="button" role="tab" aria-controls="invoice"
                                                                aria-selected="true">
                                                                Referral Activity
                                                            </button>
                                                        </li>
                                                    </ul>

                                                    <!-- Tab Content -->
                                                    <div class="tab-content">
                                                        <!-- Invoice Tab -->
                                                        <div class="" role="tabpanel"
                                                            aria-labelledby="invoice-tab">
                                                            <div class="table-responsive">

                                                                <table
                                                                    class="table table-bordered table-striped align-middle">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                            <th scope="col">Full Name</th>
                                                                            <th scope="col">Phone Number</th>
                                                                            <th scope="col">Email</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($getCurrentLeadUserReferraledsUsers as $getCurrentLeadUserReferraledsUser)
                                                                            <tr>
                                                                                <td>
                                                                                    {{ $getCurrentLeadUserReferraledsUser->lead->first_name }}
                                                                                </td>

                                                                                <td>
                                                                                    {{ $getCurrentLeadUserReferraledsUser->lead->phone }}
                                                                                </td>
                                                                                <td>
                                                                                    {{ $getCurrentLeadUserReferraledsUser->referred->email }}
                                                                                </td>


                                                                            </tr>
                                                                        @endforeach

                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>

                                                        <!-- More Tab -->
                                                        {{-- <div class="tab-pane fade" id="more" role="tabpanel" aria-labelledby="more-tab">
                                                                        <div class="table-responsive">
                                                                            @if (!$lead->students->bookingRequests()->count())
                                                                                <p>No other records found for this lead.</p>
                                                                            @else
                                                                                <table class="table table-bordered table-striped align-middle">
                                                                                    <thead class="table-light">
                                                                                        <tr>
                                                                                            <th scope="col">Date</th>
                                                                                            <th scope="col">Type</th>
                                                                                            <th scope="col">Notes</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody>
                                                                                        @foreach ($lead->students->bookingRequests as $booking)
                                                                                            <tr>
                                                                                                <td>{{ \Carbon\Carbon::parse($booking->date)->format('d M Y H:i') }}</td>
                                                                                                <td>{{ ucfirst($booking->type) }}</td>
                                                                                                <td>{{ $booking->notes ?: ' ' }}</td>
                                                                                            </tr>
                                                                                        @endforeach
                                                                                    </tbody>
                                                                                </table>
                                                                            @endif
                                                                        </div>
                                                                    </div> --}}
                                                    </div>
                                                </div> <!-- End card-body -->

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif



                            @if (!is_null($lead->student_id) || !is_null($lead->parent_id))
                                @can('crm_lead_invoice-view')
                                    <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">

                                                    <!-- Header with one title and one button -->
                                                    <div
                                                        class="card-header py-4 px-4 d-flex justify-content-between align-items-center">
                                                        <h5 class="card-title mb-0 fw-semibold">Invoice</h5>
                                                        @can('crm_lead_invoice-create')
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="@if (!is_null($lead->student_id) || !is_null($lead->parent_id)) #invoiceModal @else #invoiceModalHasNotStudent @endif">
                                                                <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                                Add New Invoice
                                                            </button>
                                                        @endcan
                                                    </div>

                                                    <!-- Tabs inside card-body -->
                                                    <div class="card-body p-4">
                                                        <!-- Tab Navigation -->
                                                        <ul class="nav nav-tabs mb-3" id="studentTabs" role="tablist">
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link active" id="invoice-tab"
                                                                    data-bs-toggle="tab" data-bs-target="#invoiceModal"
                                                                    type="button" role="tab" aria-controls="invoice"
                                                                    aria-selected="true">
                                                                    Invoice
                                                                </button>
                                                            </li>
                                                            {{-- <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="more-tab" data-bs-toggle="tab" data-bs-target="#more" type="button" role="tab" aria-controls="more" aria-selected="false">
                                                                other
                                                            </button>
                                                        </li> --}}
                                                        </ul>

                                                        <!-- Tab Content -->
                                                        <div class="tab-content" id="studentTabsContent">
                                                            <!-- Invoice Tab -->
                                                            <div class="tab-pane fade show active" id="invoice"
                                                                role="tabpanel" aria-labelledby="invoice-tab">
                                                                <div class="table-responsive">
                                                                    @if (!$lead->students?->finanaceStudentInvoices->count())
                                                                        <p>No invoice found for this lead.</p>
                                                                    @else
                                                                        <table
                                                                            class="table table-bordered table-striped align-middle">
                                                                            <thead class="table-light">
                                                                                <tr>
                                                                                    <th scope="col">Invoice Number
                                                                                    </th>
                                                                                    <th scope="col">Invoice Type
                                                                                    </th>
                                                                                    <th scope="col">Invoice product
                                                                                    </th>

                                                                                    <th scope="col">Invoice Payment Type
                                                                                    </th>

                                                                                    <th scope="col">Invoice status
                                                                                    </th>



                                                                                    <th scope="col">Invoice payment
                                                                                    </th>

                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($lead->students?->finanaceStudentInvoices as $invoice)
                                                                                    <tr>
                                                                                        <td>{{ $invoice->invoice_number }}
                                                                                        </td>
                                                                                        <td>{{ $invoice->type }}</td>

                                                                                        <td>
                                                                                            @if ($invoice->type == 'product')
                                                                                                {{ $invoice->productInvoice?->name_en }}
                                                                                            @else
                                                                                                {{ $invoice->trackInvoice?->name_en ?? 'Track' }}
                                                                                            @endif
                                                                                        </td>

                                                                                        <td>{{ $invoice->payment_type ?? 'online' }}
                                                                                        </td>

                                                                                        @if ($invoice->payment_type == 'instapay')
                                                                                            <td>
                                                                                                {{ $invoice->payment_status == 'not_paid' ? 'pending' : $invoice->payment_status }}
                                                                                            </td>
                                                                                            <td
                                                                                                style="padding: 8px; text-align: center;">
                                                                                                @if (!empty($invoice->invoice_img))
                                                                                                    <img src="{{ asset('storage/' . $invoice->invoice_img) }}"
                                                                                                        alt="Invoice Image"
                                                                                                        onclick="toggleImageModal(this.src)"
                                                                                                        style="cursor: pointer; max-width: 100px; max-height: 100px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);">
                                                                                                @else
                                                                                                    <form
                                                                                                        action="{{ route('invoices.updateImage', $invoice->id) }}"
                                                                                                        method="POST"
                                                                                                        enctype="multipart/form-data"
                                                                                                        style="display: inline-block; text-align: left;">
                                                                                                        @csrf
                                                                                                        @method('PUT')


                                                                                                        <input
                                                                                                            class="form-control"
                                                                                                            type="file"
                                                                                                            name="invoice_img"
                                                                                                            accept="image/*"
                                                                                                            required
                                                                                                            onchange="this.form.submit()">

                                                                                                    </form>
                                                                                                @endif
                                                                                            </td>
                                                                                        @else
                                                                                            <td>{{ $invoice->payment_status }}
                                                                                            </td>

                                                                                            <td class="text-center">
                                                                                                @if ($invoice->transaction?->status == 'pending' || $invoice->transaction?->status == 'created')
                                                                                                    @if ($invoice->transaction?->is_expired)
                                                                                                        <form
                                                                                                            method="post"
                                                                                                            action="{{ route('refreshInvoicePaymentUrl', ['invoice' => $invoice->id]) }}">
                                                                                                            @csrf
                                                                                                            <input
                                                                                                                type="hidden"
                                                                                                                name="levels_count"
                                                                                                                value="{{ $invoice->amount }}">
                                                                                                            <input
                                                                                                                type="hidden"
                                                                                                                name="user_id"
                                                                                                                value="{{ $lead->user_id }}">
                                                                                                            <input
                                                                                                                type="hidden"
                                                                                                                name="invoice_id"
                                                                                                                value="{{ $invoice->id }}">

                                                                                                            <button
                                                                                                                class="btn btn-success"
                                                                                                                type="submit">
                                                                                                                generate new
                                                                                                                link
                                                                                                            </button>

                                                                                                        </form>
                                                                                                    @elseif(!$invoice->transaction?->is_expired)
                                                                                                        <a onclick="showPaymentLink('{{ $invoice->transaction?->payment_url }}')"
                                                                                                            class="btn btn-primary">
                                                                                                            payment link
                                                                                                        </a>
                                                                                                    @endif
                                                                                                @endif
                                                                                                @if ($invoice->payment_status == 'deposite' || $invoice->payment_status == 'paid_deposite') 
                                                                                                    <form method="post"
                                                                                                        action="{{ route('completePayment', ['invoice' => $invoice->id]) }}">
                                                                                                        @csrf
                                                                                                        <input
                                                                                                            type="hidden"
                                                                                                            name="lead_id"
                                                                                                            value="{{ $lead->id }}">
                                                                                                        <button
                                                                                                            class="btn btn-success"
                                                                                                            type="submit">
                                                                                                            Complete Payment
                                                                                                        </button>

                                                                                                    </form>
                                                                                                @endif

                                                                                            </td>
                                                                                        @endif
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    @endif
                                                                </div>
                                                            </div>

                                                            <!-- Modal viewer -->
                                                            <div id="imageModal"
                                                                style="display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:9999;">
                                                                <img id="modalImage" src=""
                                                                    style="max-width:90%; max-height:90%; border-radius: 10px;">
                                                            </div>

                                                            <!-- More Tab -->
                                                            {{-- <div class="tab-pane fade" id="more" role="tabpanel" aria-labelledby="more-tab">
                                                            <div class="table-responsive">
                                                                @if (!$lead->students->bookingRequests()->count())
                                                                    <p>No other records found for this lead.</p>
                                                                @else
                                                                    <table class="table table-bordered table-striped align-middle">
                                                                        <thead class="table-light">
                                                                            <tr>
                                                                                <th scope="col">Date</th>
                                                                                <th scope="col">Type</th>
                                                                                <th scope="col">Notes</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach ($lead->students->bookingRequests as $booking)
                                                                                <tr>
                                                                                    <td>{{ \Carbon\Carbon::parse($booking->date)->format('d M Y H:i') }}</td>
                                                <td>{{ ucfirst($booking->type) }}</td>
                                                <td>{{ $booking->notes ?: ' ' }}</td>
                                                </tr>
                                                @endforeach
                                                </tbody>
                                                </table>
                                                @endif
                                            </div>
                                        </div> --}}
                                                        </div>
                                                    </div> <!-- End card-body -->

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endcan




                                @can('crm_lead_test-view')

                                    <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">Test</h5>
                                                        @can('crm_lead_test-create')
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="@if ($lead->student_id == null) #testModalNoHasAccount @else #testModal @endif">
                                                                <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                                Add New Test
                                                            </button>
                                                        @endcan
                                                    </div>

                                                    <div class="card-body p-4">
                                                        <!-- Tabs -->
                                                        <ul class="nav nav-tabs mb-3" id="testTabs" role="tablist">
                                                            {{-- <li class="nav-item" role="presentation">
                                                                <button class="nav-link active" id="test-tab"
                                                                    data-bs-toggle="tab" data-bs-target="#test"
                                                                    type="button" role="tab" aria-controls="test"
                                                                    aria-selected="true">
                                                                    Request
                                                                </button>
                                                            </li> --}}
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link" id="demo-tab"
                                                                    data-bs-toggle="tab" data-bs-target="#demo"
                                                                    type="button" role="tab" aria-controls="demo"
                                                                    aria-selected="false">
                                                                    Tests
                                                                </button>
                                                            </li>
                                                        </ul>

                                                        <!-- Tab panes -->
                                                        <div class="tab-content" id="testTabsContent">
                                                            <!-- Tests Tab -->
                                                            <div class="tab-pane fade show active" id="test"
                                                                role="tabpanel" aria-labelledby="test-tab">
                                                                <div class="table-responsive">
                                                                    @if (!$lead->students?->bookingRequests()->where('type', 'test')->count())
                                                                        <p>No tests found for this lead.</p>
                                                                    @else
                                                                        <table
                                                                            class="table table-bordered table-striped align-middle">
                                                                            <thead class="table-light">
                                                                                <tr>
                                                                                    <th scope="col">Date</th>
                                                                                    <th scope="col">Notes</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($lead->students?->bookingRequests()->where('type', 'test')->get() as $booking)
                                                                                    <tr>
                                                                                        <td>{{ \Carbon\Carbon::parse($booking->date)->format('d M Y H:i') }}
                                                                                        </td>
                                                                                        <td>{{ $booking->notes ?: ' ' }}
                                                                                        </td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    @endif
                                                                </div>
                                                            </div>

                                                            <!-- Demos Tab -->
                                                            <div class="tab-pane fade" id="demo" role="tabpanel"
                                                                aria-labelledby="demo-tab">
                                                                <div class="table-responsive">
                                                                    @if (!$getTestStudentCourseData->count())
                                                                        <p>No tests found for this lead.</p>
                                                                    @else
                                                                        <table
                                                                            class="table table-bordered table-striped align-middle">
                                                                            <thead class="table-light">
                                                                                <tr>
                                                                                    <th scope="col">Course Name</th>
                                                                                    <th scope="col">Start Date</th>
                                                                                    <th scope="col">End Date</th>
                                                                                    <th scope="col">status</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($getTestStudentCourseData as $testCourse)
                                                                                    <tr>
                                                                                        <td>{{ $testCourse->course_name_en }}
                                                                                        </td>
                                                                                        <td>{{ $testCourse->start_date }}
                                                                                        </td>
                                                                                        <td>{{ $testCourse->end_date }}
                                                                                        </td>
                                                                                        <td>{{ $testCourse->status }}
                                                                                        </td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div> <!-- End card-body -->

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endcan
                            @endif

                        </div>
                    </div>

                    @if (!is_null($lead->student_id) || !is_null($lead->parent_id))

                        @can('crm_lead_demo-view')
                            <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">

                                            <!-- Card Header -->
                                            <div
                                                class="card-header py-4 px-4 d-flex justify-content-between align-items-center">
                                                <h5 class="card-title mb-0 fw-semibold">Demo</h5>
                                                {{-- <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                data-bs-toggle="modal"
                                                data-bs-target="@if ($lead->student_id == null) #demoModalNoHasAccount @else #demoModal @endif">
                                                <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                Add New Demo
                                            </button> --}}
                                                @can('crm_lead_demo-create')
                                                    @if ($lead->student_id == null)
                                                        <button type="button"
                                                            class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                            data-bs-toggle="modal" data-bs-target="#demoModalNoHasAccount">
                                                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                                            Add New Demo
                                                        </button>
                                                    @else
                                                        <a
                                                            href="{{ env('ADD_NEW_DEMO_URL') }}?student_id={{ $lead->student_id }}&lead_id={{ $lead->id }}">
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                                                                Add New Demo
                                                            </button>
                                                        </a>
                                                    @endif
                                                @endcan

                                            </div>

                                            <!-- Card Body -->
                                            <div class="card-body p-4">

                                                <!-- Tabs Navigation -->
                                                <ul class="nav nav-tabs mb-3" id="demoTabs" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="demo-tab"
                                                            data-bs-toggle="tab" data-bs-target="#demo-tab-pane"
                                                            type="button" role="tab" aria-controls="demo-tab-pane"
                                                            aria-selected="true">
                                                            Demo
                                                        </button>
                                                    </li>
                                                    {{-- <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="request-tab" data-bs-toggle="tab"
                                                        data-bs-target="#request-tab-pane" type="button"
                                                        role="tab" aria-controls="request-tab-pane"
                                                        aria-selected="false">
                                                        Request
                                                    </button>
                                                </li> --}}
                                                </ul>

                                                <!-- Tabs Content -->
                                                <div class="tab-content" id="demoTabsContent">
                                                    <!-- Demo Tab -->
                                                    <div class="tab-pane fade show active" id="demo-tab-pane"
                                                        role="tabpanel" aria-labelledby="demo-tab">
                                                        <div class="table-responsive">
                                                            @if (!$getDemoStudentCourseData->count())
                                                                <p>No request found for this lead.</p>
                                                            @else
                                                                <table
                                                                    class="table table-bordered table-striped align-middle">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                            <th scope="col">Course Name</th>
                                                                            <th scope="col">Start Time</th>
                                                                            <th scope="col">End Time</th>
                                                                            <th scope="col">Invoice status</th>
                                                                            <th scope="col">Invoice</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($getDemoStudentCourseData as $demoCourse)
                                                                            <tr>
                                                                                <td>{{ $demoCourse->course_name_en }}</td>
                                                                                <td>{{ $demoCourse->slots()?->first()?->slot_start }}
                                                                                </td>
                                                                                <td>{{ $demoCourse->slots()?->first()?->slot_end }}
                                                                                </td>
                                                                                <td>{{ $demoCourse->invoice?->payment_status }}
                                                                                </td>

                                                                                <td class="w-25">

                                                                                    @if ($demoCourse->invoice)
                                                                                        {{ $demoCourse->invoice?->invoice_number }}
                                                                                    @else
                                                                                        <div class="d-flex">
                                                                                            <button type="button"
                                                                                                class="btn btn-primary mx-3 btn-sm d-flex align-items-center gap-2 generate-invoice-btn"
                                                                                                data-bs-toggle="modal"
                                                                                                data-type="{{ $demoCourse->schedule_type }}"
                                                                                                data-course-id="{{ $demoCourse->id }}"
                                                                                                data-product-id="{{ $demoCourse->track_id }}"
                                                                                                data-category-id="{{ $demoCourse->category_id }}"
                                                                                                data-bs-target="@if (!is_null($lead->student_id) || !is_null($lead->parent_id)) #invoiceModal @else #invoiceModalHasNotStudent @endif">

                                                                                                Generate
                                                                                            </button>

                                                                                            <button type="button"
                                                                                                class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                                                                data-bs-toggle="modal"
                                                                                                data-type="{{ $demoCourse->schedule_type }}"
                                                                                                data-course-id="{{ $demoCourse->id }}"
                                                                                                data-bs-target="#selectinvoiceModal">
                                                                                                Select Invoice
                                                                                            </button>
                                                                                        </div>
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            @endif

                                                            {{-- @if (!$lead->students?->bookingRequests()->where('type', 'demo')->count())
                                                            <p>No demo found for this lead.</p>
                                                        @else
                                                            <table
                                                                class="table table-bordered table-striped align-middle">
                                                                <thead class="table-light">
                                                                    <tr>
                                                                        <th scope="col">Date</th>
                                                                        <th scope="col">Type</th>
                                                                        <th scope="col">Notes</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($lead->students?->bookingRequests()->where('type', 'demo')->get() as $booking)
                                                                        <tr>
                                                                            <td>{{ \Carbon\Carbon::parse($booking->date)->format('d M Y H:i') }}
                                    </td>
                                    <td>{{ ucfirst($booking->type) }}</td>
                                    <td>{{ $booking->notes ?: ' ' }}</td>
                                    </tr>
                                    @endforeach
                                    </tbody>
                                    </table>
                                    @endif --}}
                                                        </div>
                                                    </div>

                                                    <!-- Other Tab -->
                                                    <div class="tab-pane fade" id="request-tab-pane" role="tabpanel"
                                                        aria-labelledby="request-tab">
                                                        <div class="table-responsive">
                                                            @if (!$getDemoStudentCourseData->count())
                                                                <p>No request found for this lead.</p>
                                                            @else
                                                                <table
                                                                    class="table table-bordered table-striped align-middle">
                                                                    <thead class="table-light">
                                                                        <tr>
                                                                            <th scope="col">Course Name</th>
                                                                            <th scope="col">Start Date</th>
                                                                            <th scope="col">End Date</th>
                                                                            <th scope="col">status</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($getDemoStudentCourseData as $demoCourse)
                                                                            <tr>
                                                                                <td>{{ $demoCourse->course_name_en }}</td>
                                                                                <td>{{ $demoCourse->start_date }}</td>
                                                                                <td>{{ $demoCourse->end_date }}</td>
                                                                                <td>{{ $demoCourse->session }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                            </div> <!-- End card-body -->

                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endcan
                    @endif

                    {{-- <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">Deal</h5>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                    {{-- <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">Reschedule</h5>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                </div>

            </div>
        </div>
    </div>





    <!-- Schedule a call Modal -->
    {{-- @can('crm_lead_schedule-view') --}}
    <div class="modal fade" id="scheduleModal" tabindex="-1" aria-labelledby="scheduleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST" action="{{ route('leads.store.schedule.call', $lead->id) }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="scheduleModalLabel">Schedule a Call</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div>
                            <x-forms.input-label.basic name="due_date" required value="{{ old('due_date') }}"
                                type="time">
                                Schedule a call with this lead tomorrow at:
                            </x-forms.input-label.basic>
                        </div>

                        {{-- <input type="hidden" name="title" id="title"
                            value="Call the lead {{ $lead->name }}" class="form-control">
                        <input type="hidden" name="status" value="pending">
                        <input type="hidden" name="assigned_to" value="1">
                        <input type="hidden" name="related_to_type" value="App\Models\Lead">
                        <input type="hidden" name="related_to_id" value="{{ $lead->id }}"> --}}
                    </div>

                    <div class="modal-footer">
                        <x-forms.buttons.primary id="scheduleModalSubmit">
                            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>
    {{-- @endcan --}}

    <!-- status reason Modal -->
    <div class="modal fade" id="dropdownModal" tabindex="-1" aria-labelledby="dropdownModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="dropdownModalForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="dropdownModalLabel">Not interested reason</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div>
                            <x-forms.select.basic name="status_reason" required>
                                <option value="test1">test1</option>
                                <option value="test2">test2</option>
                                <option value="test3">test3</option>
                            </x-forms.select.basic>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <x-forms.buttons.primary id="dropdownModalSubmit">
                            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>

    {{-- <x-dashboard.leadaction.table/> --}}

    {{-- <x-dashboard.products.table :products="$products" /> --}}

    @if (!is_null($lead->student_id) || !is_null($lead->parent_id))
        @can('crm_lead_schedule-view')
            <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">

                            <!-- Card Header -->
                            <div class="card-header py-4 px-4 d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0 fw-semibold">Schedule</h5>
                                {{-- <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                            data-bs-toggle="modal"
                            data-bs-target="@if ($lead->student_id == null) #productModalNoHasStudent @else #producteModal @endif">
                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                            Add New Product
                        </button> --}}
                                @can('crm_lead_schedule-create')
                                    <a href="{{ env('ADD_NEW_PRODUCT_URL') }}?student_id={{ $lead->student_id }}">
                                        <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                                            Add New Schedule
                                        </button>
                                    </a>
                                @endcan

                            </div>

                            <!-- Card Body -->
                            <div class="card-body p-4">

                                <!-- Tabs Navigation -->
                                <ul class="nav nav-tabs mb-3" id="productTabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="product-tab" data-bs-toggle="tab"
                                            data-bs-target="#product-pane" type="button" role="tab"
                                            aria-controls="product-pane" aria-selected="true">
                                            Schedule
                                        </button>
                                    </li>
                                    {{-- <li class="nav-item" role="presentation">
                                <button class="nav-link" id="archived-tab" data-bs-toggle="tab" data-bs-target="#archived-pane" type="button" role="tab" aria-controls="archived-pane" aria-selected="false">
                                    other
                                </button>
                            </li> --}}
                                </ul>

                                <!-- Tabs Content -->
                                <div class="tab-content" id="productTabsContent">

                                    <!-- Products Tab -->
                                    <div class="tab-pane fade show active" id="product-pane" role="tabpanel"
                                        aria-labelledby="product-tab">
                                        <div class="table-responsive">
                                            @if ($products->count() > 0)
                                                <table class="table table-bordered mb-0 table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" class="text-center">Course Name</th>
                                                            <th scope="col" class="text-center">Start Date</th>
                                                            <th scope="col" class="text-center">End Date</th>
                                                            <th scope="col" class="text-center">Session</th>
                                                            <th scope="col" class="text-center">Invoice</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($products as $product)
                                                            <tr>
                                                                <td class="text-center">{{ $product->course_name_en }}</td>
                                                                <td class="text-center">{{ $product->start_date }}</td>
                                                                <td class="text-center">{{ $product->end_date }}</td>
                                                                <td class="text-center">{{ $product->session }}</td>
                                                                <td>
                                                                    {{-- <form
                                                                        action="{{ route('leads.add.request.invoice') }}"
                                                                        method="POST">
                                                                        @csrf
                                                                        <input type="hidden" id="scheduleId"
                                                                            name="staff_scheduleds_id"
                                                                            value="{{ $product->id }}">
                                                                        <input type="hidden" id="levelId"
                                                                            name="levels_id"
                                                                            value="{{ $product->track_level_id }}">
                                                                        <input type="hidden" name="product_id"
                                                                            value="{{ $product->track_id }}">
                                                                        <input type="hidden" name="type"
                                                                            value="{{ $product->schedule_type }}">

                                                                        @if ($lead->parent_id)
                                                                            <input type="hidden" name="student_parent_id"
                                                                                value="{{ $lead->parent_id }}">
                                                                        @else
                                                                            <input type="hidden" name="student_id"
                                                                                value="{{ $lead->student_id }}">
                                                                        @endif --}}
                                                                    @if ($product->invoice)
                                                                        {{ $product->invoice?->invoice_number }}
                                                                    @else
                                                                        <div class="d-flex">
                                                                            <button type="button"
                                                                                class="btn btn-primary mx-3 btn-sm d-flex align-items-center gap-2 generate-invoice-btn"
                                                                                data-bs-toggle="modal"
                                                                                data-type="{{ $product->schedule_type }}"
                                                                                data-course-id="{{ $product->id }}"
                                                                                data-product-id="{{ $product->track_id }}"
                                                                                data-category-id="{{ $product->category_id }}"
                                                                                data-bs-target="@if (!is_null($lead->student_id) || !is_null($lead->parent_id)) #invoiceModal @else #invoiceModalHasNotStudent @endif">

                                                                                Generate
                                                                            </button>

                                                                            <button type="button"
                                                                                class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                                                                data-bs-toggle="modal"
                                                                                data-type="{{ $product->schedule_type }}"
                                                                                data-course-id="{{ $product->id }}"
                                                                                data-bs-target="#selectinvoiceModal">
                                                                                Select Invoice
                                                                            </button>
                                                                        </div>
                                                                    @endif
                                                                    {{-- </form> --}}
                                                                </td>
                                                            </tr>
                                                        @endforeach

                                                    </tbody>
                                                </table>
                                            @else
                                                <div class="alert text-center rounded-3 shadow-sm mt-4" role="alert">
                                                    <i class="bi bi-info-circle me-2"></i> No products exist
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Archived Tab -->
                                    <div class="tab-pane fade" id="archived-pane" role="tabpanel"
                                        aria-labelledby="archived-tab">
                                        <div class="table-responsive">
                                            @php
                                                $archivedProducts = $archivedProducts ?? collect(); // Define if not passed in
                                            @endphp
                                            @if ($products->count() > 0)
                                                <table class="table table-bordered mb-0 table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" class="text-center">Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($products as $product)
                                                            <tr>
                                                                <td class="text-center">
                                                                    <div class="d-flex justify-content-center gap-2">
                                                                        <a href="{{ route('products.edit', $product->id) }}"
                                                                            class="btn btn-outline-primary btn-sm radius-8"
                                                                            title="Edit Product">
                                                                            <iconify-icon icon="lucide:edit"
                                                                                class="text-lg"></iconify-icon>
                                                                        </a>
                                                                        <form
                                                                            action="{{ route('products.destroy', $product->id) }}"
                                                                            method="POST"
                                                                            onsubmit="return confirm('Are you sure you want to delete this product?');">
                                                                            @method('DELETE')
                                                                            @csrf
                                                                            <button type="submit"
                                                                                class="btn btn-outline-danger btn-sm radius-8"
                                                                                title="Delete Product">
                                                                                <iconify-icon
                                                                                    icon="fluent:delete-24-regular"
                                                                                    class="text-lg"></iconify-icon>
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <div class="alert text-center rounded-3 shadow-sm mt-4" role="alert">
                                                    <i class="bi bi-info-circle me-2"></i> No products exist
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                {{-- @if ($products->count())
            <!-- Pagination -->
            <div class="py-4 px-4">
                {{ $products->links() }}
            </div>
        @endif --}}
            </div>
        @endcan
    @endif

    @if ($lead->assigned_to)

        @can('crm_lead_tasks-view')
            <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">Tasks</h5>
                                {{-- <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                    data-bs-toggle="modal"
                                    data-bs-target="@if ($lead->student_id == null) #taskModalNoHasAccount @else #taskModal @endif">
                                    Add New Task
                                </button> --}}
                                @can('crm_lead_tasks-create')
                                    <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-2"
                                        data-bs-toggle="modal" data-bs-target="#taskModal">
                                        Add New Task
                                    </button>
                                @endcan
                            </div>
                            <x-dashboard.tasks.table :tasks="$tasks" :queryParams="['related_to_type' => 'App\Models\Lead', 'related_to_id' => $lead->id]" />
                        </div>
                    </div>
                </div>
                <div class="py-8 px-4">
                    {{ $tasks->links('pagination::bootstrap-5') }}
                </div>
            </div>
        @endcan

    @endif


    <!-- select reason -->
    <div class="modal fade" id="selectReasonModal" tabindex="-1" aria-labelledby="selectReasonModal"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('leads.store.workflow.action.type') }}" method="POST">
                    @csrf
                    <input type="hidden" name="action_type" value="not_interested">
                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">

                    <div class="modal-header">
                        <h5 class="modal-title">Reason for Call</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>
                                Reasons
                            </x-forms.labels.basic>
                            <x-forms.select.basic name="reason_id">
                                <option value="">Select Reason</option>
                                @foreach ($reasons as $reason)
                                    <option value="{{ $reason->id }}" @selected(old('reason') === $reason->id)>
                                        {{ str($reason->reason)->replace('_', ' ')->lower()->ucfirst() }}</option>
                                @endforeach
                            </x-forms.select.basic>
                        </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>

    <!-- Schedule a call Modal -->
    <div class="modal fade" id="addcallModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="addModalForm" action="{{ route('leads.store.workflow.action.type') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">Schedule a Call</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <input type="hidden" name="action_type" value="reschedule_call">
                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">

                    <div class="modal-body">
                        <div>
                            <x-forms.input-label.basic name="schedule_call_time" required
                                value="{{ old('schedule_call_time') }}" type="time">
                                Schedule a call with this lead tomorrow at:
                            </x-forms.input-label.basic>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <x-forms.buttons.primary id="scheduleModalSubmit">
                            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>

    @can('crm_lead_calls-view')
        <x-dashboard.calls.table :calls="$calls" :queryParams="['related_to_type' => 'App\Models\Lead', 'related_to_id' => $lead->id]" />
    @endcan

    @include('dashboard.leads.modals.demo-modal')
    @include('dashboard.leads.modals.test-modal')
    @include('dashboard.leads.modals.student-modal')
    @if ($lead->assigned_to)
        @include('dashboard.leads.modals.task-modal')
    @endif
    @include('dashboard.leads.modals.invoice-modal')
    @include('dashboard.leads.modals.select-invoice-modal')
    @include('dashboard.leads.modals.product-modal')


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            handleScheduleCallBtn();
            scheduleCall();
            handleNoAnswerStatus();
            handleNotInterestedStatus();
        });

        const statusesListUrl = '{{ route('api.v1.lead-statuses.list') }}';
        const getLeadUrl = '{{ route('api.v1.leads.show', $lead->id) }}';
        let leadId = @json($lead->id);
        const statuesContainer = document.querySelector('.statuses-container');

        function createStatusButton(innerText, statusId) {
            const button = document.createElement('button');

            button.classList.add('status-btn', 'btn', 'btn-primary', 'd-flex', 'align-items-center', 'gap-2', 'px-6',
                'py-2', 'rounded', 'fs-6');

            button.setAttribute('type', 'button');
            button.setAttribute('data-status-id', statusId);
            button.setAttribute('data-status-name', innerText);

            button.textContent = innerText;

            button.addEventListener('click', async e => {
                try {
                    if (e.target.innerText === 'No answer') {
                        const modal = new bootstrap.Modal(document.getElementById('scheduleModal'));
                        modal.show();
                        return;
                    }

                    if (e.target.innerText === 'Not interested') {
                        const modal = new bootstrap.Modal(document.getElementById('dropdownModal'));
                        modal.show();
                        return;
                    }

                    await updateStatus(statusId);

                } catch (error) {
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        text: 'An error occurred while updating status.',
                        timer: 3000,
                        timerProgressBar: true,
                        showConfirmButton: false
                    });
                }
            });

            return button;
        }

        async function renderStatusButtons(parentStatusId) {
            const url = new URL(statusesListUrl);
            url.searchParams.append('parent_id', parentStatusId);

            const statuses = await fetch(url)
                .then(res => res.json())
                .catch(error => {
                    console.error('Failed to fetch statuses:', error);
                    return null;
                });

            // Clear old buttons before rendering new ones
            statuesContainer.innerHTML = '';

            if (statuses && Object.keys(statuses).length > 0) {
                for (const statusId in statuses) {
                    statuesContainer.appendChild(
                        createStatusButton(
                            statuses[statusId]
                            .replaceAll('_', ' ')
                            .toLowerCase()
                            .replace(/^\w/, (c) => c.toUpperCase()),
                            statusId
                        )
                    );
                }
            } else {
                const response = await fetch(getLeadUrl);
                const data = await response.json();

                document.querySelector('.status-reason')
                    .innerText = `reason: ${data.status_reason}`;

                document.querySelector('.transitions').classList.add('d-none');
            }

        }

        async function updateStatus(statusId) {
            const updateLeadUrl = '{{ route('api.v1.leads.update', $lead->id) }}';

            const response = await fetch(updateLeadUrl, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    status_id: statusId
                })
            });

            if (response.ok) {
                const data = await response.json();

                document.querySelector('.current-lead-status').innerText =
                    data.lead?.status?.name
                    .replace('_', ' ')
                    .toLowerCase()
                    .replace(/^\w/, c => c.toUpperCase()) || '—';

                await renderStatusButtons(statusId);

            } else {
                console.error('Failed to update status');
                Swal.fire({
                    icon: 'error',
                    text: 'Status update failed.',
                    timer: 3000,
                    timerProgressBar: true,
                    showConfirmButton: false
                });
            }
        }

        async function handleNoAnswerStatus() {
            const noAnswerId = document.querySelector('.status-btn[data-status-name="No answer"]').getAttribute(
                'data-status-id');

            await updateStatus(noAnswerId);
        }

        async function handleNotInterestedStatus() {
            const form = document.getElementById('dropdownModalForm');

            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const formData = new FormData(form);
                const statusReason = formData.get('status_reason');

                const response = await fetch("{{ route('api.v1.leads.update', $lead->id) }}", {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    },
                    body: JSON.stringify({
                        status_reason: statusReason
                    }),
                });

                if (response.ok) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('dropdownModal'));
                    modal.hide();

                    form.reset();
                }

                const noAnswerId = document.querySelector('.status-btn[data-status-name="Not interested"]')
                    .getAttribute('data-status-id');

                await updateStatus(noAnswerId);
            });
        }

        async function scheduleCall() {
            const form = document.getElementById('scheduleModalForm');
            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const formData = new FormData(form);

                formData.set('due_date', tomorrowAt(formData.get('due_date')));

                const response = await fetch("{{ route('api.v1.tasks.store') }}", {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                    },
                    body: formData,
                });

                if (response.ok) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('scheduleModal'));
                    modal.hide();

                    form.reset();
                }
            });
        }


        function tomorrowAt(time) {
            if (!time)
                return;

            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);

            const [hours, minutes] = time.split(':');

            // Set time to tomorrow's date
            tomorrow.setHours(hours);
            tomorrow.setMinutes(minutes);
            tomorrow.setSeconds(0);
            tomorrow.setMilliseconds(0);

            return tomorrow.toISOString().slice(0, 19).replace('T', ' ');
        }



        renderStatusButtons({{ $lead->status_id }});
    </script>
    <script>
        $(document).ready(function() {
            $('select[name="source"]').on('change', function() {
                if ($(this).val() === 'referral') {
                    $('#source_id').css('display', 'block');
                } else {
                    $('#source_id').css('display', 'none');
                }
            });
        });
    </script>
    <script>
        // Handle close button clicks to remove 'show' class
        document.querySelectorAll('[data-bs-dismiss="modal"]').forEach(button => {
            button.addEventListener('click', () => {
                const modal = document.getElementById('copyLinkModal');
                modal.classList.remove('show');
                modal.style.display = 'none'; // Ensure modal is hidden
                document.body.classList.remove('modal-open'); // Remove modal-open from body
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) backdrop.remove(); // Remove backdrop
            });
        });

        // Handle copy button click
        document.getElementById('copyButton').addEventListener('click', () => {
            const linkInput = document.getElementById('linkInput');
            linkInput.select();
            try {
                document.execCommand('copy');
                const confirmation = document.getElementById('copyConfirmation');
                confirmation.style.display = 'block';
                setTimeout(() => {
                    confirmation.style.display = 'none';
                }, 2000); // Hide confirmation after 2 seconds
            } catch (err) {
                console.error('Failed to copy: ', err);
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            let commentsToShow = 3; // نفس رقم initialCommentsCount
            const totalComments = $('.comment-item').length;

            $('#load-more-comments').on('click', function() {
                commentsToShow += 3;
                $('.comment-item').each(function(index) {
                    if (index < commentsToShow) {
                        $(this).removeClass('d-none');
                    }
                });

                if (commentsToShow >= totalComments) {
                    $('#load-more-comments').hide();
                }
            });

        });
    </script>
    <script>
        $(document).ready(function() {
            // Add new comment textarea
            $('#add-comment').on('click', function() {
                $('#comments-wrapper').append(`
                <div class="comment-item mb-3 d-flex gap-2 align-items-start">
                    <textarea name="comments[]" class="form-control" rows="4"></textarea>
                    <button type="button" class="btn btn-outline-danger  radius-8 btn-sm remove-comment mt-1">
                       <iconify-icon icon="fluent:delete-24-regular" class="text-lg"></iconify-icon>
                    </button>
                </div>
            `);
            });

            // Remove comment textarea
            $(document).on('click', '.remove-comment', function() {
                $(this).closest('.comment-item').remove();
            });
        });
    </script>
    <script>
        $(document).ready(function() {

            // Submit updated comments via AJAX
            $('.update-lead-comment').on('click', function() {
                let formData = {
                    comments: $("textarea[name='comments[]']").map(function() {
                        return $(this).val();
                    }).get(),
                    _token: "{{ csrf_token() }}",
                    _method: "PUT"
                };

                $.ajax({
                    url: "{{ route('leads.update.comment', $lead->id) }}",
                    method: "POST", // Laravel requires POST + _method: PUT for PUT requests via AJAX
                    data: formData,
                    success: function(response) {
                        $('.update-comment-success-alert-container').css('display', 'block');

                        setTimeout(function() {
                            $('.update-comment-success-alert-container').css('display',
                                'none');
                        }, 1500);
                    },
                    error: function(xhr) {
                        let errorMessage = xhr.responseJSON.message;
                        $('.update-comment-danger-alert-container').html(`
                    <div class="update-comment-danger-alert-content">
                            <div class="alert alert-danger">
                                ${errorMessage}
                            </div>
                        </div>
                `);
                        $('.update-comment-danger-alert-container').css('display', 'block');
                        setTimeout(function() {
                            $('.update-comment-danger-alert-container').css('display',
                                'none');
                        }, 1500);
                        // setTimeout(function(){
                        // $('.update-comment-success-alert-comnainer').css('display','none');
                        // },1500);

                        // alert("Error updating comments.");
                        // console.error(errors);
                    }
                });
            });
        });
    </script>
    <script>
        function handselectreasonBtn() {
            document.getElementById('selectReasonBtn')
                .addEventListener('click', () => {
                    const modal = new bootstrap.Modal(document.getElementById('selectReasonModal'));
                    modal.show();
                });
        }

        handselectreasonBtn();
    </script>
    <script>
        function handleAddCallBtn() {
            const buttons = document.querySelectorAll('#addCallBtn');

            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    const modal = new bootstrap.Modal(document.getElementById('addcallModal'));
                    modal.show();
                });
            });
        }
        handleAddCallBtn();

        function showPaymentLink(url) {
            const element = document.getElementById('copyLinkModal');
            element.classList.add('show');
            const currentDisplay = window.getComputedStyle(element).display;

            if (currentDisplay === 'none') {
                element.style.display = 'block';
            }

            const linkpayment = document.getElementById('linkInput');
            const links = document.querySelectorAll('#payment_url');

            linkpayment.value = url;
            linkpayment.textContent = url;

            links.forEach(link => {
                link.value = url;
                // link.textContent = url;
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            const invoiceModal = document.getElementById('selectinvoiceModal');
            const demoOptions = @json($availableDemoInvoices->map(fn($inv) => ['id' => $inv->id, 'number' => $inv->invoice_number]));
            const trackOptions = @json($availabletrackinvoices->map(fn($inv) => ['id' => $inv->id, 'number' => $inv->invoice_number]));

            invoiceModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const leadId = button.getAttribute('data-course-id');
                const invoiceType = button.getAttribute('data-type'); // 'product' or 'track'

                document.getElementById('courseId').value = leadId;

                const select = document.getElementById('invoiceSelect');
                // Clear existing options except the first
                while (select.options.length > 1) select.remove(1);

                // Populate based on invoice type
                const source = invoiceType === 'track' ? trackOptions : demoOptions;
                source.forEach(invoice => {
                    const option = document.createElement('option');
                    option.value = invoice.id;
                    option.textContent = invoice.number;
                    select.appendChild(option);
                });
            });
        });

        // document.addEventListener('DOMContentLoaded', function() {

        //     var invoiceModal = document.getElementById('selectinvoiceModal');
        //     invoiceModal.addEventListener('show.bs.modal', function(event) {

        //         var button = event.relatedTarget;
        //         var leadId = button.getAttribute('data-course-id');

        //         // Populate the modal fields
        //         document.getElementById('courseId').value = leadId;
        //     });
        // });

        // document.getElementById('selectinvoiceModal').addEventListener('show.bs.modal', function(event) {
        //         var button = event.relatedTarget;
        //         var leadId = button.getAttribute('data-course-id');

        //         // Populate the modal fields
        //         document.getElementById('courseId').value = leadId;
        // });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-qm2/qhM+HBy2L4TbYhWw/jZt0yz9V9sP1jFfVJ0mQLh+q+j9D/pThomOmNYDzTkN" crossorigin="anonymous">
    </script>

    <script>
        function toggleImageModal(src) {
            const modal = document.getElementById('imageModal');
            const img = document.getElementById('modalImage');
            img.src = src;
            modal.style.display = 'flex';
        }

        // Hide modal when clicking outside the image
        document.getElementById('imageModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });

        function handleScheduleCallBtn() {

            document.getElementById('scheduleCallBtn')
                .addEventListener('click', () => {

                    const modal = new bootstrap.Modal(document.getElementById('scheduleModal'));
                    modal.show();
                });
        }


        document.addEventListener('DOMContentLoaded', function() {

            const generateButtons = document.querySelectorAll('.generate-invoice-btn');
            const courseInput = document.getElementById('CourseIdInput');

            generateButtons.forEach(button => {
                button.addEventListener('click', function() {
                    console.log('generate');

                    $('#type').prop('required', false);
                    $('#type_box').addClass('d-none');

                    const type = this.getAttribute('data-type');
                    const courseId = this.getAttribute('data-course-id');
                    const productId = this.getAttribute('data-product-id');
                    const catId = this.getAttribute('data-category-id');
                    courseInput.value = courseId;


                    $('form input[name="type"]').remove();
                    $('form input[name="category_id"]').remove();
                    $('form input[name="product_id_track"]').remove();
                    $('form input[name="category_product_id"]').remove();
                    $('form input[name="product_id"]').remove();

                    if (type == 'track') {
                        $('#levels_count').removeClass('d-none');
                        $('#levels_count_input').prop('required', true);
                        $('form')
                            .append(`<input type="hidden" name="type" value="track">`)
                            .append(`<input type="hidden" name="category_id" value="${catId}">`)
                            .append(
                                `<input type="hidden" name="product_id" value="${productId}">`
                            );
                    } else if (type == 'course') {
                        $('#levels_count_input').prop('required', false);

                        $('form')
                            .append(`<input type="hidden" name="type" value="product">`)
                            .append(
                                `<input type="hidden" name="category_product_id" value="${catId}">`)
                            .append(`<input type="hidden" name="product_id" value="${productId}">`);
                    }


                });

            });
        });

        const phoneInput = document.querySelector("#mobile");
        const countryCodeInput = document.querySelector("#country_code");


        const iti = window.intlTelInput(phoneInput, {
            initialCountry: "auto",
            nationalMode: false,
            allowDropdown: false,
            autoHideDialCode: false,
            autoPlaceholder: "polite",
            separateDialCode: true
        });

        // Ensure wrapper styling
        window.addEventListener("load", () => {
            const itiWrapper = phoneInput.closest(".iti");
            if (itiWrapper) {
                itiWrapper.classList.add("w-100");
            }
        });


        // Set selected country from existing hidden input value
        const code = countryCodeInput.value?.replace("+", "");
        if (code) {
            const allCountries = window.intlTelInputGlobals.getCountryData();
            const country = allCountries.find(c => c.dialCode === code);
            if (country) {
                iti.setCountry(country.iso2);
            }
        }
        countryCodeInput.disabled = true;

        // Validation on blur
        // Make country code optional and phone required
        // phoneInput.addEventListener("blur", function() {
        //     const dialCode = iti.getSelectedCountryData().dialCode;

        //     // Only set country code if selected
        //     if (dialCode && countryCodeInput) {
        //         countryCodeInput.value = "+" + dialCode;
        //     } else {
        //         countryCodeInput.value = ""; // clear if no country selected
        //     }

        //     const errorMsg = document.querySelector("#phone-error");

        //     if (phoneInput.value.trim() === "") {
        //         if (errorMsg) {
        //             errorMsg.textContent = "Phone number is required.";
        //             errorMsg.style.display = "block";
        //         }
        //         return;
        //     }

        //     const isValid = iti.isValidNumber();

        //     if (!isValid) {
        //         const errorCode = iti.getValidationError();
        //         const errorMessages = [
        //             "Invalid number",
        //             "Invalid country code",
        //             "Too short",
        //             "Too long",
        //             "Invalid number"
        //         ];
        //         if (errorMsg) {
        //             errorMsg.textContent = errorMessages[errorCode] || "Invalid phone number";
        //             errorMsg.style.display = "block";
        //         }
        //     } else {
        //         if (errorMsg) {
        //             errorMsg.textContent = "";
        //             errorMsg.style.display = "none";
        //         }
        //     }
        // });
    </script>
</x-Dashboard.Layout.Layout>