@extends('new-layout')
@section('content')
<div class="container-fluid" style="height: 90vh:position:absolute">
    <div class="card mt-3 mb-3">
        <div class="card-header">
            <div class="d-inline-flex justify-content-between w-100">
                <h4>Companies</h4>
                <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exportModal">Export</button>
            </div>

        </div>
        <div class="card-body">
            <div class="row company_list mx-0">
                <div class="col-md-3">
                    <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="height:68vh;overflow-y: auto;">
                        <div class="p-2 text-center bg-secondary text-white fw-semibold" style="border: 1px solid #82D9A3;background-color: #fff !important;">
                            <div class="d-inline-flex justify-content-between w-100 align-items-center">
                                <div style="color: #2C8F7E;">Filters</div>
                                <button type="button" class="btn btn-secondary" onclick="search()">Search</button>
                            </div>


                        </div>

                        <div class="list-group list-group-flush border-bottom scrollarea">
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <div>
                                <label class="">Company names that contain</label>
                                <input class="form-control form-control-lg" type="text" placeholder="" name="include_company" id="include_company">
                            </div>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Exclude company names that contain</label>
                            <input class="form-control form-control-lg" type="text" placeholder="" name="exclude_company" id="exclude_company">
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Enter a full or partial address</label>
                            <input class="form-control form-control-lg" type="text" placeholder="" name="partial_address" id="partial_address" data-bs-toggle="collapse">
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Incorporated From</label>
                            <input type="date" class="form-control" name="incorporated_from" id="incorporated_from"/>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Incorporated To</label>
                            <input type="date" class="form-control" name="incorporated_to" id="incorporated_to"/>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item rounded-1">
                                    <h2 class="accordion-header">
                                      <button class="accordion-button collapsed p-2 display-6" type="button" data-bs-toggle="collapse" data-bs-target="#company_status" aria-expanded="false" aria-controls="company_status" style="font-size: 0.9rem;">
                                        <b>Company Status</b>
                                      </button>
                                    </h2>
                                    <div id="company_status" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                      <div class="accordion-body">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="active" id="active" name="company_status[]">
                                            <label class="form-check-label" for="active">
                                                Active
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="dissolved" id="dissolved" name="company_status[]">
                                            <label class="form-check-label" for="dissolved">
                                                Dissolved
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="open" id="open" name="company_status[]">
                                            <label class="form-check-label" for="open">
                                                Open
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="closed" id="closed" name="company_status[]">
                                            <label class="form-check-label" for="closed">
                                                Closed
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="converted-closed" id="converted-closed" name="company_status[]">
                                            <label class="form-check-label" for="converted-closed">
                                                Converted-Closed
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="receivership" id="receivership">
                                            <label class="form-check-label" for="receivership" name="company_status[]">
                                                Receivership
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="administration" id="administration" name="company_status[]">
                                            <label class="form-check-label" for="administration">
                                                Administration
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="liquidation" id="liquidation" name="company_status[]">
                                            <label class="form-check-label" for="liquidation">
                                                Liquidation
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="insolvency-proceedings" id="insolvency-proceedings" name="company_status[]">
                                            <label class="form-check-label" for="insolvency-proceedings">
                                                Insolvency-Proceedings
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="voluntary-arrangement" id="voluntary-arrangement" name="company_status[]">
                                            <label class="form-check-label" for="voluntary-arrangement">
                                                Voluntary-Arrangement
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="registered" id="registered" name="company_status[]">
                                            <label class="form-check-label" for="registered">
                                                Registered
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="removed" id="removed" name="company_status[]">
                                            <label class="form-check-label" for="removed">
                                                Removed
                                            </label>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item rounded-1">
                                    <h2 class="accordion-header">
                                      <button class="accordion-button collapsed p-2 display-6" type="button" data-bs-toggle="collapse" data-bs-target="#company_subtype" aria-expanded="false" aria-controls="company_subtype" style="font-size:0.9rem;">
                                        <b>Company Sub Type</b>
                                      </button>
                                    </h2>
                                    <div id="company_subtype" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="community-interest-company" id="community-interest-company" name="company_subtype[]">
                                                <label class="form-check-label" for="community-interest-company">
                                                    Community-Interest-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="company_subtype[]" value="community-interest-company" id="community-interest-company">
                                                <label class="form-check-label" for="community-interest-company">
                                                    Community-Interest-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="private-fund-limited-partnership" name="company_subtype[]" id="private-fund-limited-partnership">
                                                <label class="form-check-label" for="private-fund-limited-partnership">
                                                    Private-Fund-Limited-Partnership
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item rounded-1">
                                    <h2 class="accordion-header">
                                      <button class="accordion-button collapsed p-2 display-6" type="button" data-bs-toggle="collapse" data-bs-target="#company_type" aria-expanded="false" aria-controls="company_type" style="font-size:0.9rem;">
                                        <b>Company Type</b>
                                      </button>
                                    </h2>
                                    <div id="company_type" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="company_type[]" value="private-unlimited" id="private-unlimited">
                                                <label class="form-check-label" for="private-unlimited">
                                                    Private-Unlimited
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="ltd" name="company_type[]" id="ltd">
                                                <label class="form-check-label" for="ltd">
                                                    Ltd
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="plc" name="company_type[]" id="plc">
                                                <label class="form-check-label" for="plc">
                                                    Plc
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="old-public-company" name="company_type[]" id="old-public-company">
                                                <label class="form-check-label" for="old-public-company">
                                                    Old-Public-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="private-limited-guarant-nsc-limited-exemption" name="company_type[]" id="private-limited-guarant-nsc-limited-exemption">
                                                <label class="form-check-label" for="private-limited-guarant-nsc-limited-exemption">
                                                    Private-Limited-Guarant-Nsc-Limited-Exemption
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="limited-partnership" name="company_type[]" id="limited-partnership">
                                                <label class="form-check-label" for="limited-partnership">
                                                    Limited-Partnership
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="private-limited-guarant-nsc" name="company_type[]" id="private-limited-guarant-nsc">
                                                <label class="form-check-label" for="private-limited-guarant-nsc">
                                                    Private-Limited-Guarant-Nsc
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="private-limited-shares-section-30-exemption" name="company_type[]" id="private-limited-shares-section-30-exemption">
                                                <label class="form-check-label" for="private-limited-shares-section-30-exemption">
                                                    Private-Limited-Shares-Section-30-Exemption
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="protected-cell-company" name="company_type[]" id="protected-cell-company">
                                                <label class="form-check-label" for="protected-cell-company">
                                                    Protected-Cell-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="assurance-company" name="company_type[]" id="assurance-company">
                                                <label class="form-check-label" for="assurance-company">
                                                    Assurance-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="oversea-company" name="company_type[]" id="oversea-company">
                                                <label class="form-check-label" for="oversea-company">
                                                    Oversea-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="eeig" name="company_type[]" id="eeig">
                                                <label class="form-check-label" for="eeig">
                                                    Eeig
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="icvc-securities" name="company_type[]" id="icvc-securities">
                                                <label class="form-check-label" for="icvc-securities">
                                                    Icvc-Securities
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="icvc-warrant" name="company_type[]" id="icvc-warrant">
                                                <label class="form-check-label" for="icvc-warrant">
                                                    Icvc-Warrant
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="icvc-umbrella" name="company_type[]" id="icvc-umbrella">
                                                <label class="form-check-label" for="icvc-umbrella">
                                                    Icvc-Umbrella
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="registered-society-non-jurisdictional" name="company_type[]" id="registered-society-non-jurisdictional">
                                                <label class="form-check-label" for="registered-society-non-jurisdictional">
                                                    Registered-Society-Non-Jurisdictional
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="industrial-and-provident-society" name="company_type[]" id="industrial-and-provident-society">
                                                <label class="form-check-label" for="industrial-and-provident-society">
                                                    Industrial-And-Provident-Society
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="northern-ireland" name="company_type[]" id="northern-ireland">
                                                <label class="form-check-label" for="northern-ireland">
                                                    Northern-Ireland
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="northern-ireland-other" name="company_type[]" id="northern-ireland-other">
                                                <label class="form-check-label" for="northern-ireland-other">
                                                    Northern-Ireland-Other
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="royal-charter" name="company_type[]" id="royal-charter">
                                                <label class="form-check-label" for="royal-charter">
                                                    Royal-Charter
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="investment-company-with-variable-capital" name="company_type[]" id="investment-company-with-variable-capital">
                                                <label class="form-check-label" for="investment-company-with-variable-capital">
                                                    Investment-Company-With-Variable-Capital
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="unregistered-company" name="company_type[]" id="unregistered-company">
                                                <label class="form-check-label" for="unregistered-company">
                                                    Unregistered-Company
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="llp" name="company_type[]" id="llp">
                                                <label class="form-check-label" for="llp">
                                                    Llp
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="other" name="company_type[]" id="other">
                                                <label class="form-check-label" for="other">
                                                    Other
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="european-public-limited-liability-company-se" name="company_type[]" id="european-public-limited-liability-company-se">
                                                <label class="form-check-label" for="european-public-limited-liability-company-se">
                                                    European-Public-Limited-Liability-Company-Se
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="uk-establishment" name="company_type[]" id="uk-establishment">
                                                <label class="form-check-label" for="uk-establishment">
                                                    UK-Establishment
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="scottish-partnership" name="company_type[]" id="scottish-partnership">
                                                <label class="form-check-label" for="scottish-partnership">
                                                    Scottish-Partnership
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="charitable-incorporated-organisation" name="company_type[]" id="charitable-incorporated-organisation">
                                                <label class="form-check-label" for="charitable-incorporated-organisation">
                                                    Charitable-Incorporated-Organisation
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="scottish-charitable-incorporated-organisation" name="company_type[]" id="scottish-charitable-incorporated-organisation">
                                                <label class="form-check-label" for="scottish-charitable-incorporated-organisation">
                                                    Scottish-Charitable-Incorporated-Organisation
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="further-education-or-sixth-form-college-corporation" name="company_type[]" id="further-education-or-sixth-form-college-corporation">
                                                <label class="form-check-label" for="further-education-or-sixth-form-college-corporation">
                                                    Further-Education-Or-Sixth-Form-College-Corporation
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="registered-overseas-entity" name="company_type[]" id="registered-overseas-entity">
                                                <label class="form-check-label" for="registered-overseas-entity">
                                                    Registered-Overseas-Entity
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Dissolved From</label>
                            <input type="date" class="form-control" name="dissolved_from" id="dissolved_from"/>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Dissolved To</label>
                            <input type="date" class="form-control" name="dissolved_to" id="dissolved_to"/>
                        </div>
                        <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <label>Sic Codes</label>
                            <select id="sic_codes_dropdown" class="form-control sic_codes_dropdown" name="sic_codes_dropdown[]" multiple>
                                @foreach($sic_codes as $sickey => $sic_code)
                                    <option value="{{$sickey}}">({{$sickey}}) {{$sic_code}}</option>
                                @endforeach
                            </select>
                        </div>
                        {{-- <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                            <button type="button" class="btn btn-secondary" onclick="search()">Search</button>
                        </div> --}}
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="height:68vh;overflow-y: auto;">
                        <div class="list-group list-group-flush border-bottom scrollarea" id="company_search">
                        </div>
                        <div class="row" style="border-bottom: 1px solid #ddd;">
                            <div class="d-inline-flex justify-content-between">
                                <div class="search_pagination mt-3"></div>
                                <div class="pageCountText mt-4" style="font-size:12px;text-align:center;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade modal-xl" id="exportModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <form method="POST" id="exportFilters" action="{{route('exportCompaniesFilter')}}">
                        @csrf
                        <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Export</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                                <div class="row mb-2">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="">Send Export to Email (Required):</label>
                                                <input class="form-control form-control-lg" type="text" placeholder="" name="email_send_export" id="email_send_export" required>
                                                <div class="error"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a data-mdb-tab-init class="nav-link active fs-6" id="ex1-tab-1" href="#ex1-tabs-1" role="tab" aria-controls="ex1-tabs-1" aria-selected="true">Company</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a data-mdb-tab-init class="nav-link fs-6" id="ex1-tab-1" href="#ex1-tabs-2" role="tab" aria-controls="ex1-tabs-2" aria-selected="true">Filing</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="ex1-content">
                                    <div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row mb-2">
                                                    <div class="col-md-6">
                                                        <label class="">Company names that contain</label>
                                                        <input class="form-control form-control-lg" type="text" placeholder="" name="exp_include_company" id="exp_include_company">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Exclude company names that contain</label>
                                                        <input class="form-control form-control-lg" type="text" placeholder="" name="exp_exclude_company" id="exp_exclude_company">
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-md-12">
                                                        <label>Enter a full or partial address</label>
                                                        <input class="form-control form-control-lg" type="text" placeholder="" name="exp_partial_address" id="exp_partial_address" data-bs-toggle="collapse">
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-md-6">
                                                        <label>Incorporated From</label>
                                                        <input type="date" class="form-control datepicker" name="exp_incorporated_from" id="exp_incorporated_from"/>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Incorporated To</label>
                                                        <input type="date" class="form-control datepicker" name="exp_incorporated_to" id="exp_incorporated_to"/>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-md-6">
                                                        <label>Dissolved From</label>
                                                        <input type="date" class="form-control datepicker" name="exp_dissolved_from" id="exp_dissolved_from"/>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Dissolved To</label>
                                                        <input type="date" class="form-control datepicker" name="exp_dissolved_to" id="exp_dissolved_to"/>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-md-6">
                                                        <label>Company Status</label>
                                                        <select name="exp_company_status[]" class="form-control exp_company_status select" multiple>
                                                            <option>All</option>
                                                            <option value="active">Active</option>
                                                            <option value="dissolved">Dissolved</option>
                                                            <option value="open">Open</option>
                                                            <option value="closed">Closed</option>
                                                            <option value="converted-closed">Converted-closed</option>
                                                            <option value="receivership">Receivership</option>
                                                            <option value="administration">Administration</option>
                                                            <option value="liquidation">Liquidation</option>
                                                            <option value="insolvency-proceedings">Insolvency-proceedings</option>
                                                            <option value="voluntary-arrangement">Voluntary-arrangement</option>
                                                            <option value="removed">Removed</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Company Sub-Type</label>
                                                        <select name="exp_company_sub_type[]" class="form-control exp_company_sub_type select" multiple>
                                                            <option>All</option>
                                                            <option value="community-interest-company">Community-interest-company</option>
                                                            <option value="private-fund-limited-partnership">Private-fund-limited-partnership</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row mb-2">
                                                    <div class="col-md-6">
                                                        <label>Company Type</label>
                                                        <select id="exp_company_type" class="select form-control exp_company_type select" name="exp_company_type[]" multiple>
                                                            <option>All</option>
                                                            @foreach($companyType as $compkey => $compType)
                                                                <option value="{{$compkey}}">({{$compkey}}) {{$compType}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Sic Codes</label>
                                                        <select id="exp_sic_codes_dropdown" class="select form-control exp_sic_codes_dropdown" name="exp_sic_codes_dropdown[]" multiple>
                                                            <option>All</option>
                                                            @foreach($sic_codes as $sickey => $sic_code)
                                                                <option value="{{$sickey}}">({{$sickey}}) {{$sic_code}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade show" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
                                        <div class="row mb-4">
                                            <div class="col-md-6">
                                            <div class="row">
                                                    <div class="d-inline-flex">
                                                        <div class="me-2">
                                                            <input class="form-check-input" type="checkbox" value="true" id="include_filing_criteria" name="include_filing_criteria">
                                                            <label class="form-check-label" for="include_filing_criteria">Include filing criteria in export</label>
                                                        </div>
                                                    </div>
                                            </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row">
                                                        <div class="d-inline-flex">
                                                            <div class="me-2">
                                                                <input class="form-check-input" type="checkbox" value="true" id="open_ai_limit" name="open_ai_limit">
                                                                <label class="form-check-label" for="open_ai_limit">Only 100 calls on open.ai</label>
                                                            </div>
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col-md-6">
                                            <h6>Turn Over:</h6>
                                            <div class="row">
                                                    <div class="col-md-6">
                                                        <label>From</label>
                                                        <input type="number" class="form-control" name="exp_turn_over_from" id="exp_turn_over_from"/>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>To</label>
                                                        <input type="number" class="form-control" name="exp_turn_over_to" id="exp_turn_over_to"/>
                                                    </div>
                                            </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>Current Asset:</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label>From</label>
                                                        <input type="number" class="form-control" name="exp_current_asset_from" id="exp_current_asset_from"/>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>To</label>
                                                        <input type="number" class="form-control" name="exp_current_asset_to" id="exp_current_asset_to"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col-md-6">
                                            <h6>Cash:</h6>
                                            <div class="row">
                                                    <div class="col-md-6">
                                                        <label>From</label>
                                                        <input type="number" class="form-control" name="exp_cash_from" id="exp_cash_from"/>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>To</label>
                                                        <input type="number" class="form-control" name="exp_cash_to" id="exp_cash_to"/>
                                                    </div>
                                            </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>No Of Employees:</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label>From</label>
                                                        <input type="number" class="form-control" name="exp_no_of_emp_from" id="exp_no_of_emp_from"/>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>To</label>
                                                        <input type="number" class="form-control" name="exp_no_of_emp_to" id="exp_no_of_emp_to"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                            <div class="row">
                                                    <div class="d-inline-flex">
                                                        <div class="me-2">
                                                            <input class="form-check-input" type="checkbox" value="true" id="exp_exclude_dormant" name="exp_exclude_dormant">
                                                            <label class="form-check-label" for="exp_exclude_dormant">Exclude Dormant</label>
                                                        </div>
                                                    </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="closeExportModal" data-bs-target="#exportModal" data-bs-toggle="modal">Close</button>
                        <button type="button" class="btn btn-secondary" id="export_excel_btn">Export</button>
                        </div>
                    </form>
                  </div>
                </div>
            </div>
            <!-- Full screen modal -->
            <div class="modal fade modal-xl" id="exportCountModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header"></div>
                        <div class="modal-body">
                            <div id="content" style="text-align:center"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" id="closeCountModal">Close</button>
                            <button type="submit" form="exportFilters" class="btn btn-secondary" id="exportFilters">Export</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('javascript')
    <script>

        let currentPageNumber = 1;
        let start_index = 0;
        let itemsPerPage = 20;
        let totalRecordCount = 0;

        function formatDateLong(date){
            let d = new Date(date);
            let options = { year: 'numeric', month: 'long', day: 'numeric' };
            d = d.toLocaleDateString("en-GB", options)
            return d;
        }

        function formatDate(date){
            let d = new Date(date);
            let options = { year: 'numeric', month: 'numeric', day: 'numeric' };
            d = d.toLocaleDateString("en-GB", options)
            return d;
        }

        function enumTrueFalse(value) {
            if(value){
                return 'Yes';
            }else{
                return 'No';
            }
        }
        function convertArrayIntoCommaSeprated(arrayItem){

            if(Array.isArray(arrayItem)){
                return arrayItem.join(",");
            }else{
                return 'N/A';
            }
        }

        function getPagination(total,size=20){
            let calculateStartRow = 0;
            $('.search_pagination').pagination({
                items: total,
                itemsOnPage: size,
                cssStyle: 'light-theme',
                onPageClick(pageNumber, event) {
                    let currentPage = pageNumber-1;
                    currentPageNumber = pageNumber;
                    calculateStartRow = itemsPerPage * currentPage;
                    start_index = calculateStartRow;
                    search();
                },
                currentPage:currentPageNumber
            });
            $('.search_pagination').find('ul').addClass('pagination');
            $('.search_pagination').find('ul').find('li').addClass('page-item');
            $('.search_pagination').find('ul').find('li').find('span').addClass('page-link');
            $('.pageCountText').text(`Showing ${start_index+1} to ${itemsPerPage * currentPageNumber} of ${total}`);
        }

        function search()
        {
            $('.overlay').css('display','block');
            let include_company = $('input[name="include_company"]').val();
            let exclude_company = $('input[name="exclude_company"]').val();
            let partial_address = $('input[name="partial_address"]').val();
            let incorporated_from = $('input[name="incorporated_from"]').val();
            let incorporated_to = $('input[name="incorporated_to"]').val();
            let dissolved_from = $('input[name="dissolved_from"]').val();
            let dissolved_to = $('input[name="dissolved_to"]').val();
            let sic_codes = $('#sic_codes_dropdown').select2("val");

            // For arrays, use .map() or .toArray() to gather all selected values
            let company_statuses = $('input[name^="company_status[]"]:checked').map(function() {
                return $(this).val();
            }).get();

            let company_subtypes = $('input[name^="company_subtype[]"]:checked').map(function() {
                return $(this).val();
            }).get();

            let company_types = $('input[name^="company_type[]"]:checked').map(function() {
                return $(this).val();
            }).get();

            $.ajax({
                type: "POST",
                url: "{{url('/advanceSearch')}}",
                cache: false,
                data: {
                    "_token": "{{ csrf_token() }}",
                    include_company:include_company,
                    exclude_company:exclude_company,
                    partial_address:partial_address,
                    incorporated_from:incorporated_from,
                    incorporated_to:incorporated_to,
                    company_statuses:company_statuses,
                    company_subtypes:company_subtypes,
                    company_types:company_types,
                    dissolved_from:dissolved_from,
                    dissolved_to:dissolved_to,
                    sic_code:sic_codes,
                    items_per_page:itemsPerPage,
                    start_index:start_index
                },

                success: function(response){
                    $('.overlay').css('display','none');
                    let companies = response.data.items;
                    console.log(companies);
                    let html = "";
                    companies.forEach(function(row){
                        let filingHistoryUrl = '{{url('/company-details/{id}')}}';
                        filingHistoryUrl = filingHistoryUrl.replace('{id}',row['company_number']);
                        console.log('filingHistory',filingHistoryUrl);
                        html+= `
                            <div class="list-group-item list-group-item-action py-3 px-2 lh-tight">
                                <div class="d-flex w-100 align-items-center justify-content-between">
                                    <strong class="mb-1 fs-5 text-decoration-underline"><a href="${filingHistoryUrl}" target="_blank"> ${row['company_name']}</a></strong>
                                    <small>${row['company_status'].toUpperCase()}</small>
                                </div>
                                <div class="col-10 mb-1 medium">
                                    <p class="mb-1">${row['company_type_desc']}</p>
                                    <p class="mb-1">${row['company_number']} - Incorporated on ${formatDateLong(row['date_of_creation'])}</p>
                                    ${ row['date_of_cessation']!= undefined ? ' <p class="mb-1">Dissolved on '+formatDateLong(row['date_of_cessation'])+'</p>':'' }
                                    <p class="mb-1">${row['registered_office_address']['address_line_1']?row['registered_office_address']['address_line_1']+',':''}
                                            ${row['registered_office_address']['locality']?row['registered_office_address']['locality']+',':''}
                                            ${row['registered_office_address']['country']?row['registered_office_address']['country']+',':''}
                                            ${row['registered_office_address']['postal_code']?row['registered_office_address']['postal_code']+',':''}</p>
                                    <p class="mb-1">Sic Codes: ${convertArrayIntoCommaSeprated(row['sic_codes'])}</p>
                                </div>
                            </div>`;
                    });
                    $('#company_search').empty();
                    $('#company_search').append(html);
                    getPagination( response.data.hits,itemsPerPage);
                    $("#company_search").animate({scrollTop: $("#company_search").offset().top -50});
                },
                error: function(response){
                    let html = `<div class="row">
                                    <div class="col-md-12">
                                        ${response.data.error}
                                    </div>
                                </div>`;
                }
            });
        }

        function directorSearch(){

            let include_company = $('input[name="dir_include_company"]').val();
            let exclude_company = $('input[name="dir_exclude_company"]').val();
            let partial_address = $('input[name="dir_partial_address"]').val();
            let incorporated_from = $('input[name="dir_incorporated_from"]').val();
            let incorporated_to = $('input[name="dir_incorporated_to"]').val();
            let dissolved_from = $('input[name="dir_dissolved_from"]').val();
            let dissolved_to = $('input[name="dir_dissolved_to"]').val();
            let sic_codes = $('#dir_sic_codes_dropdown').select2("val");

            // For arrays, use .map() or .toArray() to gather all selected values
            let company_statuses = $('input[name^="dir_company_status[]"]:checked').map(function() {
                return $(this).val();
            }).get();

            let company_subtypes = $('input[name^="dir_company_subtype[]"]:checked').map(function() {
                return $(this).val();
            }).get();

            let company_types = $('input[name^="dir_company_type[]"]:checked').map(function() {
                return $(this).val();
            }).get();

            $('#table-data').DataTable().destroy();
            let url = '{{url("/directorSearch")}}';

            new DataTable('#table-data', {
                ajax:{
                    url: url,
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        include_company:include_company,
                        exclude_company:exclude_company,
                        partial_address:partial_address,
                        incorporated_from:incorporated_from,
                        incorporated_to:incorporated_to,
                        company_statuses:company_statuses,
                        company_subtypes:company_subtypes,
                        company_types:company_types,
                        dissolved_from:dissolved_from,
                        dissolved_to:dissolved_to,
                        sic_code:sic_codes,
                        items_per_page:itemsPerPage,
                        start_index:start_index
                    },
                    error: function(){
                        $(".users-error").html("");
                        $("#table-data").append('<tbody class="users-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');

                    }
                },
                processing: true,
                serverSide: true,
                lengthChange: false,
                searching: false,
                ordering: false,
                language:{
                    "infoFiltered": ""
                },
                columns:[
                    { data: 'name' },
                    { data: 'nationality' },
                    { data: 'date_of_birth' },
                    { data: 'name' },
                    { data: 'name' },
                ],
                "columnDefs": [
                    {
                    "targets": 0,
                    "render": function(data, type, row, meta){
                        return data.month+'-'+data.year;
                    }
                },
                ]
            });
        }


        $(document).ready(function() {
            $('.sic_codes_dropdown').select2({
                width: '100%'
            });

            $('.select').select2({
                width: '100%',
                dropdownParent: $('#exportModal')
            });

            $(document).keydown(function(event) {
                // Check if the pressed key is Enter (keyCode 13)
                if (event.keyCode === 13) {
                    event.preventDefault(); // Prevent form submission if it's inside a form
                    search(); // Call your function
                }
            });

            $("#export_excel_btn").on('click',function(e){
                e.preventDefault();
                $('.overlay').css('display','block');
                var form = $("#exportFilters");
                var actionUrl = '{{route("getCompaniesCount")}}';
                $.ajax({
                    type: "POST",
                    url: actionUrl,
                    data: form.serialize(), // serializes the form's elements.
                    success: function(data)
                    {
                        $('.overlay').css('display','none');
                        let html = '';
                        if(data.status == "success"){
                            let record = data.data > 1 ? "records":"record"
                            html = `<h6>${data.data} ${record} found.</h6><p>Are you sure to proceed export</p>`
                        }else{
                            html = `<h6>No records found</h6>`
                        }
                        $("#exportCountModal").find("#content").html(html);
                        $("#exportModal").modal('hide');
                        $("#exportCountModal").modal('show');
                    },
                    error:function(error){
                        $('.overlay').css('display','none');
                        let html = `<h6>No records found</h6>`;
                        $("#exportCountModal").find("#content").html(html);
                        $("#exportCountModal").modal('show');
                    }
                });
            });

            $("#exportFilters").submit(function(e){
                e.preventDefault();
                $('.overlay').css('display','block');
                var form = $("#exportFilters");
                var actionUrl = form.attr('action');
                $.ajax({
                    type: "POST",
                    url: actionUrl,
                    data: form.serialize(), // serializes the form's elements.
                    success: function(data)
                    {
                        $('.overlay').css('display','none');
                        form[0].reset();
                        $(".select").val('').trigger('change');
                        $("#exportModal").modal('hide');
                        $("#exportCountModal").modal('hide');
                        toastr.success("It will email once it's done",'Your Export is in Process');
                    },
                    error:function(error){
                        $('.overlay').css('display','none');
                        $("#exportCountModal").modal('hide');
                        toastr.error(error.message,'Error');
                    }
                });
            });

            $('#closeCountModal').on('click',function(){
                $("#exportCountModal").modal('hide');
                $("#exportModal").modal('show');
            });

            $('#closeExportModal').on('click',function(){
                $("#exportCountModal").modal('hide');
                $("#exportModal").modal('hide');
                $("#exportFilters").trigger("reset");
                $(".select").val('').trigger('change');
            });
        });

    </script>
@endpush