@extends('layout.master_lead_layout')
@section('title', 'Search Data')
@section('page-classes', 'manage-job')
@section('content')
    <style>
        button.accordion:after {
            display: none;
        }

        .tags-input-wrapper {
            background: transparent;
            padding: 10px;
            border-radius: 4px;
            max-width: 400px;
            border: 1px solid #ccc
        }

        .tags-input-wrapper input {
            border: none;
            background: transparent;
            outline: none;
            margin-left: 8px;
        }

        .tags-input-wrapper .tag {
            display: inline-block;
            background-color: black;
            color: white;
            border-radius: 40px;
            padding: 0px 3px 0px 7px;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .tags-input-wrapper .tag a {
            margin: 0 7px 3px;
            display: inline-block;
            cursor: pointer;
        }
    </style>

    <div class="row main-row  d-flex justify-content-center">

        <div class="col-lg-12  tabcontent2" id="All-Jobs">
            <div class="row py-2">
                <div class="col-lg-3 fixed-cv table-div">
                    <div class=" tabcontent3 p-0">
                        <div class="states__table">
                            <form action="#" class="form" id="forms" method="POST">
                                <div class="second_col_display_div">

                                    <div class="bg-card pb-4 pb-5 px-3"
                                        style="background-color: #09141A !important; max-height: 70vh; scroll-behavior: smooth; overflow: scroll;">
                                        <div class="company__row my-3 row p-0 d-flex justify-content-center mt-3 pt-2">
                                            <input type="hidden" id="funding_section_hidden_value">
                                            <input type="hidden" id="buying_intent_hidden_value">
                                            <input type="hidden" id="temporary_field_data">
                                            <div class="col-lg-12">
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse" data-bs-target="#namecollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Name
                                                                </button>
                                                            </h2>
                                                            <div id="namecollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <input placeholder="Type here" type="text"
                                                                        name="" id="lg_person_name" value=""
                                                                        class="form-control keywords">

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#jobTitlecollapse" aria-expanded="false"
                                                                    aria-controls="collapseThree">
                                                                    Job Title
                                                                </button>
                                                            </h2>
                                                            <div id="jobTitlecollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <label for="" class="">Job Title</label>
                                                                    <select class="" multiple="multiple"
                                                                        style="width: 100%"
                                                                        aria-label=".form-select-lg example"
                                                                        name="job_title" id="job_title">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Companycollapse" aria-expanded="false"
                                                                    aria-controls="collapseThree">
                                                                    Company
                                                                </button>
                                                            </h2>
                                                            <div id="Companycollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <select class="" id="lg_company" multiple
                                                                        style="width: 100%"
                                                                        aria-label=".form-select-lg example" name="">
                                                                    </select>
                                                                </div>
                                                                <span class="m-2">Include list of companies</span>
                                                                <textarea name="lg_include_company" id="lg_include_company" class="form-control mx-auto d-block mb-2" style="width:83%;"
                                                                    rows="4"></textarea>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-primary mx-auto d-block mb-3"
                                                                    id="lg_include_company_btn">Search</button>
                                                                {{--                                                                <input type="file" class="form-control m-3" style="width:87%;" name="lg_include_company_file" id="lg_include_company_file"> --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#ExcludedCompanycollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Exclude Company
                                                                </button>
                                                            </h2>
                                                            <div id="ExcludedCompanycollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <select class="" id="lg_exclude_company"
                                                                        multiple style="width: 100%"
                                                                        aria-label=".form-select-lg example"
                                                                        name="">
                                                                    </select>
                                                                </div>
                                                                <span class="m-2">Parent Sheet URL</span>
                                                                <input type="hidden" name="lg_exclude_parent_link" id="lg_exclude_parent_link">
                                                                <input type="link" name="exclude_parent_link" id="exclude_parent_link"
                                                                    class="form-control" style="margin: 10px; width:92%;">
                                                                <span class="m-2">Blacklist Sheet URL</span>
                                                                <input type="link" name="exclude_blacklist_link" id="exclude_blacklist_link"
                                                                    class="form-control" style="margin: 10px; width:92%;">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-primary mx-auto d-block mt-3 mb-3"
                                                                    id="remove_exclude_company_btn">Remove</button>
                                                                {{--  <textarea name="lg_exclude_company_textarea" id="lg_exclude_company_textarea"
                                                                    class="form-control mx-auto d-block mb-2" style="width:83%;" rows="4"></textarea>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-primary mx-auto d-block mb-3"
                                                                    id="lg_exclude_company_btn">Search</button>  --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Locationcollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Location
                                                                </button>
                                                            </h2>
                                                            <div id="Locationcollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <label for="">Location</label>
                                                                    <select class="" id="locationValue"
                                                                        multiple="multiple" style="width: 100%"
                                                                        aria-label=".form-select-lg example"
                                                                        name="location">
                                                                        <option value="United States">United States
                                                                        </option>
                                                                        <option value="Americas">Americas</option>
                                                                        <option value="North America">North America
                                                                        </option>
                                                                        <option value="EMEA">EMEA</option>
                                                                        <option value="Dallas/Fort Worth Area">Dallas/Fort
                                                                            Worth Area</option>
                                                                        <option value="Greater Houston Area">Greater
                                                                            Houston Area</option>
                                                                        <option value="Europe">Europe</option>
                                                                        <option value="European Union">European Union
                                                                        </option>
                                                                        <option value="Germany">Germany</option>
                                                                        <option value="Miami / Fort Lauderable Area">Miami
                                                                            / Fort Lauderable Area</option>
                                                                        <option value="California">California, USA</option>
                                                                        <option value="India">India</option>
                                                                        <option value="United Kingdom">United Kingdom
                                                                        </option>
                                                                        <option value="Greater Denver Area">Greater Denver
                                                                            Area</option>
                                                                        <option value="San Fracisco Area">San Fracisco Area
                                                                        </option>
                                                                        <option value="Greater Los Angeles Area">Greater
                                                                            Los Angeles Area</option>
                                                                        <option value="Greater Philadelphia Area">Greater
                                                                            Philadelphia Area</option>
                                                                        <option value="Russia">Russia</option>
                                                                        <option value="Texas">Texas, USA</option>
                                                                        <option value="Greater New York Area">Greater New
                                                                            York Area</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Employeescollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Employees
                                                                </button>
                                                            </h2>
                                                            <div id="Employeescollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="0,10"
                                                                            id="Employees0">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees0">
                                                                            0-10&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="11,20"
                                                                            id="Employees11">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees11">
                                                                            11-20&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="21,50"
                                                                            id="Employees21">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees21">
                                                                            21-50&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="51,100"
                                                                            id="Employees51">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees51">
                                                                            51-100&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="101,200"
                                                                            id="Employees101">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees101">
                                                                            101-200&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="201,500"
                                                                            id="Employees201">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees201">
                                                                            201-500&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="501,1000"
                                                                            id="Employees501">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees501">
                                                                            501-1000&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="1001,2000"
                                                                            id="Employees1001">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees1001">
                                                                            1001-2000&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="2001,5000"
                                                                            id="Employees2001">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees2001">
                                                                            2001-5000&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="5001,10000"
                                                                            id="Employees5001">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees5001">
                                                                            5001-10000&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="employees_range" value="10001"
                                                                            id="Employees10001">
                                                                        <label class="form-check-label mt-1"
                                                                            for="Employees10001">
                                                                            10001+&nbsp;&nbsp;<span
                                                                                class="text-muted f-13">(2.2M)</span>
                                                                        </label>
                                                                    </div>

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

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Tagscollapse" aria-expanded="false"
                                                                    aria-controls="collapseThree">
                                                                    Tags
                                                                </button>
                                                            </h2>
                                                            <div id="Tagscollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <input type="text" class="form-control"
                                                                        id="tag-input1" style="width:90% !important;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#person_senioritiesscollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Person seniorities
                                                                </button>
                                                            </h2>
                                                            <div id="person_senioritiesscollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="owner"
                                                                            id="ownerDefault">
                                                                        <label class="form-check-label mt-1"
                                                                            for="ownerDefault">
                                                                            Owner&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="founder"
                                                                            id="founderheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="founderheckChecked">
                                                                            Founder&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="c_suite"
                                                                            id="c_suiteCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="c_suiteCheckChecked">
                                                                            C Suite&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="partner"
                                                                            id="partnerflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="partnerflexCheckChecked">
                                                                            Partner&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="vp"
                                                                            id="vpflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="vpflexCheckChecked">
                                                                            Vp&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="head"
                                                                            id="headflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="headflexCheckChecked">
                                                                            Head&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="director"
                                                                            id="directorflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="directorflexCheckChecked">
                                                                            Director&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="manager"
                                                                            id="managerflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="managerflexCheckChecked">
                                                                            Manager&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="senior"
                                                                            id="seniorflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="seniorflexCheckChecked">
                                                                            Senior&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="entry"
                                                                            id="entryflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="entryflexCheckChecked">
                                                                            Entry&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="person_seniorities" value="intern"
                                                                            id="internflexCheckChecked">
                                                                        <label class="form-check-label mt-1"
                                                                            for="internflexCheckChecked">
                                                                            Intern&nbsp;&nbsp;
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#person_department_or_subdepartmentsscollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Person Departments
                                                                </button>
                                                            </h2>
                                                            <div id="person_department_or_subdepartmentsscollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body"
                                                                    id="person_department_or_subdepartments_section">

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

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#IndustryKeywordsollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Industry
                                                                </button>
                                                            </h2>
                                                            <div id="IndustryKeywordsollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <select class="js-example-basic-single"
                                                                        multiple="multiple" style="width: 100%"
                                                                        aria-label=".form-select-lg example"
                                                                        name="industry" id="industry">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#EmailStatuscollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Email Status
                                                                </button>
                                                            </h2>
                                                            <div id="EmailStatuscollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="email_status" value="likely_to_engage"
                                                                            id="EmailStatus1">
                                                                        <label class="form-check-label mt-1"
                                                                            for="EmailStatus1">
                                                                            Likely to engage
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="email_status" value="verified"
                                                                            id="EmailStatus2">
                                                                        <label class="form-check-label mt-1"
                                                                            for="EmailStatus2">
                                                                            Verfied
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="email_status" value="unverified"
                                                                            id="EmailStatus3">
                                                                        <label class="form-check-label mt-1"
                                                                            for="EmailStatus3">
                                                                            Unverfied
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            value="update_required" id="EmailStatus4"
                                                                            name="email_status">
                                                                        <label class="form-check-label mt-1"
                                                                            for="EmailStatus4">
                                                                            Update Required
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            value="unavailable" id="EmailStatus5"
                                                                            name="email_status">
                                                                        <label class="form-check-label mt-1"
                                                                            for="EmailStatus5">
                                                                            Unavailable
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Buyingcollapse" aria-expanded="false"
                                                                    aria-controls="collapseThree">
                                                                    Buying Intent
                                                                </button>
                                                            </h2>
                                                            <div id="Buyingcollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="row">
                                                                            <div class="col-md-6 col-12"
                                                                                style="padding-left: 25px;">
                                                                                <h6>Intent Topics</h6>
                                                                                <div id="IntentTopicSection">

                                                                                </div>

                                                                            </div>
                                                                            <div class="col-md-6 col-12">
                                                                                <h6 style="padding-right: 18px;"
                                                                                    class="text-primary text-end"
                                                                                    id="buyingIntentBtn"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#buyingIntentModal">
                                                                                    Edit</h6>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row">
                                                                            <div class="col-md-12"
                                                                                style="padding-left: 25px;">
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        name="buying_intent_status"
                                                                                        value="high" id="HighStatus1">
                                                                                    <label class="form-check-label mt-1"
                                                                                        for="HighStatus1">
                                                                                        High
                                                                                    </label>
                                                                                </div>
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        name="buying_intent_status"
                                                                                        value="mid" id="MediumStatus2">
                                                                                    <label class="form-check-label mt-1"
                                                                                        for="MediumStatus2">
                                                                                        Medium
                                                                                    </label>
                                                                                </div>
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        name="buying_intent_status"
                                                                                        value="low" id="LowStatus3">
                                                                                    <label class="form-check-label mt-1"
                                                                                        for="LowStatus3">
                                                                                        Low
                                                                                    </label>
                                                                                </div>

                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="checkbox"
                                                                                        name="buying_intent_status"
                                                                                        value="none" id="NoneStatus4">
                                                                                    <label class="form-check-label mt-1"
                                                                                        for="NoneStatus4">
                                                                                        None
                                                                                    </label>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Technologiescollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Technologies
                                                                </button>
                                                            </h2>
                                                            <div id="Technologiescollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <select class="js-example-basic-single"
                                                                        id="lg_technology" multiple="multiple"
                                                                        style="width: 100%"
                                                                        aria-label=".form-select-lg example"
                                                                        name="technology">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Revenuecollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Revenue
                                                                </button>
                                                            </h2>
                                                            <div id="Revenuecollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="row">
                                                                        <div class="col-lg-6 col-md-6 col-12 company__row">
                                                                            <div
                                                                                class="mb-3 company__input calender-input">
                                                                                <label for="exampleInputEmail1"
                                                                                    class="form-label">Min
                                                                                </label>
                                                                                <input type="number" placeholder="0.00"
                                                                                    class="form-control" id="min_revenue"
                                                                                    name="min_revenue"
                                                                                    aria-describedby="emailHelp"
                                                                                    value="">
                                                                                <div id="error">
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-lg-6 col-md-6 col-12 company__row">
                                                                            <div
                                                                                class="mb-3 company__input calender-input">
                                                                                <label for="exampleInputEmail1"
                                                                                    class="form-label">Max
                                                                                </label>
                                                                                <input type="number" name="max_revenue"
                                                                                    value="" placeholder="0.00"
                                                                                    class="form-control" id="max_revenue"
                                                                                    aria-describedby="emailHelp">
                                                                                <div id="error">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Fundingcollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Funding
                                                                </button>
                                                            </h2>
                                                            <div id="Fundingcollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body" id="funding_section">

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#TimeZonecollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    TimeZone
                                                                </button>
                                                            </h2>
                                                            <div id="TimeZonecollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <select class="js-example-basic-single"
                                                                        multiple="multiple" style="width: 100%"
                                                                        aria-label=".form-select-lg example"
                                                                        id="lg_person_time_zones">
                                                                        <option value="-540">GMT -10:00</option>
                                                                        <option value="-480">GMT -8:00</option>
                                                                        <option value="-420">GMT -7:00</option>
                                                                        <option value="-360">GMT -6:00</option>
                                                                        <option value="-300">GMT -5:00</option>
                                                                        <option value="-240">GMT -4:00</option>
                                                                        <option value="-180">GMT -3:00</option>
                                                                        <option value="-120">GMT -2:00</option>
                                                                        <option value="-60">GMT -1:00</option>
                                                                        <option value="00">GMT -0:00</option>
                                                                        <option value="60">GMT +1:00</option>
                                                                        <option value="120">GMT +2:00</option>
                                                                        <option value="180">GMT +3:00</option>
                                                                        <option value="240">GMT +4:00</option>
                                                                        <option value="300">GMT +4:30</option>
                                                                        <option value="360">GMT +5:00</option>
                                                                        <option value="420">GMT +5:30</option>
                                                                        <option value="480">GMT +5:45</option>
                                                                        <option value="540">GMT +6:00</option>
                                                                        <option value="600">GMT +6:30</option>
                                                                        <option value="660">GMT +7:00</option>
                                                                        <option value="720">GMT +8:00</option>
                                                                        <option value="780">GMT +9:00</option>
                                                                        <option value="840">GMT +9:30</option>
                                                                        <option value="900">GMT +10:00</option>
                                                                        <option value="960">GMT +11:00</option>
                                                                        <option value="1020">GMT +12:00</option>
                                                                        <option value="1080">GMT +13:00</option>
                                                                        <option value="1140">GMT +14:00</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#Revenuecollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Experience Years
                                                                </button>
                                                            </h2>
                                                            <div id="Revenuecollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="row">
                                                                        <div class="col-lg-6 col-md-6 col-12 company__row">
                                                                            <div
                                                                                class="mb-3 company__input calender-input">
                                                                                <label for="exampleInputEmail1"
                                                                                    class="form-label">Min Year
                                                                                </label>
                                                                                <input type="number" placeholder="0.00"
                                                                                    class="form-control"
                                                                                    id="exampleInputEmail1"
                                                                                    name="min_salary"
                                                                                    aria-describedby="emailHelp"
                                                                                    value="">
                                                                                <div id="error">
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-lg-6 col-md-6 col-12 company__row">
                                                                            <div
                                                                                class="mb-3 company__input calender-input">
                                                                                <label for="exampleInputEmail1"
                                                                                    class="form-label">Max Year
                                                                                </label>
                                                                                <input type="number" name="max_salary"
                                                                                    value="" placeholder="0.00"
                                                                                    class="form-control"
                                                                                    id="exampleInputEmail1"
                                                                                    aria-describedby="emailHelp">
                                                                                <div id="error">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#EmailStatuscollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Job change
                                                                </button>
                                                            </h2>
                                                            <div id="EmailStatuscollapse"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input"
                                                                            name="open_factor_names" type="radio"
                                                                            value="true" id="open_factor_names1">
                                                                        <label class="form-check-label mt-1"
                                                                            for="open_factor_names1">
                                                                            Contact who have changed jobs
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input"
                                                                            name="open_factor_names" type="radio"
                                                                            value="false" id="open_factor_names2">
                                                                        <label class="form-check-label mt-1"
                                                                            for="open_factor_names2">
                                                                            Contact who have not changed jobs
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 company__input">
                                                    <div class="accordion" id="accordionExample">
                                                        <div class="accordion-item">
                                                            <h2 class="accordion-header" id="headingThree">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#TimeRolecollapse"
                                                                    aria-expanded="false" aria-controls="collapseThree">
                                                                    Time in Current Role
                                                                </button>
                                                            </h2>
                                                            <div id="TimeRolecollapse" class="accordion-collapse collapse"
                                                                aria-labelledby="headingThree"
                                                                data-bs-parent="#accordionExample">
                                                                <div class="accordion-body">
                                                                    <div class="row">
                                                                        <div class="col-lg-6 col-md-6 col-12 company__row">
                                                                            <div
                                                                                class="mb-3 company__input calender-input">
                                                                                <label for="exampleInputEmail1"
                                                                                    class="form-label">Min Year
                                                                                </label>
                                                                                <input type="number" class="form-control"
                                                                                    name="person_days_in_current_title_range_min"
                                                                                    id="person_days_in_current_title_range_min">
                                                                                <div id="error">
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-lg-6 col-md-6 col-12 company__row">
                                                                            <div
                                                                                class="mb-3 company__input calender-input">
                                                                                <label for="exampleInputEmail1"
                                                                                    class="form-label">Max Year
                                                                                </label>
                                                                                <input type="number"
                                                                                    name="person_days_in_current_title_range_max"
                                                                                    class="form-control"
                                                                                    id="person_days_in_current_title_range_max">
                                                                                <div id="error">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 px-1  detail__job-div non-fixed-cv mt-1 text-white">
                    <div class="bg-card2 scroll-div"
                        style="background-color: #09141A  !important;  max-height: 70vh; scroll-behavior: smooth; overflow: scroll;">
                        <h2 class="text-center text-white main-heading">Detail</h2>
                        <div class="row mb-3 mt-3">
                            <div class="col-md-12">
                                <table class="text-center">
                                    <thead>
                                        <tr style="width:100%;">
                                            <th style="width:33.33%; margin-right:10px;">
                                                <h6><span id="selectedCheckboxText">0</span> Selected</h6>
                                            </th>
                                            <th style="width:33.33%;">
                                                <h6>Total Results (<span id="total_results_text">12403892</span>)</h6>
                                            </th>
                                            <th style="width:100%; display: flex;"><input type="number" min="1"
                                                    class="form-control" id="select_checboxes_input"> <button
                                                    class="btn btn-primary btn-sm  ml-4"
                                                    id="select_checboxes_btn">Select</button></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <div class="line-border"></div>
                        <!-- All Applicants -->
                        <div id="applicants" class="tabcontent-cv scroll-accor" style="display: block;">
                            <div class="states__table">
                                <table class="table jobs-table table-striped text-white">
                                    <thead>
                                        <tr>
                                            <th scope="col"><input type="checkbox" onclick="selectAllCheckboxes(25)"
                                                    id="selectAllCheckboxes" class="select-all-checkbox"></th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Title</th>
                                            <th scope="col">Company</th>
                                            <th scope="col">City</th>
                                            <th scope="col">State</th>
                                            <th scope="col">Country</th>
                                        </tr>
                                    </thead>
                                    <tbody class="states__table__cards" id="tbody">
                                        <tr>
                                            <td class="text-white" colspan="9">No Data Record</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <nav aria-label="...">
                                <ul class="pagination">
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row py-2">
                <div class="col-md-12">
                    <button class="btn btn-primary mx-auto d-block col-md-4" disabled id="generate_btn"
                        data-bs-toggle="modal" data-bs-target="#exampleModal">Generate</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Export</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Row for Export with/without Emails -->
                    {{--                    <div class="row mb-3"> --}}
                    {{--                        <div class="col-6"> --}}
                    {{--                            <div class="form-check"> --}}
                    {{--                                <input class="form-check-input" name="export_option" type="radio" value="with_email" id="exportWithEmails" onchange="changeEmailvalue('on')"  checked> --}}
                    {{--                                <label class="form-check-label" for="exportWithEmails">Export with Emails</label> --}}
                    {{--                            </div> --}}
                    {{--                        </div> --}}
                    {{--                        <div class="col-6"> --}}
                    {{--                            <div class="form-check"> --}}
                    {{--                                <input class="form-check-input" name="export_option" type="radio" value="without_email"  id="exportWithoutEmails" onchange="changeEmailvalue('off')"> --}}
                    {{--                                <label class="form-check-label" for="exportWithoutEmails">Export without Emails</label> --}}
                    {{--                            </div> --}}
                    {{--                        </div> --}}
                    {{--                    </div> --}}
                    <div class="mb-3">
                        <label for="exportOptions" class="form-label">Columns:</label>
                        <div class="col-md-12">
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="first_name"
                                    id="exportOptionNamefn" checked>
                                <label class="form-check-label" for="exportOptionNamefn">First Name</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="last_name"
                                    id="exportOptionNameln" checked>
                                <label class="form-check-label" for="exportOptionNameln">Last Name</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="title"
                                    id="exportOptiontitle" checked>
                                <label class="form-check-label" for="exportOptiontitle">Title</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="company_name"
                                    id="exportOptionCNln" checked>
                                <label class="form-check-label" for="exportOptionCNln">Company Name</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="company_location"
                                    id="exportOptionCNIln" checked>
                                <label class="form-check-label" for="exportOptionCNIln">Company Location</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="industry"
                                    id="exportOptionCNIln" checked>
                                <label class="form-check-label" for="exportOptionCNIln">Industry</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="website"
                                    id="exportOptionCNIln" checked>
                                <label class="form-check-label" for="exportOptionCNIln">Website</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns"
                                    value="company_li_profile_url" id="exportOptioCompanylinkedinprofile" checked>
                                <label class="form-check-label" for="exportOptioCompanylinkedinprofile">Company linkedin
                                    profile URL</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns"
                                    value="contact_li_profile_url" id="exportOptioContactLinkedInprofile" checked>
                                <label class="form-check-label" for="exportOptioContactLinkedInprofile">Contact LinkedIn
                                    profile URL</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="primary_email"
                                    id="exportOptiPEmail" checked>
                                <label class="form-check-label" for="exportOptiPEmail">Primary email</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="company_phone"
                                    id="exportOptionNamephone" checked>
                                <label class="form-check-label" for="exportOptionNamephone">Company Phone</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="contact_city"
                                    id="exportOptionNameCity" checked>
                                <label class="form-check-label" for="exportOptionNameCity">Contact City</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="contact_state"
                                    id="exportOptionNameState" checked>
                                <label class="form-check-label" for="exportOptionNameState">Contact State</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns"
                                    value="contact_country" id="exportOptionNameCountry" checked>
                                <label class="form-check-label" for="exportOptionNameCountry">Contact Country</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns"
                                    value="company_website" id="exportOptionCompanyFounded" checked>
                                <label class="form-check-label" for="exportOptionCompanyFounded">Company Website</label>
                            </div>
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns"
                                    value="company_found_date" id="exportOptionCompanyFounded" checked>
                                <label class="form-check-label" for="exportOptionCompanyFounded">Company Founded
                                    Date</label>
                            </div>
                            {{--  <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns" value="company_city" id="exportOptionCompanyFounded" checked>
                                <label class="form-check-label" for="exportOptionCompanyFounded">Company Industry</label>
                            </div>  --}}
                            <div class="form-check  form-check">
                                <input class="form-check-input" type="checkbox" name="columns"
                                    value="company_staff_count" id="exportOptionCompanyStaff" checked>
                                <label class="form-check-label" for="exportOptionCompanyStaff">Company Staff
                                    Count</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="">Export Option: </label>
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input" name="export_option_csv_link" type="radio"
                                    value="url" id="exportWithEmails1" checked>
                                <label class="form-check-label" for="exportWithEmails1">Export with Google Sheet</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input" name="export_option_csv_link" type="radio"
                                    value="csv" id="exportWithoutEmails2">
                                <label class="form-check-label" for="exportWithoutEmails2">Export with CSV</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="progress mt-3">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                style="width: 0%;" id="progress-bar"></div>
                            <div class="progress-text" id="progress-text">0%</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="generate_modal_btn">OK</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="success_serach_popup" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background: #142733;">
                <div class="d-flex justify-content-end p-4">
                    <button type="button" class="btn-close close_btn" data-bs-dismiss="modal" aria-label="Close"
                        onclick="closeSuccessSearchPopup()"></button>
                </div>
                <div class="modal-body">
                    <img src="{{ asset('/img/success.gif') }}" alt="Logo" class="img-fluid"
                        style="width: 500px;">
                    <h5 class="text-center  text-white  mt-2 mb-2">File generated successfully</h5>
                    <div class="row d-none" id="file_path_id_section">
                        <div class="col-md-12">
                            <input type="text" class="form-control" id="file_path_id">
                            <button class="btn btn-sm btn-primary col-md-4 mx-auto d-block mt-2"
                                id="file_path_id_copty_btn">Copy</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .alert {
            width: 100%;
        }

        .hide {
            display: none !important;
        }

        .btn2 a:hover {
            color: #ffffff !important;
        }
    </style>
    @push('js')
        <script src="{{ asset('recruiter-assets') }}/js/manage-screen.js"></script>
    @endpush
    <script type="text/javascript">
        window.addEventListener('load', function() {
            $(function() {


                var $form = $(".require-validation");
                var payNowBtn = $('#pay-btn');
                var processingBtn = $('#loading');

                const showPayBtn = () => {
                    payNowBtn.removeClass('hide');
                    processingBtn.addClass('hide');
                }

                const showProcessingBtn = () => {
                    processingBtn.removeClass('hide');
                    payNowBtn.addClass('hide');
                }

                $('form.require-validation').bind('submit', function(e) {

                    showProcessingBtn();
                    var $form = $(".require-validation"),
                        inputSelector = ['input[type=email]', 'input[type=password]',
                            'input[type=text]', 'input[type=file]',
                            'textarea'
                        ].join(', '),
                        $inputs = $form.find('.required').find(inputSelector),
                        $errorMessage = $form.find('div.error'),
                        valid = true;
                    $errorMessage.addClass('hide');
                    $('.has-error').removeClass('has-error');
                    $inputs.each(function(i, el) {
                        var $input = $(el);
                        if ($input.val() === '') {
                            $input.parent().addClass('has-error');
                            $errorMessage.removeClass('hide');
                            showPayBtn();
                            e.preventDefault();
                        }
                    });
                    if (!$form.data('cc-on-file')) {
                        e.preventDefault();
                        Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                        Stripe.createToken({
                            number: $('.card-number').val(),
                            cvc: $('.card-cvc').val(),
                            exp_month: $('.card-expiry-month').val(),
                            exp_year: $('.card-expiry-year').val()
                        }, stripeResponseHandler);
                    }
                });

                function stripeResponseHandler(status, response) {
                    if ($('.card-cvc').val() == '') {
                        $('.error')
                            .removeClass('hide')
                            .find('.alert')
                            .text('CVV is required');
                        showPayBtn()
                    } else if (response.error) {
                        $('.error')
                            .removeClass('hide')
                            .find('.alert')
                            .text(response.error.message);
                        showPayBtn()
                    } else {
                        /* token contains id, last4, and card type */
                        var token = response['id'];
                        $form.find('input[type=text]').empty();
                        $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                        $.ajax({
                            type: "method",
                            method: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            {{-- url: "{{ route('recruiter.stripe.post') }}", --}}
                            data: $form.serialize(),
                            dataType: "json",
                            success: function(response) {
                                if (response.success) {

                                    let successPayment = $('#success-payment');
                                    let successModal = $('#staticBackdrop-payment');
                                    let paymentModal = $('#staticBackdrop-check-out');

                                    successPayment.show()
                                    $('.error').hide();
                                    showPayBtn();
                                    paymentModal.modal('hide');
                                    successModal.modal('show');

                                }
                            }
                        });
                    }
                }
            });
        })
    </script>
    <script>
        window.addEventListener('load', function() {
            $('.jobTypeBtn').on('click', function() {
                $('#jobType').val($(this).data('type'));
            })

            $('.deleteBtn').on('click', function() {
                let jobId = $(document).find('#jobId').val();
                let cnfrm = confirm('Are You Sure You Want to Delete?');
                if (cnfrm) {
                    $.ajax({
                        type: "method",
                        method: "delete",
                        {{-- url: "{{ route('recruiter.job.delete') }}", --}}
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: jobId,
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.success) {
                                location.reload();
                            } else {
                                alert('Something went wrong');
                            }
                        }
                    });
                }
            });

            $('#promote-job-btn').on('click', function() {
                $('#promote-stats-btn').addClass('active')
                $('#promote-stats-btn').show();
            })

            $('.tablinks').each(function() {
                $(this).on('click', function() {
                    if ($(this).hasClass('active') && $(this)[0].id !== "promote-stats-btn") {
                        $('#promote-stats-btn').hide()
                        $('.detail__job-div .main-heading').text('Detail of Jobs')
                    }
                })
            })

            $('.radio').on('change', function() {
                let packagePrice = $('.radio:checked').attr('price');
                let packageId = $('.radio:checked').attr('packageId');

                $('#package_id').val(packageId);
                $('#amount').val(packagePrice);

                $('.pacakge-total-price').html(packagePrice);
            })

            const totlaPriceWrapper = $('#totalprizepackage');
            let totalPrice = totlaPriceWrapper.html();
            $('.checkboxinputvalue').on('change', function() {
                let calculatePrice = 0;
                let selectedConditions = [];
                let checkedValues = $('.checkboxinputvalue:checked')
                if (checkedValues.length > 0) {
                    checkedValues.each(function() {
                        calculatePrice = calculatePrice + parseInt($(this).attr('price'));
                    });
                }
                calculatePrice = calculatePrice + parseInt(totalPrice);
                totlaPriceWrapper.html(calculatePrice);
                $('.pacakge-total-price').html(calculatePrice)
            })

            // const totlaPriceWrapper = $('#totalprizepackage');
            // let totalPrice = totlaPriceWrapper.html();
            // $('.checkboxinputvalue').on('change',function(){
            //     let calculatePrice = 0;
            //     let selectedConditions = [];
            //     let checkedValues = $('.checkboxinputvalue:checked')
            //     if(checkedValues.length > 0){
            //         checkedValues.each(function(){
            //             selectedConditions.push($(this).attr('condId'))
            //             calculatePrice = calculatePrice + parseInt($(this).attr('value'));
            //         });
            //     }
            //     $('#selectedConditions').val(selectedConditions);
            //     console.log($('#selectedConditions').val())
            //         calculatePrice = calculatePrice+parseInt(totalPrice);
            //     totlaPriceWrapper.html(calculatePrice);
            //     $('.pacakge-total-price').html(calculatePrice)
            // })

            $('#checkout-btn').on('click', function() {
                $('#amount').val($('#totalprizepackage').html());
                $('.pacakge-total-price').html($('#totalprizepackage').html())
            })

            $('.payment-method').on('change', function() {
                let selectedMethod = $('.payment-method:checked').val();
                if (selectedMethod == 1) {
                    $('#stripe').show();
                    $('#paypal').hide();
                } else {
                    $('#stripe').hide();
                    $('#paypal').show();
                }
            })

            $('#staticBackdrop-payment').on('hidden.bs.modal', function() {
                {{-- location.href = "{{ route('recruiter.exective-requirements') }}"; --}}
            });

            $('.s-job').on('click', function() {
                let type = $(this).attr('type');
                $(this).find('.s-job-form').submit();
            })

            $('#filterForm').on('submit', function(event) {
                let allOptions = $(this).find('input, select');
                let totalOptions = allOptions.length;
                let nullOptions = allOptions.filter(function() {
                    if (this.value == "" || this.value == 0) {
                        return this;
                    }
                }).length;


                if ((totalOptions - 3) == nullOptions) {
                    event.preventDefault();
                    $('#fillterModalError').show();
                    $('#fillterModalError').html('PLease Select Option to Filter Jobs');
                    return false;
                }

                allOptions.each(function() {
                    if ($(this).val() == '' || $(this).val() == 0) {
                        nullOptions += 1;
                        $(this).prop('disabled', true);
                    }
                })
            })

            $('.filterBtn').on('click', function() {
                $('#fillterModalError').hide();
                $('#filterForm').find('input, select').each(function() {
                    $(this).prop('disabled', false);
                })
            });

            $('#findJobForm').on('submit', function() {

            })
        })
    </script>
@endsection