@push('vendor-css')
     <link rel="stylesheet" href="{{ asset('assets/css/selectize/selectize.default.min.css') }}" />
     <style>
         .status-icon {
             margin-top: 0.6rem;
         }
     </style>
 @endpush
 <div class="row">
     @can('first-name')
         <div class="col-md-3 my-2">
             <label for="first_name" class="fw-bold form-label">First Name</label>
             <input type="text" id="first_name" class="form-control " name="first_name" placeholder="Customer First Name"
                 value="{{ request()->input('first_name') }}" />
         </div>
     @endcan

     @can('last-name')
         <div class="col-md-3 my-2">
             <label for="last_name" class="fw-bold form-label">Last Name</label>
             <input type="text" id="last_name" class="form-control " name="last_name" placeholder="Customer Last Name"
                 value="{{ request()->input('last_name') }}" />
         </div>
     @endcan

     @can('full-name')
         <div class="col-md-3 my-2">
             <label for="full_name" class="fw-bold form-label">Full/First & Last Name</label>
             <input type="text" id="full_name" class="form-control" name="full_name" placeholder="Customer Full Name"
                 value="{{ request()->input('full_name') }}" />
         </div>
     @endcan
     @can('by-carrier')
         <div class="col-md-3 my-2">
             <label for="carrier_id" class="fw-bold form-label">By Carrier</label>
             <select class="selectize" id="carrier_id" name="carrier_id[]" multiple>
                 @foreach ($carriers as $carrier)
                     <option value="{{ $carrier->id }}"
                         {{ request()->has('carrier_id') && in_array($carrier->id, request()->input('carrier_id')) ? 'selected' : '' }}>
                         {{ $carrier->name }}</option>
                 @endforeach
             </select>
         </div>
     @endcan
     @can('by-product')
         <div class="col-md-3 my-2">
             <label for="product_id" class="fw-bold form-label">By Product</label>
             <select class="selectize" id="product_id" name="product_id[]" multiple>
             </select>
         </div>
     @endcan
     @can('policy-no')
         <div class="col-md-3 my-2">
             <label for="policy" class="fw-bold form-label">Policy # </label>
             <input type="text" id="policy_number" value="{{ request()->input('policy_number') }}" class="form-control "
                 name="policy_number" placeholder="" />
         </div>
     @endcan
     @can('sale-type')
         <div class="col-md-3 my-2">
             <label for="sale_type" class="fw-bold form-label">Sale Type</label>
             <select class="form-select" id="sale_type" name="sale_type">
                 <option value="">Select</option>
                 <option value="New Sale"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'New Sale' ? 'selected' : '' }}>
                     New Sale</option>
                 <option value="Resell"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Resell' ? 'selected' : '' }}>
                     Resell</option>
                 <option value="Rewrite"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Rewrite' ? 'selected' : '' }}>
                     Rewrite</option>
                 <option value="Bad Bank Fixed"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Bad Bank Fixed' ? 'selected' : '' }}>
                     Bad Bank Fixed</option>
                 <option value="NSF Fixed"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'NSF Fixed' ? 'selected' : '' }}>
                     NSF Fixed</option>
                 <option value="Drop Fixed"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Drop Fixed' ? 'selected' : '' }}>
                     Drop Fixed</option>
                 <option value="Declined Fixed"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Declined Fixed' ? 'selected' : '' }}>
                     Declined Fixed</option>
                 <option value="Underwriting Fixed"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Underwriting Fixed' ? 'selected' : '' }}>
                     Underwriting Fixed</option>
                 <option value="Cancel Re-enstate"
                     {{ request()->has('sale_type') && request()->input('sale_type') == 'Cancel Re-enstate' ? 'selected' : '' }}>
                     Cancel Re-enstate</option>
             </select>
         </div>
     @endcan

     @can('application-date')
         <div class="col-md-3 my-2">
             <label for="application_date" class="fw-bold form-label">Application Date</label>
             <input type="text" class="form-control contact-number  dateRange" name="application_date"
                 placeholder="01/01/2018 - 01/15/2018" id="application_date"
                 value="{{ $filters['application_date'] ?? '' }}" autocomplete="off" />
         </div>
     @endcan

     @can('initial-draft-date')
         <div class="col-md-3 my-2">
             <label for="initial_draft_date" class="fw-bold form-label">Initial Draft Date</label>
             <input type="text" class="form-control contact-number  dateRange" name="initial_draft_date"
                 placeholder="01/01/2018 - 01/15/2018" id="initial_draft_date" autocomplete="off"
                 value="{{ $filters['initial_draft_date'] ?? '' }}" />
         </div>
     @endcan

     @can('future-draft-date')
         <div class="col-md-3 my-2">
             <label for="future_draft_date" class="fw-bold form-label">Future Draft Date</label>
             <input type="text" class="form-control contact-number  future_draft_date" name="future_draft_date"
                 placeholder="MM/DD" id="future_draft_date" autocomplete="off"
                 value="{{ $filters['future_draft_date'] ?? '' }}" />
         </div>
     @endcan

     @can('dob')
         <div class="col-md-3 my-2">
             <label for="dob" class="fw-bold form-label">DOB</label>
             <input type="text" class="form-control contact-number dateRange" name="dob"
                 placeholder="01/01 - 01/15" id="dob" autocomplete="off" value="{{ $filters['dob'] ?? '' }}" />
         </div>
     @endcan

     @can('updated-at')
         <div class="col-md-3 my-2">
             <label for="updated_at" class="fw-bold form-label">Updated At</label>
             <input type="text" class="form-control contact-number  dateRange" name="updated_at"
                 placeholder="01/01/2018 - 01/15/2018" id="updated_at" autocomplete="off"
                 value="{{ $filters['updated_at'] ?? '' }}" />
         </div>
     @endcan
     @can('paid-unpaid')
         <div class="col-md-3 my-2">
             <label for="Paid/Unpaid" class="fw-bold form-label">Paid/Unpaid</label>
             <select class="selectize" id="payment_status" name="payment_status[]" multiple>
                 <option value="">Select</option>
                 <option value="Client Paid-Payment Received"
                     {{ request()->has('payment_status') && in_array('Client Paid-Payment Received', request()->input('payment_status')) ? 'selected' : '' }}>
                     Paid</option>
                 <option value="Client Unpaid-Company Paid"
                     {{ request()->has('payment_status') && in_array('Client Unpaid-Company Paid', request()->input('payment_status')) ? 'selected' : '' }}>
                     Unpaid</option>
             </select>
         </div>
     @endcan

     @can('by-agency')
         <div class="col-md-3 my-2">
             <label for="agency_Id" class="fw-bold form-label">By Agency</label>
             <select class="selectize" id="agency_Id" name="agency_Id[]" multiple>
                 <option value="">Select one</option>
                 @foreach ($agencies as $agency)
                     <option value="{{ $agency->unique_id }}"
                         {{ request()->has('agency_Id') && in_array($agency->unique_id, request()->input('agency_Id')) ? 'selected' : '' }}>
                         {{ $agency->name }}
                     </option>
                 @endforeach
             </select>
         </div>
     @endcan

     @can('by-office-admin')
         <div class="col-md-3 my-2">
             <label for="office_adminId" class="fw-bold form-label">By Office Admin</label>
             <select class="selectize" id="office_adminId" name="office_adminId[]" multiple>
                 <option value="">Select one</option>
                 @foreach ($office_admins as $office_admin)
                     <option value="{{ $office_admin->unique_id }}"
                         {{ request()->has('office_adminId') && in_array($office_admin->unique_id, request()->input('office_adminId')) ? 'selected' : '' }}>
                         {{ $office_admin->name }}
                     </option>
                 @endforeach
             </select>
         </div>
     @endcan
     @can('by-office-manager')
         <div class="col-lg-3 my-2">
             <label for="office_managerId" class="fw-bold form-label">By Office Manager</label>
             <select class="selectize" id="office_managerId" name="office_managerId[]" multiple>
                 <option value="">Select Office Manager</option>
                 @foreach ($officeManagers as $officeManager)
                     <option value="{{ $officeManager->unique_id }}"
                         {{ request()->has('office_managerId') && in_array($officeManager->unique_id, request()->input('office_managerId')) ? 'selected' : '' }}>
                         {{ $officeManager->name }}
                     </option>
                 @endforeach
             </select>
         </div>
     @endcan
     @can('by-agent')
         <div class="col-md-3 my-2">
             <label for="By Agent" class="fw-bold form-label">By Agent</label>
             <select class="selectize" id="agentId" name="agentId[]" multiple>
                 <option value="">Select one</option>
                 @foreach ($agents as $agent)
                     <option value="{{ $agent->unique_id }}"
                         {{ request()->has('agentId') && in_array($agent->unique_id, request()->input('agentId')) ? 'selected' : '' }}>
                         {{ $agent->name }}</option>
                 @endforeach
             </select>
         </div>
     @endcan

     @can('by-client')
         <div class="col-md-3 my-2">
             <label for="by_client" class="fw-bold form-label">By Client</label>
             <select id="by_client" name="by_client[]" multiple>
                 <option value="">Select client</option>

             </select>
         </div>
     @endcan
     @can('age')
         <div class="col-md-3 my-2">
             <label for="policy" class="fw-bold form-label">Age # </label>

             <div class="row">
                 <div class="col-md-6">
                     <input type="number" id="min_age" value="{{ request()->input('min_age') }}"
                         class="form-control " name="min_age" placeholder="min" />
                 </div>
                 <div class="col-md-6">
                     <input type="number" id="max_age" value="{{ request()->input('max_age') }}"
                         class="form-control " name="max_age" placeholder="max" />
                 </div>
             </div>
         </div>
     @endcan

     @can('welcome-letter')
         <div class="col-md-3 my-2">
             <label for="welcome_letter_returned" class="fw-bold form-label">Welcome Letter
                 Returned</label>
             <select class="form-select" id="welcome_letter_returned" name="welcome_letter_returned">
                 <option value="">Select one</option>
                 <option value="Yes" {{ request()->input('welcome_letter_returned') == 'Yes' ? 'selected' : '' }}>
                     Yes</option>
                 <option value="No" {{ request()->input('welcome_letter_returned') == 'No' ? 'selected' : '' }}>
                     No</option>
             </select>
         </div>
     @endcan

     @can('permission-tcpa')
         <div class="col-md-3 my-2">
             <label for="permission_with_tcpa_compliance" class="fw-bold form-label">Permission
                 With
                 TCPA Compliance</label>
             <select class="form-select" id="permission_with_tcpa_compliance" name="permission_with_tcpa_compliance">
                 <option value="">Select one</option>
                 <option value="Yes"
                     {{ request()->input('permission_with_tcpa_compliance') == 'Yes' ? 'selected' : '' }}>
                     Yes</option>
                 <option value="No"
                     {{ request()->input('permission_with_tcpa_compliance') == 'No' ? 'selected' : '' }}>
                     No</option>
             </select>
         </div>
     @endcan

     @can('banking-codes')
         <div class="col-md-3 my-2">
             <label for="banking_codes" class="fw-bold form-label">Banking
                 Codes(198,101,103)</label>
             <select class="selectize" id="banking_codes" name="banking_codes[]" multiple>
                 <option value="">Select one</option>
                 <option value="198" {{ in_array('198', request('banking_codes', [])) ? 'selected' : '' }}>
                     198</option>
                 <option value="101" {{ in_array('101', request('banking_codes', [])) ? 'selected' : '' }}>
                     101</option>
                 <option value="103" {{ in_array('103', request('banking_codes', [])) ? 'selected' : '' }}>
                     103</option>
             </select>
         </div>
     @endcan

     @can('marketer-id')
         <div class="col-md-3 my-2">
             <div class="select2-primary">
                 <label for="marketerId" class="fw-bold form-label">Marketer Id</label>
                 <select id="marketerId" class="selectize" name="marketerId[]" multiple>
                     <option value="">select</option>
                     @foreach ($marketers as $marketer)
                         <option value="{{ $marketer->unique_id }}"
                             {{ in_array($marketer->unique_id, request('marketerId', [])) ? 'selected' : '' }}>
                             {{ $marketer->unique_id }}
                         </option>
                     @endforeach
                 </select>
             </div>
         </div>
     @endcan
     @can('conservation-admin-id')
         <div class="col-md-3 my-2">
             <div class="select2-primary">
                 <label for="conservation_adminId" class="fw-bold form-label">Conservation Admin
                     Id</label>
                 <select id="conservation_adminId" class="selectize" name="conservation_adminId[]" multiple>
                     <option value="">select</option>
                     @foreach ($conservationAdmins as $con_admin)
                         <option value="{{ $con_admin->unique_id }}"
                             {{ in_array($con_admin->unique_id, request('conservation_adminId', [])) ? 'selected' : '' }}>
                             {{ $con_admin->unique_id }}
                         </option>
                     @endforeach
                 </select>
             </div>
         </div>
     @endcan

     @can('conservation-agent-id')
         <div class="col-lg-3 my-2">
             <label for="conservation_agentId" class="fw-bold form-label">Conservation Agent
                 Id</label>
             <select id="conservation_agentId" class="selectize" name="conservation_agentId[]" multiple>
                 <option value="">select</option>
                 @foreach ($conservationAgents as $con_agent)
                     <option value="{{ $con_agent->unique_id }}"
                         {{ in_array($con_agent->unique_id, request('conservation_agentId', [])) ? 'selected' : '' }}>
                         {{ $con_agent->unique_id }}
                     </option>
                 @endforeach
             </select>
         </div>
     @endcan
     @can('lead-id')
         <div class="col-md-3 my-2">
             <label for="leadId" class="fw-bold form-label">Lead Id</label>
             <input type="text" id="leadId" value="{{ request()->input('leadId') }}" class="form-control"
                 name="leadId" placeholder="Lead Id" />
         </div>
     @endcan
     @can('lead-source')
         <div class="col-md-3 my-2">
             <label for="lead_source" class="fw-bold form-label">Lead Source</label>
             <div class="select2-primary">
                 <select id="lead_source" class="selectize" name="lead_source[]" multiple>
                     <option value="">Select</option>
                     <option value="Verifiers" {{ in_array('Verifiers', request('lead_source', [])) ? 'selected' : '' }}>
                         Verifiers
                     </option>
                     <option value="CPA Inxfer"
                         {{ in_array('CPA Inxfer', request('lead_source', [])) ? 'selected' : '' }}>
                         CPA Inxfer
                     </option>
                     <option value="Internet lead"
                         {{ in_array('Internet lead', request('lead_source', [])) ? 'selected' : '' }}>
                         Internet lead
                     </option>
                     <option value="Inbound lead"
                         {{ in_array('Inbound lead', request('lead_source', [])) ? 'selected' : '' }}>
                         Inbound lead
                     </option>
                     <option value="TV Lead" {{ in_array('TV Lead', request('lead_source', [])) ? 'selected' : '' }}>
                         TV Lead
                     </option>
                     <option value="Avatar" {{ in_array('Avatar', request('lead_source', [])) ? 'selected' : '' }}>
                         Avatar
                     </option>
                     <option value="AI" {{ in_array('AI', request('lead_source', [])) ? 'selected' : '' }}>
                         AI
                     </option>
                     <option value="Internal Transfer"
                         {{ in_array('Internal Transfer', request('lead_source', [])) ? 'selected' : '' }}>
                         Internal Transfer
                     </option>
                     <option value="Callback" {{ in_array('Callback', request('lead_source', [])) ? 'selected' : '' }}>
                         Callback
                     </option>
                     <option value="Fronter" {{ in_array('Fronter', request('lead_source', [])) ? 'selected' : '' }}>
                         Fronter
                     </option>
                     <option value="Google Ads"
                         {{ in_array('Google Ads', request('lead_source', [])) ? 'selected' : '' }}>
                         Google Ads
                     </option>
                     <option value="Referrals" {{ in_array('Referrals', request('lead_source', [])) ? 'selected' : '' }}>
                         Referrals
                     </option>
                     <option value="Facebook" {{ in_array('Facebook', request('lead_source', [])) ? 'selected' : '' }}>
                         Facebook
                     </option>
                     <option value="Selfgen" {{ in_array('Selfgen', request('lead_source', [])) ? 'selected' : '' }}>
                         Self-Gen
                     </option>
                 </select>
             </div>
         </div>
     @endcan
     @can('primary-contact')
         <div class="col-md-3 my-2">
             <label for="primary_contact" class="fw-bold form-label">Primary Contact</label>
             <div class="input-group">
                 <span class="input-group-text">US
                     (+1)</span>
                 <input type="text" class="form-control contact-number " id="primary_contact" name="primary_contact"
                     value="{{ request()->input('primary_contact') }}" placeholder="Primary Contact" />
             </div>
         </div>
     @endcan
     @can('secondary-contact')
         <div class="col-md-3 my-2">
             <label for="secondary_contact" class="fw-bold form-label">Secondary Contact</label>
             <div class="input-group">
                 <span class="input-group-text">US
                     (+1)</span>
                 <input type="text" class="form-control contact-number " id="secondary_contact"
                     name="secondary_contact" placeholder="Secondary Contact"
                     value="{{ request()->input('secondary_contact') }}" />
             </div>
         </div>
     @endcan
     @can('other-contact')
         <div class="col-md-3 my-2">
             <label for="other_contact" class="fw-bold form-label">Other Contact</label>
             <div class="input-group">
                 <span class="input-group-text">US
                     (+1)</span>
                 <input type="text" class="form-control contact-number " id="other_contact" name="other_contact"
                     placeholder="Other Contact" value="{{ request()->input('other_contact') }}" />
             </div>
         </div>
     @endcan

     @can('date-range')
         <div class="col-md-3 my-2">
             <label for="date_range" class="fw-bold form-label">Filter By Date Range</label>
             <input type="text" class="form-control contact-number m dateRange" name="date_range"
                 placeholder="01/01/2018 - 01/15/2018" id="date_range" autocomplete="off"
                 value="{{ $filters['date_range'] ?? '' }}" />
         </div>
     @endcan

     @can('source-of-income')
         <div class="col-lg-3 my-2">
             <label for="source_of_income" class="fw-bold form-label">Source of Income</label>
             <select class="form-select" id="source_of_income" name="source_of_income">
                 <option value="">Select</option>
                 <option value="Disability"
                     {{ request()->has('source_of_income') && request()->input('source_of_income') == 'Disability' ? 'selected' : '' }}>
                     Disability (1st of Every Month)</option>
                 <option value="SocialSecurity"
                     {{ request()->has('source_of_income') && request()->input('source_of_income') == 'SocialSecurity' ? 'selected' : '' }}>
                     Social Security Billing (1st or
                     3rd Date or 2nd, 3rd or 4th Wednesday of Month)</option>
                 <option value="Employed"
                     {{ request()->has('source_of_income') && request()->input('source_of_income') == 'Employed' ? 'selected' : '' }}>
                     Employed (Any date provided by
                     Customer except Holidays, Bank Holidays, Sat/Sun)</option>
                 <option value="Retired"
                     {{ request()->has('source_of_income') && request()->input('source_of_income') == 'Retired' ? 'selected' : '' }}>
                     Retired or Self Employed</option>
             </select>
         </div>
     @endcan

     @can('dublicate-contact-ssn')
         <div class="col-lg-3 my-2">
             <label for="duplicate_check" class="fw-bold form-label">Duplicate Contact/SSN</label>
             <select class="form-select" id="duplicate_check" name="duplicate_check">
                 <option value="">Select</option>
                 <option value="duplicate_contact"
                     {{ request()->has('duplicate_check') && request()->input('duplicate_check') == 'duplicate_contact' ? 'selected' : '' }}>
                     Duplicate Contact</option>
                 <option value="duplicate_ssn"
                     {{ request()->has('duplicate_check') && request()->input('duplicate_check') == 'duplicate_ssn' ? 'selected' : '' }}>
                     Duplicate SSN</option>
                 <option value="both"
                     {{ request()->has('duplicate_check') && request()->input('duplicate_check') == 'both' ? 'selected' : '' }}>
                     Both</option>
             </select>
         </div>
     @endcan


     @can('conservation-action')
         <div class="col-lg-3 my-2">
             <label for="conservation_action" class="fw-bold form-label">Conservation Action</label>
             <select class="form-select" id="conservation_action" name="conservation_action">
                 <option value="">Select</option>
                 <option value="Fixed"
                     {{ request()->has('conservation_action') && request()->input('conservation_action') == 'Fixed' ? 'selected' : '' }}>
                     Fixed</option>
                 <option value="Rewrite"
                     {{ request()->has('conservation_action') && request()->input('conservation_action') == 'Rewrite' ? 'selected' : '' }}>
                     Rewrite</option>
                 <option value="Both"
                     {{ request()->has('conservation_action') && request()->input('conservation_action') == 'Both' ? 'selected' : '' }}>
                     Both</option>
             </select>
         </div>
     @endcan

     @can('lead-status')
         <div class="col-lg-3 my-2">
             <label for="lead_status" class="fw-bold form-label">Lead Status</label>
             <select class="form-select" id="lead_status" name="lead_status">
                 <option value="">Select</option>
                 <option value="Active"
                     {{ request()->has('lead_status') && request()->input('lead_status') == 'Active' ? 'selected' : '' }}>
                     Active</option>
                 <option value="Disabled"
                     {{ request()->has('lead_status') && request()->input('lead_status') == 'Disabled' ? 'selected' : '' }}>
                     Disabled</option>
             </select>
         </div>
     @endcan

     @can('lead-type')
         <div class="col-lg-3 my-2">
             <label for="lead_type" class="fw-bold form-label">Lead Type</label>
             <select class="selectize" id="lead_type" name="lead_type[]" multiple>
                 <option value="">Select</option>
                 <option value="FE"
                     {{ request()->has('lead_type') && request()->input('lead_type') == 'FE' ? 'selected' : '' }}>
                     FE</option>
                 <option value="ACA"
                     {{ request()->has('lead_type') && request()->input('lead_type') == 'ACA' ? 'selected' : '' }}>
                     ACA</option>
                 <option value="HI"
                     {{ request()->has('lead_type') && request()->input('lead_type') == 'HI' ? 'selected' : '' }}>
                     HI</option>
                 <option value="Medicare"
                     {{ request()->has('lead_type') && request()->input('lead_type') == 'Medicare' ? 'selected' : '' }}>
                     Medicare</option>
                 <option value="Dental"
                     {{ request()->has('lead_type') && request()->input('lead_type') == 'Dental' ? 'selected' : '' }}>
                     Dental</option>
             </select>
         </div>
     @endcan


     @can('conservation-date')
         <div class="col-md-3 my-2">
             <label for="conservation_action_date" class="fw-bold form-label">Conservation Agent Action Date</label>
             <input type="text" class="form-control contact-number dateRange" name="conservation_action_date"
                 placeholder="01/01/2018 - 01/15/2018" id="conservation_action_date"
                 value="{{ $filters['conservation_action_date'] ?? '' }}" autocomplete="off" />
         </div>
     @endcan

     @can('monthly-premium')
         <div class="col-md-3 my-2">
             <label for="monthly_premium" class="fw-bold form-label">Monthly Premium</label>

             <div class="row">
                 <div class="col-md-6">
                     <input type="number" id="min_monthly" value="{{ request()->input('min_monthly') }}"
                         class="form-control " name="min_monthly" placeholder="Minimum" />
                 </div>
                 <div class="col-md-6">
                     <input type="number" id="max_monthly" value="{{ request()->input('max_monthly') }}"
                         class="form-control " name="max_monthly" placeholder="Maximum" />
                 </div>
             </div>
         </div>
     @endcan

     @can('face-amount')
         <div class="col-md-3 my-2">
             <label for="face_amount" class="fw-bold form-label">Face Amount</label>

             <div class="row">
                 <div class="col-md-6">
                     <input type="number" id="min_face" value="{{ request()->input('min_face') }}"
                         class="form-control " name="min_face" placeholder="Minimum" />
                 </div>
                 <div class="col-md-6">
                     <input type="number" id="max_face" value="{{ request()->input('max_face') }}"
                         class="form-control " name="max_face" placeholder="Maximum" />
                 </div>
             </div>
         </div>
     @endcan
     @can('disposition-change')

         <div class="col-md-3 my-2">
             <label for="disposition_change" class="fw-bold form-label">Disposition Change</label>

             <div class="row">
                 <div class="col-md-6">
                     <select id="disposition_from" name="disposition_from" class="form-control">
                         <option value="">From</option>
                         @foreach ($dispositions as $disposition)
                             <option value="{{ $disposition->value }}">{{ $disposition->value }}</option>
                         @endforeach
                     </select>
                 </div>
                 <div class="col-md-6">
                     <select id="disposition_to" name="disposition_to" class="form-control">
                         <option value="">To</option>
                         @foreach ($dispositions as $disposition)
                             <option value="{{ $disposition->value }}">{{ $disposition->value }}</option>
                         @endforeach
                     </select>
                 </div>
             </div>
         </div>
     @endcan
     @can('conservation-admin-assign-check')
         <div class="col-lg-3 my-2">
             <label for="assign_check" class="fw-bold form-label">Conservation Admin Assign Check</label>
             <select class="form-select" id="assign_check" name="assign_check">
                 <option value="">Select</option>
                 <option value="Assign"
                     {{ request()->has('assign_check') && request()->input('assign_check') == 'Assign' ? 'selected' : '' }}>
                     Assign</option>
                 <option value="Not-Assign"
                     {{ request()->has('assign_check') && request()->input('assign_check') == 'Not-Assign' ? 'selected' : '' }}>
                     Not-Assign</option>
             </select>
         </div>
     @endcan
     @can('assign-notassign-agent-filter')
         <div class="col-lg-3 my-2">
             <label for="assignedNotLeads" class="fw-bold form-label">Assigned/Not Assigned Leads To Any Agent</label>
             <select class="form-select" id="assignedNotLeads" name="assignedNotLeads">
                 <option value="">Select</option>
                 <option value="Assigned"
                     {{ request()->has('assignedNotLeads') && request()->input('assignedNotLeads') == 'Assigned' ? 'selected' : '' }}>
                     Assigned</option>
                 <option value="Not-Assigned"
                     {{ request()->has('assignedNotLeads') && request()->input('assignedNotLeads') == 'Not-Assigned' ? 'selected' : '' }}>
                     Not-Assigned</option>
             </select>
         </div>
     @endcan
     @can('conservation-admin-leads-filter')
         <div class="col-lg-3 my-2">
             <label for="conservation_admin_leads" class="fw-bold form-label">Conservation Admin Leads</label>
             <select class="selectize" id="conservation_admin_leads" name="conservation_admin_leads">
                 <option value="">Select</option>
                 <option value="Fixed"
                     {{ request()->has('conservation_admin_leads') && request()->input('conservation_admin_leads') == 'Fixed' ? 'selected' : '' }}>
                     Fixed</option>
                 <option value="Assigned"
                     {{ request()->has('conservation_admin_leads') && request()->input('conservation_admin_leads') == 'Assigned' ? 'selected' : '' }}>
                     Assigned</option>
                 <option value="Latest"
                     {{ request()->has('conservation_admin_leads') && request()->input('conservation_admin_leads') == 'Latest' ? 'selected' : '' }}>
                     Latest</option>
             </select>
         </div>
     @endcan
     @can('view-older-leads')
         <div class="col-lg-3 my-2">
             <label for="older_leads" class="fw-bold form-label">Older Leads</label>
             <select class="selectize" id="older_leads" name="older_leads">
                 <option value="">Select</option>
                 <option value="1" {{ request()->input('older_leads') == '1' ? 'selected' : '' }}>Older than 6
                     months</option>
             </select>
         </div>
     @endcan
     @can('to-do-list-assignment')
         <div class="col-lg-3 my-2">
             <label for="todolist_flag" class="fw-bold form-label">To-Do List Assignment</label>
             <select class="selectize" id="todolist_flag" name="todolist_flag">
                 <option value="">Select</option>
                 <option value="1" {{ request('todolist_flag') == '1' ? 'selected' : '' }}>Assigned to Agent
                 </option>
                 <option value="2" {{ request('todolist_flag') == '2' ? 'selected' : '' }}>Assigned to Marketer
                 </option>
             </select>
         </div>
         {{-- @endcan --}}
     @endcan
     @can('status')
         {{-- @hasanyrole('Super Admin|Agent|Agency|Agency Admin|Office Admin|Agency User|Conservation Admin|Conservation
             Agent|Office Manager') --}}
            @unlessrole('Marketer|Moderator')
             <div class="col-md-12 my-2">
                 <label for="status" class="fw-bold form-label">Status</label>
                 <div class="row">
                     <div class="col-md-12">
                         <select id="status" name="status[]" multiple>
                             <option value="">Select status</option>
                             @foreach ($dispositions as $disposition)
                                 <option value="{{ $disposition->value }}"
                                     {{ request()->has('status') && in_array($disposition->value, request()->input('status')) ? 'selected' : '' }}>
                                     {{ $disposition->value }}</option>
                             @endforeach
                         </select>
                     </div>
                     <div class="col-md-12 mt-2">

                         <button class="btn btn-primary cursor-pointer status-icon" type="button"
                             title="Before Approval Clients-Issues"
                             data-values='[
                                                "Not Submitted",
                                                "Not Submitting Bank Error 103",
                                                "VA Needed",
                                                "Declined", 
                                                "Underwriting Review",
                                                "NEEDS REVIEW: Banking Error",
                                                "Amendment Needed",
                                                "Amendment Sent"
                                            ]'>
                             Before Approval Clients-Issues
                         </button>

                         <button class="btn btn-primary cursor-pointer status-icon" type="button"
                             title="Before First Draft Issues"
                             data-values='["NSF", "Invalid Account", "Canceled - Client Request"]'>
                             Before First Draft Issues
                         </button>

                         <button class="btn btn-primary cursor-pointer status-icon" type="button"
                             title="Active Clients Issues"
                             data-values='["NSF", "Invalid Account", "Canceled - Client Request", "Death Claim Paid"]'>
                             Active Clients Issues
                         </button>

                         <button class="btn btn-primary cursor-pointer status-icon" type="button"
                             title="Long-Term Active Clients Issues"
                             data-values='["NSF", "Invalid Account", "Canceled - Client Request", "Death Claim Paid"]'>
                             Long-Term Active Clients Issues
                         </button>

                         <button class="btn btn-primary cursor-pointer status-icon" type="button" title="Unpaid"
                             data-values='[
                                                "Approved",
                                                "Approved other than Applied",
                                                "Client Paid-Company Unpaid",
                                                "NSF-Fix Requested",
                                                "NSF Request-Email Sent",
                                                "NSF-Fix Requested through Phone Call",
                                                "NSF-Fix Settled",
                                                "Account Updated",
                                                "Account Request-Email Sent",
                                                "Account Fix Requested over the Phone Call",
                                                "Account Updated Settled",
                                                "Cancel Fix Request Submitted",
                                                "Cancellation Request Fixed Email Sent",
                                                "Cancellation Request Fixed Through Phone",
                                                "Cancellation Request Settled"
                                            ]'>
                             Unpaid
                         </button>

                         <button class="btn btn-primary cursor-pointer status-icon" type="button" title="Paid"
                             data-values='[
                                                "Client Paid-Payment Received",
                                                "Fixed - NSF Fix Requested",
                                                "Fixed - Account Updated",
                                                "Fixed Cancellation Request"
                                            ]'>
                             Paid
                         </button>
                         @foreach ($filterButtons as $button)
                             <button class="btn btn-{{ $button->color }} cursor-pointer status-icon" type="button"
                                 title="{{ $button->name }}" data-values='@json($button->values)'>
                                 {{ $button->name }}
                             </button>
                         @endforeach
                         <button class="btn btn-danger mt-2" id="clear-status" type="button" title="Clear Selection">
                             <i class="ti ti-brand-xamarin"></i>
                         </button>
                     </div>
                 </div>
             </div>
         {{-- @endhasanyrole --}}
         @endunlessrole
         @hasanyrole('Marketer')
             <div class="col-md-3 my-2">
                 <label for="status" class="fw-bold form-label">Status</label>
                 <select class="selectize" id="status" name="status[]" multiple>
                     <option value="">Select status</option>
                     @foreach ($dispositions as $disposition)
                         @if ($disposition->value !== 'Client Paid-Payment Received' && $disposition->value !== 'Client Unpaid-Company Paid')
                             <option value="{{ $disposition->value }}"
                                 {{ request()->has('status') && in_array($disposition->value, request()->input('status')) ? 'selected' : '' }}>
                                 {{ $disposition->value }}</option>
                         @endif
                     @endforeach
                 </select>
             </div>
         @endhasanyrole
     @endcan

 </div>
 @push('vendor-js')
     <script src="{{ asset('assets/js/selectize/selectize.min.js') }}"></script>
     <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>
     <script>
         // $('.selectize').selectize();
         $('.selectize').selectize({
             plugins: ['remove_button'],
             create: true,
             valueField: 'value',
             labelField: 'text',
             searchField: ['text'],
             options: [],
             persist: false
         });
     </script>
 @endpush
 @push('page-js')
     <script>
         let timeout;
         $(document).on("change", "#carrier_id", function() {
             var id = $(this).val();
             if (id.length > 0) {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
                     $.ajax({
                         url: "{{ route('leads.get-products') }}",
                         type: 'GET',
                         data: {
                             id: id
                         },
                         success: function(response) {
                             // Reinitialize Selectize on #product_id after the options are loaded
                             var $productSelect = $('#product_id').selectize()[0].selectize;
                             $productSelect.clearOptions(); // Clear current options
                             $.each(response.products, function(index, product) {
                                 $productSelect.addOption({
                                     value: product.id,
                                     text: product.name
                                 });
                             });
                             $productSelect.refreshOptions(); // Refresh with new options
                         },
                         error: function(xhr) {
                             console.log(xhr.responseText);
                         }
                     });
                 }, 300);
             } else {
                 // Clear and reinitialize Selectize if no carrier is selected
                 var $productSelect = $('#product_id').selectize()[0].selectize;
                 $productSelect.clearOptions();
             }
         });


         // date range filter
         $('.dateRange').daterangepicker({
             opens: 'auto',
             drops: 'up',
             autoUpdateInput: false,
             showDropdowns: true,
             locale: {
                 cancelLabel: 'Clear'
             }
         });
         $('.dateRange').on('apply.daterangepicker', function(ev, picker) {
             $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
                 'DD/MM/YYYY'));
         });

         $('.dateRange').on('cancel.daterangepicker', function(ev, picker) {
             $(this).val('');
         });


         $('.future_draft_date').daterangepicker({
             singleDatePicker: true,
             showDropdowns: true,
             autoUpdateInput: false,
             locale: {
                 cancelLabel: 'Clear',
                 format: 'MM/DD'
             }
         }, function(start, end, label) {
             var formattedDate = start.format('MM/DD');
             $(this.element).val(formattedDate);
         });

         $('#dob').daterangepicker({
             autoUpdateInput: false,
             locale: {
                 format: 'MM/DD',
                 cancelLabel: 'Clear'
             },
             minDate: moment().startOf('year'),
             maxDate: moment().endOf('year'),
             dateLimit: {
                 months: 12
             },
         });


         $('#dob').on('apply.daterangepicker', function(ev, picker) {

             var start = picker.startDate.format('MM/DD');
             var end = picker.endDate.format('MM/DD');
             $(this).val(start + ' - ' + end);
         })

         $('#dob').on('cancel.daterangepicker', function(ev, picker) {
             $(this).val(''); // Clear the input field
         });



         if ($("#application_date").val() == 'null') {
             $("#application_date").val('');
         }
         if ($("#initial_draft_date").val() == 'null') {
             $("#initial_draft_date").val('');
         }
         if ($("#future_draft_date").val() == 'null') {
             $("#future_draft_date").val('');
         }
         if ($("#dob").val() == 'null') {
             $("#dob").val('');
         }
         if ($("#updated_at").val() == 'null') {
             $("#updated_at").val('');
         }
         if ($("#date_range").val() == 'null') {
             $("#date_range").val('');
         }
         if ($("#fixed_lead").val() == 'null') {
             $("#fixed_lead").val('');
         }





         @if (!empty($filters['application_date']))
             var applicationRange = $('#application_date').val();
             $('#application_date').daterangepicker({
                 locale: {
                     format: 'DD/MM/YYYY'
                 },
                 startDate: applicationRange ? applicationRange.split(' - ')[0] : moment().startOf('day'),
                 endDate: applicationRange ? applicationRange.split(' - ')[1] : moment().endOf('day')
             });
         @endif
         @if (!empty($filters['initial_draft_date']))
             var initialRange = $('#initial_draft_date').val();
             $('#initial_draft_date').daterangepicker({
                 locale: {
                     format: 'DD/MM/YYYY'
                 },
                 startDate: initialRange ? initialRange.split(' - ')[0] : moment().startOf('day'),
                 endDate: initialRange ? initialRange.split(' - ')[1] : moment().endOf('day')
             });
         @endif
         @if (!empty($filters['future_draft_date']))
             var futureDraftDate = $('#future_draft_date').val();
             $('.future_draft_date').daterangepicker({
                 singleDatePicker: true,
                 showDropdowns: true,
                 autoUpdateInput: true,
                 locale: {
                     format: 'MM/DD'
                 },
                 startDate: futureDraftDate ? moment(futureDraftDate, 'MM/DD') : moment().startOf(
                     'day')
             });
         @endif
         // @if (!empty($filters['dob']))
         //     var dobRange = $('#dob').val();
         //     $('#dob').daterangepicker({
         //         locale: {
         //             format: 'DD/MM/YYYY'
         //         },
         //         startDate: dobRange ? dobRange.split(' - ')[0] : moment().startOf('day'),
         //         endDate: dobRange ? dobRange.split(' - ')[1] : moment().endOf('day')
         //     });
         // @endif
         @if (!empty($filters['updated_at']))
             var updateRange = $('#updated_at').val();
             $('#updated_at').daterangepicker({
                 locale: {
                     format: 'DD/MM/YYYY'
                 },
                 startDate: updateRange ? updateRange.split(' - ')[0] : moment().startOf('day'),
                 endDate: updateRange ? updateRange.split(' - ')[1] : moment().endOf('day')
             });
         @endif
         @if (!empty($filters['date_range']))
             var dateRange = $('#date_range').val();
             $('#date_range').daterangepicker({
                 locale: {
                     format: 'DD/MM/YYYY'
                 },
                 startDate: dateRange ? dateRange.split(' - ')[0] : moment().startOf('day'),
                 endDate: dateRange ? dateRange.split(' - ')[1] : moment().endOf('day')
             });
         @endif
     </script>
     <script>
         $('#by_client').selectize({
             plugins: ['remove_button'],
             valueField: 'ssn',
             labelField: 'ssn',
             searchField: 'ssn',
             maxOptions: 10,
             loadThrottle: 300,
             preload: true,
             create: false,
             load: function(query, callback) {

                 if (!query.length) return callback();
                 $.ajax({
                     url: '/lead-sections/search-clients',
                     type: 'GET',
                     dataType: 'json',
                     data: {
                         search: query,
                         limit: 10
                     },
                     success: function(res) {
                         callback(res.clients);
                     },
                     error: function() {
                         callback();
                     }
                 });
             }
         });
     </script>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             const allDispositions = @json($dispositions->map(fn($d) => ['value' => $d->value, 'text' => $d->value]));

             const $statusSelect = $('#status').selectize({
                 plugins: ['remove_button'],
                 maxItems: null,
                 options: allDispositions,
                 labelField: 'text',
                 valueField: 'value',
                 searchField: 'text',
                 create: false,
                 items: []
             });

             const selectizeInstance = $statusSelect[0].selectize;


             document.querySelectorAll(".status-icon").forEach(icon => {
                 icon.addEventListener("click", function() {
                     const selectedValues = JSON.parse(this.dataset.values);
                     selectizeInstance.setValue(selectedValues);
                 });
             });
             let clearStatus = document.getElementById("clear-status");

             if (clearStatus) {
                 clearStatus.addEventListener("click", function() {
                     selectizeInstance.clear();
                 });
             }
         });
     </script>
     <script>
         const fromSelect = document.getElementById('disposition_from');
         const toSelect = document.getElementById('disposition_to');

         if (fromSelect) {
             fromSelect.addEventListener('change', function() {
                 const fromValue = this.value;

                 // Loop through all "to" options and disable the one selected in "from"
                 Array.from(toSelect.options).forEach(option => {
                     option.disabled = option.value === fromValue && fromValue !== "";
                 });

                 // If the current "to" value matches "from", reset "to"
                 if (toSelect.value === fromValue) {
                     toSelect.value = "";
                 }
             });
         }
     </script>
 @endpush