@extends('back.layouts.app', ['title' => $title])
@section('content')
    <div class="content-wrapper pl-3 pr-2">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="row align-items-center mb-3">
                <div class="col-md-12 text-end">
                    @include('back.common_views.quicklinks')
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-6 col-sm-12">
                    <h3 class="mb-0 font-weight-bold text-dark">
                        <i class="fas fa-users-cog text-primary mr-2"></i> Contact Leads Management
                        @if ($contact > 0)
                            <span class="badge badge-danger blink_me ml-2" style="font-size: 12px; vertical-align: middle;">
                                <i class="fas fa-bell mr-1"></i> {{ $contact }} New
                            </span>
                        @endif
                    </h3>
                    <nav aria-label="breadcrumb" class="mt-2">
                        <ol class="breadcrumb bg-transparent p-0 mb-0">
                            <li class="breadcrumb-item"><a href="{{ admin_url() }}"><i class="fas fa-home"></i> Dashboard</a></li>
                            <li class="breadcrumb-item active">Contact Leads</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 col-sm-12 text-md-end">
                    <div class="btn-group shadow-sm">
                        <a href="{{ admin_url() }}contact_request/create" class="btn btn-primary">
                            <i class="fas fa-plus-circle mr-1"></i> Add New Lead
                        </a>
                        <a href="{{ admin_url() }}contact_request/export/excel" class="btn btn-success">
                            <i class="fas fa-file-excel mr-1"></i> Export
                        </a>
                        <a href="{{ admin_url() }}mass-mail?leads=yes" class="btn btn-info">
                            <i class="fas fa-envelope mr-1"></i> Mass Email
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="content mt-3">
            <div class="row">
                <div class="col-md-12">
                    <!-- Filters Card -->
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-body p-3">
                            <form method="get" action="{{ route('contact_request.index') }}" id="search_form">
                                <input type="hidden" name="read_lead" id="read_lead" value="{{ request()->input('read_lead', 2) }}" />
                                <div class="row align-items-end g-3">
                                    <div class="col-md-4">
                                        <label class="form-label font-weight-bold text-muted small">SEARCH BY NAME OR EMAIL</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                                            <input type="text" name="name" id="search-box" class="form-control border-left-0" 
                                                placeholder="Type to search..." value="{{ request('name') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label font-weight-bold text-muted small">DATE RANGE</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white"><i class="fas fa-calendar-alt text-muted"></i></span>
                                            <input type="text" name="dates" id="reportrange" class="form-control border-left-0" placeholder="All Time">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-primary px-4"><i class="fas fa-filter mr-1"></i> Apply Filters</button>
                                        <a href="{{ route('contact_request.index') }}" class="btn btn-outline-secondary px-4"><i class="fas fa-sync-alt mr-1"></i> Reset</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Leads Table Card -->
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 border-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0 font-weight-bold"><i class="fas fa-list text-muted mr-2"></i> Leads Listing</h5>
                                <div>
                                    @if (request()->input('read_lead', 2) == 1 || request()->input('read_lead', 2) == 2)
                                        <button type="button" class="btn btn-sm btn-outline-warning" onclick="filterReadStatus(0);">
                                            <i class="fas fa-eye-slash mr-1"></i> Show Unread
                                        </button>
                                    @else
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="filterReadStatus(2);">
                                            <i class="fas fa-eye mr-1"></i> Show All
                                        </button>
                                    @endif
                                    <button type="button" class="btn btn-sm btn-danger ml-2 bulk_actions_btn" onclick="triggerBulkAction('delete')" style="display:none;">
                                        <i class="fas fa-trash-alt mr-1"></i> Delete Selected
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <form method="post" action="{{ route('contact_request.bulk.actions') }}" id="bulk_actions_contact_request_form">
                                @csrf
                                <input type="hidden" name="bulk_action" id="bulk_action" value="delete" />
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0" id="leads-table">
                                        <thead class="bg-light text-muted small">
                                            <tr>
                                                <th class="px-4" width="40">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="contact_request_check_all">
                                                    </div>
                                                </th>
                                                <th width="40"></th>
                                                <th width="80">ID</th>
                                                <th>NAME</th>
                                                <th>CONTACT INFO</th>
                                                <!--<th>SERVICE</th>-->
                                                <!--<th>ADDRESS</th>-->
                                                <th>REQUEST DATE</th>
                                                <th class="text-center">ACTIONS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($result as $row)
                                                <tr id="trr{{ $row->id }}" class="{{ $row->read_lead == 0 ? 'bg-unread' : '' }}" onclick="read_data({{ $row->id }})">
                                                    <td class="px-4">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input contact_request_check" name="contact_request_check[]" value="{{ $row->id }}">
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="javascript:;" class="text-muted" onclick="showme_page('#subtrr{{ $row->id }}',this)">
                                                            <i class="fas fa-chevron-down"></i>
                                                        </a>
                                                    </td>
                                                    <td class="font-weight-bold text-muted">
                                                        #{{ $row->id }}
                                                        @if ($row->read_lead == 0)
                                                            <span class="badge badge-dot badge-danger ml-1" id="read11_value-{{ $row->id }}"></span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar-sm bg-light text-primary rounded-circle mr-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                                                {{ strtoupper(substr($row->name, 0, 1)) }}
                                                            </div>
                                                            <div>
                                                                <span class="d-block font-weight-bold text-dark">{{ $row->name }} {{ $row->lname }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="small">
                                                            <a href="mailto:{{ $row->email }}" class="text-muted d-block"><i class="far fa-envelope mr-1"></i> {{ $row->email }}</a>
                                                            <a href="tel:{{ $row->phone }}" class="text-muted d-block"><i class="fas fa-phone-alt mr-1"></i> {{ $row->phone }}</a>
                                                        </div>
                                                    </td>
                                                    <!--<td class="small">-->
                                                    <!--    @if(!empty($row->service))-->
                                                    <!--        <span class="badge badge-info">{{ $row->service }}</span>-->
                                                    <!--    @else-->
                                                    <!--        <span class="text-muted">-</span>-->
                                                    <!--    @endif-->
                                                    <!--</td>-->
                                                    <!--<td class="small text-muted">-->
                                                    <!--    @if(!empty($row->address))-->
                                                    <!--        <i class="fas fa-map-marker-alt mr-1"></i> {{ Str::limit($row->address, 30) }}-->
                                                    <!--        @if(!empty($row->city) || !empty($row->state))-->
                                                    <!--            <br><span class="text-muted">{{ $row->city }}{{ !empty($row->city) && !empty($row->state) ? ', ' : '' }}{{ $row->state }}</span>-->
                                                    <!--        @endif-->
                                                    <!--    @else-->
                                                    <!--        <span class="text-muted">-</span>-->
                                                    <!--    @endif-->
                                                    <!--</td>-->
                                                    <td class="small text-muted">
                                                        <i class="far fa-calendar-alt mr-1"></i> {{ fmtDate($row->dated, 'd M, Y') }}
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="btn-group">
                                                            <button type="button" onclick="showLeadDetailsModal({{ $row->id }});" 
                                                                class="btn btn-sm btn-outline-info" title="Quick View">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                            <a href="{{ route('contact_request.show', $row->id) }}" 
                                                                class="btn btn-sm btn-outline-primary" title="Full Details">
                                                                <i class="fas fa-history"></i>
                                                            </a>
                                                        </div>

                                                        <!-- Hidden Details for Modal -->
                                                        <div style="display: none;" id="details_{{ $row->id }}">
                                                            <div class="lead-details-modal-body">
                                                                <div class="row mb-3">
                                                                    <div class="col-md-6">
                                                                        <label class="small text-muted mb-0">LEAD NAME</label>
                                                                        <p class="font-weight-bold mb-0">{{ $row->name }} {{ $row->lname }}</p>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <label class="small text-muted mb-0">REQUEST DATE</label>
                                                                        <p class="font-weight-bold mb-0">{{ fmtDate($row->dated, 'd M, Y') }}</p>
                                                                    </div>
                                                                </div>
                                                                <div class="row mb-3">
                                                                    <div class="col-md-6">
                                                                        <label class="small text-muted mb-0">EMAIL</label>
                                                                        <p class="mb-0"><a href="mailto:{{ $row->email }}">{{ $row->email }}</a></p>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <label class="small text-muted mb-0">PHONE</label>
                                                                        <p class="mb-0"><a href="tel:{{ $row->phone }}">{{ $row->phone }}</a></p>
                                                                    </div>
                                                                </div>
                                                                <!--@if(!empty($row->service))-->
                                                                <!--<div class="row mb-3">-->
                                                                <!--    <div class="col-md-12">-->
                                                                <!--        <label class="small text-muted mb-0">SERVICE REQUESTED</label>-->
                                                                <!--        <p class="mb-0"><span class="badge badge-info badge-lg">{{ $row->service }}</span></p>-->
                                                                <!--    </div>-->
                                                                <!--</div>-->
                                                                <!--@endif-->
                                                                <!--<div class="row mb-3">-->
                                                                <!--    <div class="col-md-12">-->
                                                                <!--        <label class="small text-muted mb-0">ADDRESS</label>-->
                                                                <!--        <p class="mb-0">{{ $row->address ?? '-' }}@if(!empty($row->city) || !empty($row->state) || !empty($row->zip_code)), {{ $row->city ?? '' }}{{ !empty($row->city) && !empty($row->state) ? ', ' : '' }}{{ $row->state ?? '' }} {{ $row->zip_code ?? '' }}@endif</p>-->
                                                                <!--    </div>-->
                                                                <!--</div>-->
                                                                <hr class="my-3">
                                                                <div class="bg-light p-3 rounded">
                                                                    <label class="small text-muted font-weight-bold mb-2">COMMENTS</label>
                                                                    <p class="mb-0 text-dark" style="line-height: 1.6;">{!! $row->comments ?? '-' !!}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                
                                                <!-- Expanded Actions Row -->
                                                <tr style="display: none;" id="subtrr{{ $row->id }}" class="bg-light-actions">
                                                    <td colspan="2"></td>
                                                    <td colspan="7" class="py-3 px-4">
                                                        <div class="d-flex flex-wrap gap-2">
                                                            <a href="mailto:{{ $row->email }}" class="btn btn-sm btn-info text-white"><i class="fas fa-reply mr-1"></i> Reply</a>
                                                            <button onclick="comment_model({{ $row->id }})" class="btn btn-sm btn-success text-white"><i class="fas fa-comment-dots mr-1"></i> Add Comment</button>
                                                            
                                                            @if (isset($clientArr[$row->email]))
                                                                <a class="btn btn-sm btn-secondary" target="_blank" href="{{ admin_url() }}manage_clients/{{ $clientArr[$row->email] }}">
                                                                    <i class="fas fa-user-check mr-1"></i> Existing Client
                                                                </a>
                                                            @else
                                                                <button class="btn btn-sm btn-warning text-white font-weight-bold" onclick="convert_client('{{ $row->id }}')">
                                                                    <i class="fas fa-user-plus mr-1"></i> Convert to Client
                                                                </button>
                                                            @endif
                                                            
                                                            <a href="{{ admin_url() }}mass-mail?lead_id={{ $row->id }}" class="btn btn-sm btn-outline-info"><i class="fas fa-paper-plane mr-1"></i> Send Email</a>
                                                            
                                                            <button class="btn btn-sm btn-outline-danger ml-auto" onclick="del_recrod('{{ $row->id }}')">
                                                                <i class="fas fa-trash-alt mr-1"></i> Delete
                                                            </button>
                                                        </div>
                                                        <div class="mt-2 small text-muted">
                                                            <span class="mr-3"><i class="fas fa-network-wired mr-1"></i> IP: {{ $row->ip }}</span>
                                                            <span><i class="fas fa-user-edit mr-1"></i> Added By: {{ $row->user->name ?? '-' }}</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="9" class="text-center py-5 text-muted">
                                                        <i class="fas fa-folder-open fa-3x mb-3 opacity-2"></i>
                                                        <p class="mb-0 font-weight-bold">No leads found matching your criteria.</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer bg-white border-0 py-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="small text-muted">
                                    Showing {{ $result->firstItem() }} to {{ $result->lastItem() }} of {{ $result->total() }} leads
                                </div>
                                <div>
                                    {{ $result->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div> {{ $result->links() }} </div>
            <div class="modal fade" id="exampleModal-comment" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Add Comment</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form name="frm_process" id="contactFormComment" class="contact-form">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="contact_id" class="form-control" id="request_comment">
                                <div class="col-sm-12">
                                    <label>Enter Comment</label>
                                    <textarea class="form-control" name="message" id="message"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                {{-- <input type="submit"  value="Send Request Review Email" class="btn btn-primary"> --}}
                                <button type="button" class="btn btn-primary" onclick="comment_save()">Save
                                    Comment</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="exampleModal-price" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Current Price Is
                                <strong id="price_value"></strong>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form name="frm_process" id="contactFormPrice" class="contact-form">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="contact_id" class="form-control" id="contact_ids"
                                    value="">
                                <div class="col-sm-12">
                                    <label>Enter Price</label>
                                    <input type="number" name="price" class="form-control" id="price"
                                        value="">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                {{-- <input type="submit"  value="Send Request Review Email" class="btn btn-primary"> --}}
                                {{-- @if ($row->price == 0) --}}
                                <button type="button" class="btn btn-primary" onclick="Price_save()">Save Price</button>
                                {{-- @endif --}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="SMS_Template_model" tabindex="-1" role="dialog"
                aria-labelledby="SMS_Template_model-2" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="SMS_Template_model-2">SMS Template</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <form id="smsTemplateForm">
                            @csrf
                            <div class="modal-body">
                                <input type="hidden" name="sms_receiver_user_id" id="sms_receiver_user_id">
                                <input type="hidden" name="sms_receiver_type" id="sms_receiver_type">
                                <input type="hidden" name="sms_value_send" id="sms_value_send">
                                <div class="form-group">
                                    <label for="">Select SMS Template</label>
                                    <select class="form-control" name="sms_template_id" id="sms_template_id">
                                        @foreach ($sms_template as $temp)
                                            <option value="{{ $temp->id }}">{{ $temp->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="">Subject Of SMS</label>
                                    <input name="sms_subject" id="sms_subject" class="form-control">
                                </div>
                                <div class="form-group">
                                    <div id="user_email_area">
                                        <div class="row" style="margin-top:10px;">
                                            <div class="col-sm-12">
                                                <label for="User SMS Body:">User SMS Body:</label>
                                                <textarea name="sms_user_body" id="sms_user_body" class="form-control" required="">
                                        </textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="sms_combine_send" style="display: none;">
                                    <div class="form-group">
                                        <label style="margin-top: 10px;font-size:18px;">Do You Want Send This SMS To
                                            Client's</label>
                                        <input type="checkbox" name="sms_send_to_client">
                                    </div>
                                    <div class="col-sm-12" id="sms_client_packages_id" style="display:none;">
                                        <p>Please Select Package</p>
                                        <div class="row">
                                            @foreach ($get_all_packages as $package)
                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label
                                                            style="margin-top: 10px;font-size:18px;">{{ $package->heading }}</label>
                                                        <input type="checkbox"
                                                            name="sms_client_package[{{ $package->id }}]">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label style="margin-top: 10px;font-size:18px;">Do You Want Send This SMS To
                                            Leads's</label>
                                        <input type="checkbox" name="sms_send_to_leads">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <label style="margin-top: 10px;">Save Changes In Selected SMS Template</label>
                                    <input type="checkbox" name="new_temp">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary" onclick="save_sms_record_send()">Send
                                        SMS</button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('beforeBodyClose')
    <style>
        .bg-unread { background-color: rgba(0, 123, 255, 0.03) !important; }
        .bg-unread:hover { background-color: rgba(0, 123, 255, 0.05) !important; }
        .badge-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
        .bg-light-actions { background-color: #fcfcfc !important; border-bottom: 2px solid #eee; }
        #leads-table th { letter-spacing: 0.05em; font-weight: 700; border-top: none; }
        #leads-table td { padding-top: 1rem; padding-bottom: 1rem; vertical-align: middle; }
        .avatar-sm { font-weight: bold; font-size: 14px; }
        .btn-group .btn { border-radius: 6px; margin: 0 2px; }
        .gap-2 { gap: 0.5rem; }
    </style>

    <div class="modal fade" id="leadDetailsModal" tabindex="-1" aria-labelledby="leadDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="leadDetailsModalLabel"><i class="fas fa-info-circle mr-2"></i> Lead Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div id="leadDetailsModalContainer"></div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @include('back.contactus.google_calendar_modal')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="{{ asset_storage('lib/sweetalert/sweetalert2.js') }}"></script>
    <script type="text/javascript" src="{{ asset_storage('') }}back/mod/mod_js.js"></script>
    @include('back.clients.common.sms_script')
    <script>
        function showLeadDetailsModal(id) {
            $('#leadDetailsModalContainer').html($('#details_' + id).html());
            $('#leadDetailsModal').modal('show');
        }
        $(document).ready(function() {
            $('[data-bs-toggle="popover"]').popover();
        });

        $('html').on('mouseup', function(e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function() {
                    $(this.previousSibling).popover('hide');
                });
            }
        });

        function del_recrod(id) {
            if (confirmDel()) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "DELETE",
                    url: "{{ admin_url() }}contact_request/" + id,
                    data: {
                        '_token': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (JSON.parse(data).status) {
                            $("#trr" + id).fadeOut(1000);
                            $("#subtrr" + id).hide(1000);
                            $("#subtr" + id).fadeOut(1000);
                            var tolrec = $("#total_rec").html();
                            var tolrec = $("#total_rec").html(parseInt(tolrec) - 1);
                            // location.reload();
                        } else {
                            alert('ERROR: Deleting');
                            console.log(data);
                        }
                    },
                });
            }
        }

        function convert_client(id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "GET",
                url: "{{ route('lead_convert_client', '') }}" + "/" + id,
                data: {
                    '_token': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    var data = JSON.parse(response);
                    if (data.status == 'error') {
                        alertme('<i class="fas fa-check" aria-hidden="true"></i> Sorry This Client Already Exist ',
                            'danger', true, 1500);
                    } else {
                        // location.reload();
                        alertme('<i class="fas fa-check" aria-hidden="true"></i> Done Successfully ',
                            'success',
                            true, 1500);
                        $("#trr" + id).fadeOut(1000);
                        $("#subtrr" + id).hide(1000);
                        $("#subtr" + id).fadeOut(1000);
                        var tolrec = $("#total_rec").html();
                        var tolrec = $("#total_rec").html(parseInt(tolrec) - 1);
                    }
                }
            });
        }

        function loadDataToGoogleCalendarModal(id) {
            $('#addLeadToGoogleCalendarBody').html('wait...');
            $.ajax({
                type: "GET",
                url: "{{ admin_url() }}" + 'contact_request/loadDataToGoogleCalendarModal/' + id,
                success: function(response) {
                    $('#addLeadToGoogleCalendarBody').html(response);
                    $('#googleCalendarModal').modal('show');
                }
            });
        }

        async function save_to_google_calendar() {
            $('#googleCalendarModal').modal('hide');
            $('#spinner').show();
            let form = $("#addLeadToGoogleCalendarForm");
            let formData = new FormData(form[0]);
            /* for (const [key, value] of formData) {
                console.log(`${key}: ${value}`);
            } */

            try {
                const response = await fetch("{{ route('save_to_google_calendar') }}", {
                    method: "POST",
                    body: formData,
                });
                const result = await response.json();
                $('#spinner').hide();

                if (result.status == 'error') {
                    alertme('<i class="fas fa-xmark" aria-hidden="true"></i> Some thing went wrong',
                        'danger', true, 1500);
                } else {
                    alertme('<i class="fas fa-check" aria-hidden="true"></i> Done Successfully ',
                        'success',
                        true, 1500);
                }
                console.log("Success:", result);
            } catch (error) {
                console.error("Error:", error);
            }
        }

        function read_data(id) {
            $.ajax({
                type: "GET",
                url: "{{ admin_url() }}read_data_contact_lead/" + id,
                data: {
                    '_token': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    $("#read11_value-" + id).remove();
                    // $("#contact_us_lead").reload();
                    $("#bell_reset").load(location + " #bell_reset");
                },
            });
        }
    </script>
    <script>
        function comment_save() {
            var id = $('#contact_id').val();
            if (validateForm1()) {
                $('#btnSave').css('display', 'none');
                $('#loader').css('display', 'block');
                url = "{{ route('lead_comments') }}";
                method = 'POST';
                header = '';
                let formData = new FormData($('#contactFormComment')[0]);
                // console.log(formData);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    headers: header,
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log(data);
                        data = JSON.parse(data);
                        $('#btnSave').css('display', 'block');
                        $('#loader').css('display', 'none');
                        if (data.status) {
                            // $('#msgSuccess').text(data.error);
                            $("#contactFormComment").trigger('reset');
                            // $('#exampleModal-comment-'+id).modal('hide');
                            $('#exampleModal-comment').modal('hide');
                            $("#message").val('');
                            swal(
                                'Thank you!',
                                'Your Comment Has Been Saved.',
                                'success'
                            );
                            location.reload();
                        } else {
                            swal(
                                'Sorry!',
                                data.error,
                                'error'
                            );
                            // $('#msgSuccess').text(data.error);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('Error sending your request');
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            }
        }

        function validateForm1() {
            $("#message").css('background-color', '');
            var valid = true;
            var text = '';
            var message = $("#message").val();
            if (message.length < 3) {
                text += "*Message must be valid <br>";
                $("#message").css('background-color', '#e6cfcf');
                valid = false;
            }
            if (!valid) {
                swal(
                    'ERROR',
                    text,
                    'error'
                );
                return false;
            }
            return true;
        }

        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }
    </script>
    <script type="text/javascript">
        $(function() {
            var value = $("#previous_sts").val();
            if (value == '') {
                var start = moment('01/01/2010', 'MM-DD-YYYY');
                var end = moment();
            } else {
                var myarray = value.split('-');
                var from = myarray[0];
                var to = myarray[1];
                var date1 = new Date(from);
                var date2 = new Date(to);
                var Difference_In_Time = date2.getTime() - date1.getTime();
                var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
                var start = moment().subtract(Difference_In_Days, 'days');
                var end = moment();
            }

            function cb(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                "linkedCalendars": false,
                "closeText": false,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 15 Days': [moment().subtract(14, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'Last 60 Days': [moment().subtract(59, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);
            cb(start, end);
        });
        (function blink() {
            $('.blink_me').fadeOut(500).fadeIn(500, blink);
        })();
    </script>
    <script>
        document.onkeydown = function(evt) {
            var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
            if (keyCode == 13) {
                $("#search_form").submit();
            }
        }
    </script>
    <script>
        function Price_save() {
            var id = $("#contact_id").val();
            if (validateForm()) {
                $('#btnSave').css('display', 'none');
                $('#loader').css('display', 'block');
                url = "{{ route('lead_price') }}";
                method = 'POST';
                header = '';
                let formData = new FormData($('#contactFormPrice')[0]);
                // console.log(formData);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    headers: header,
                    async: true,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log(data);
                        data = JSON.parse(data);
                        $('#btnSave').css('display', 'block');
                        $('#loader').css('display', 'none');
                        if (data.status) {
                            // $('#msgSuccess').text(data.error);
                            $("#contactFormPrice").trigger('reset');
                            // $('#exampleModal-comment-'+id).modal('hide');
                            $('#exampleModal-price').modal('hide');
                            swal(
                                'Thank you!',
                                'Price  Has Been Saved.',
                                'success'
                            );
                            location.reload();
                        } else {
                            swal(
                                'Sorry!',
                                data.error,
                                'error'
                            );
                            // $('#msgSuccess').text(data.error);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('Error sending your request');
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            }
        }

        function validateForm() {
            $("#price").css('background-color', '');
            var valid = true;
            var text = '';
            var price = $("#price").val();
            if (price.length < 1) {
                text += "*Price must be valid <br>";
                $("#price").css('background-color', '#e6cfcf');
                valid = false;
            }
            if (!valid) {
                swal(
                    'ERROR',
                    text,
                    'error'
                );
                return false;
            }
            return true;
        }

        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }
    </script>
    <script>
        function comment_model(id) {
            $("#request_comment").val(id);
            $("#exampleModal-comment").modal('show');
        }

        function price_model(id, price) {
            $("#contact_ids").val(id);
            $("#price_value").text('$' + price);
            $("#exampleModal-price").modal('show');
        }

        function update_package(cid, sts) {
            $.ajax({
                type: "GET",
                url: "{{ route('package-change-contact-lead') }}",
                data: {
                    '_token': $('meta[name="csrf-token"]').attr('content'),
                    'id': cid,
                    'package_id': sts
                },
                success: function(data) {
                    alertme('<i class="fas fa-check" aria-hidden="true"></i> Package  Updated Successfully',
                        'success', true,
                        1500);
                },
            });
        }

        function send_assessment_email(id, sts) {
            $.ajax({
                type: "GET",
                url: "{{ route('send_assesment_email') }}",
                data: {
                    '_token': $('meta[name="csrf-token"]').attr('content'),
                    'id': id,
                    'status': sts
                },
                success: function(data) {
                    alertme('<i class="fas fa-check" aria-hidden="true"></i> Questionnaire Email Has Been Sent Successfully',
                        'success', true,
                        1500);
                    location.reload();
                },
            });
        }

        $('#contact_request_check_all').on('change', function() {
            if ($('#contact_request_check_all').is(':checked')) {
                $('.contact_request_check').prop('checked', true);
            } else {
                $('.contact_request_check').prop('checked', false);
            }
            checkUncheckDelCheckBoxes();
        })

        $('.contact_request_check').on('change', function() {
            checkUncheckDelCheckBoxes();
        })

        function checkUncheckDelCheckBoxes() {
            if ($('.contact_request_check:checked').length == $('.contact_request_check').length) {
                $('#contact_request_check_all').prop('checked', true);
            } else {
                $('#contact_request_check_all').prop('checked', false);
            }

            if ($('.contact_request_check:checked').length > 0) {
                $('.bulk_actions_btn').show();
            } else {
                $('.bulk_actions_btn').hide();
                $('#contact_request_check_all').prop('checked', false);
            }
        }

        function triggerBulkAction(action) {
            if (confirm('Are you sure you want to perform this action on selected leads?')) {
                $('#bulk_action').val(action);
                $('#bulk_actions_contact_request_form').submit();
            }
        }

        function setBulkAction(action = 'delete') {
            $('#bulk_action').val(action);
        }

        function filterReadStatus(status) {
            $('#read_lead').val(status);
            $('#search_form').submit();
        }
    </script>
    <script>
        $(document).ready(function() {
            var searchInput = $('#search-box');

            // Initialize Typeahead
            searchInput.typeahead({
                minLength: 2, // Minimum characters before searching
                highlight: true
            }, {
                name: 'data',
                display: 'name', // Adjust according to API response
                source: function(query, syncResults, asyncResults) {
                    $.ajax({
                        url: '{{ route('search.in.leads') }}', // Backend PHP script
                        type: 'GET',
                        data: {
                            q: query
                        },
                        dataType: 'json',
                        success: function(data) {
                            asyncResults(data);
                        }
                    });
                }
            });
        });
    </script>
@endsection