<section class="accordion accordion-flush ps-2" id="accordion-receiver">
    <div class="accordion-item">

        {{-- Title & Buttons --}}
        <div class="pe-3 accordion-header title-decorators">
            <div class="gap-2 d-flex align-items-center">

                {{-- Title --}}
                <h4 class="m-0">Receptor</h4>

                {{-- Action Buttons --}}
                <div class="gap-2 d-flex align-items-center" onclick="event.stopPropagation()">

                    {{-- Modal Form --}}
                    <button
                        type="button" id="register_receiver_data"
                        class="px-2 ms-3 me-3 btn btn-sm text-uppercase btn-harsi"
                        data-bs-toggle="modal" data-bs-target="#receiverFormModal"
                        onclick="event.stopPropagation()"
                    >
                        ✚ Registrar nuevo
                    </button>

                    {{-- Searchbar --}}
                    <div id="search_receiver_block"
                        style="width: 18rem !important;" onclick="event.stopPropagation();">
                        <select id="search_receiver" class="search-input form-control"></select>
                    </div>

                    {{-- Clean Data --}}
                    <button type="button" id="clean_receiver_data" onclick="cleanReceiverData(); event.stopPropagation()"
                        class="px-2 ms-3 me-3 btn btn-sm btn-outline-dark">
                        <i class="fa fa-unlink"></i>&nbsp;
                        {{ __('common_actions')['unlink'] }} Receptor
                    </button>

                </div>

                {{-- Collapse Button --}}
                <button type="button" class="p-0 accordion-button caret-only ms-auto ps-3 collapsed"
                    data-bs-toggle="collapse" data-bs-target="#receiver-unique"
                    aria-expanded="true" aria-controls="receiver-unique"
                ></button>
            </div>
        </div>

        {{-- Content --}}
        <div id="receiver-unique"
            class="px-2 accordion-collapse collapse show row justify-content-start"
            aria-labelledby="receiver-unique-header"
        >
            <div class="px-2 text-center accordion-body" id="receiver-empty">
                <h6 class="warning-confirmation fst-italic">No has Registrado/Seleccionado ningún Receptor</h6>
            </div>
            <div class="px-2 accordion-body" id="receiver-form">

                {{-- Fiscal Data --}}
                <div class="row justify-content-start">

                    {{-- Tipo de Persona --}}
                    <div class="flex-shrink-0 col-12">
                        <div class="mb-2 d-flex align-self-center ps-2">

                            <p class="text-center text-uppercase minus-title">
                                Tipo de Persona:
                            </p>

                            <label for="is_moral_person" class="mx-3 switch switch_label">
                                <input type="checkbox" id="is_moral_person" name="is_moral_person">
                                <span class="specific_slider slider round"></span>
                            </label>

                            <p class="text-center text-uppercase" id="tax_person_type">
                                Física
                            </p>

                        </div>
                    </div>

                    {{-- RFC --}}
                    <div class="flex-shrink-0 col-4">
                        <div class="mb-3 input-group">
                            <div class="input-group-prepend">
                                <label for="tax_identifier" class="input-group-text">
                                    RFC {!! $required_field !!}
                                </label>
                            </div>

                            <input type="text" name="tax_identifier" id="tax_identifier" required
                                class="form-control tax-text" autocomplete="off" title=""
                                placeholder="RFC">

                            <input type="hidden" name="client_id" id="client_id" required>
                        </div>
                    </div>

                    {{-- Razón Social --}}
                    <div class="flex-shrink-0 col-6">
                        <div class="mb-3 input-group">
                            <div class="input-group-prepend">
                                <label for="legal_name" class="input-group-text">
                                    {{ __('entity_fields')['common']['legal_name'] }} {!! $required_field !!}
                                </label>
                            </div>

                            <input type="text" name="legal_name" id="legal_name" required
                                maxlength="200" pattern="^[A-ZÁÉÍÓÚÜÑ0-9 .,'&\/\-]{3,200}$"
                                title="{{ __('entity_forms')['pattern_titles']['fiscal_data']['legal_name'] }}"
                                class="form-control tax-text" autocomplete="off"
                                placeholder="{{ __('entity_fields')['common']['legal_name'] }}">
                        </div>
                    </div>

                    {{-- Regimen Fiscal --}}
                    @if ($is_mex_hotel)
                        <div class="flex-shrink-0 col-5">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="tax_system" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_system'] }} {!! $required_field !!}
                                    </label>
                                </div>

                                <select id="tax_system" name="tax_system" class="form-control" required></select>
                            </div>
                        </div>
                    @endif

                    {{-- Uso del CFDI --}}
                    <div class="flex-shrink-0 col-5">
                        <div class="mb-3 input-group">
                            <div class="input-group-prepend">
                                <label for="cfdi_use" class="input-group-text">
                                    Uso del CFDI {!! $required_field !!}
                                </label>
                            </div>

                            <select id="cfdi_use" name="cfdi_use" class="form-control" required></select>
                        </div>
                    </div>

                </div>

                {{-- Contact Data --}}
                <div>

                    {{-- Subtitle --}}
                    <h5 class="my-2 subtitle-decorators">Contacto</h5>

                    {{-- Sub Content --}}
                    <div class="ps-2 row justify-content-start">

                        {{-- Fiscal Email --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="email_billing" class="input-group-text">
                                        {{ __('entity_fields')['common']['email'] }} {!! $required_field !!}
                                    </label>
                                </div>
                                <input type="email" name="email_billing" id="email_billing" required
                                    maxlength="200" class="form-control" autocomplete="off"
                                    placeholder="ejemplo@gmail.com"/>
                            </div>
                        </div>

                        {{-- Telefono --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="phone_billing" class="input-group-text">
                                        {{ __('entity_fields')['common']['phone'] }}
                                    </label>
                                </div>
                                <input type="tel" name="phone_billing" id="phone_billing"
                                    maxlength="20" class="form-control" autocomplete="off"
                                    placeholder="+00 00 0000 0000"/>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- Fiscal Address --}}
                <div>

                    {{-- Subtitle --}}
                    <h5 class="my-2 subtitle-decorators">Dirección</h5>

                    {{-- Sub Content --}}
                    <div class="ps-2 row justify-content-start">

                        {{-- Postal Code --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_zip" class="input-group-text">
                                        {{ __('entity_fields')['common']['zip_compact'] }} {!! $required_field !!}
                                    </label>
                                </div>

                                <input type="text" name="individual_zip" id="individual_zip" required
                                    autocomplete="off" class="form-control" placeholder=" {{ __('entity_fields')['common']['zip'] }}"/>
                            </div>
                        </div>

                        {{-- Street --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_street" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['street'] }}
                                    </label>
                                </div>

                                <input type="text" name="individual_street" id="individual_street"
                                    pattern="^[A-Za-zÀ-ÿÑñ0-9 .,'#\-\/]{2,80}$"
                                    title="{{ __('entity_forms')['pattern_titles']['address']['street'] }}"
                                    minlength="2" maxlength="80" autocomplete="off"
                                    class="form-control tax-text" placeholder="{{ __('entity_fields')['common']['tax_address']['street'] }} ..."/>
                            </div>
                        </div>

                        {{-- Internal Number --}}
                        <div class="flex-shrink-0 col-2">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_int_number" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['int_number'] }}
                                    </label>
                                </div>

                                <input type="text" name="individual_int_number" id="individual_int_number"
                                    maxlength="50" pattern="^(S\/N|SN|s\/n|sn|[A-Za-z0-9\-\/# ]{1,50})$"
                                    title="{{ __('entity_forms')['pattern_titles']['address']['int_number'] }}"
                                    class="form-control tax-text" autocomplete="off" placeholder="00"/>
                            </div>
                        </div>

                        {{-- External Number --}}
                        <div class="flex-shrink-0 col-2">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_ext_number" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['ext_number'] }}
                                    </label>
                                </div>

                                <input type="text" name="individual_ext_number" id="individual_ext_number"
                                    maxlength="50" pattern="^(S\/N|SN|s\/n|sn|[A-Za-z0-9\-\/# ]{1,50})$"
                                    title="{{ __('entity_forms')['pattern_titles']['address']['ext_number'] }}"
                                    class="form-control tax-text" autocomplete="off" placeholder="00"/>
                            </div>
                        </div>

                        {{-- Neighborhood --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_neighborhood" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['neighborhood'] }}
                                    </label>
                                </div>

                                <select name="individual_neighborhood" id="individual_neighborhood"
                                    class="selectpicker form-control" data-live-search="true"
                                    title="{{ mb_strtoupper(__('entity_fields')['common']['tax_address']['neighborhood']) }} ...">
                                </select>
                            </div>
                        </div>

                        {{-- City --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_city" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['city'] }}
                                    </label>
                                </div>

                                <input type="text" name="individual_city" id="individual_city"
                                    class="form-control tax-text" autocomplete="off"
                                    placeholder="{{ __('entity_fields')['common']['tax_address']['city'] }} ..."/>
                            </div>
                        </div>

                        {{-- Municipality --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_municipality" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['municipality'] }}
                                    </label>
                                </div>

                                <input type="text" name="individual_municipality" id="individual_municipality"
                                    minlength="2" maxlength="60" autocomplete="off"
                                    pattern="^[A-Za-zÀ-ÿÑñ .,'\-]{2,60}$" class="form-control tax-text"
                                    title="{{ __('entity_forms')['pattern_titles']['address']['municipality'] }}"
                                    placeholder="{{ __('entity_fields')['common']['tax_address']['municipality'] }} ..."/>
                            </div>
                        </div>

                        {{-- State --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_state" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['state'] }}
                                    </label>
                                </div>

                                <input type="text" name="individual_state" id="individual_state"
                                    minlength="2" maxlength="60" autocomplete="off"
                                    pattern="^[A-Za-zÀ-ÿÑñ .,'\-]{2,60}$" list="tx-mx-states"
                                    title="{{ __('entity_forms')['pattern_titles']['address']['state'] }}"
                                    class="form-control tax-text" placeholder="{{ __('entity_fields')['common']['tax_address']['state'] }} ..."/>

                                <datalist id="tx-mx-states"></datalist>
                            </div>
                        </div>

                        {{-- Country --}}
                        <div class="flex-shrink-0 col-4">
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="individual_country" class="input-group-text">
                                        {{ __('entity_fields')['common']['tax_address']['country'] }}
                                    </label>
                                </div>

                                <select name="individual_country" id="individual_country"
                                    data-live-search="true" data-size="10" data-container="body"
                                    class="selectpicker form-control"
                                    title="{{ __('common_actions')['select'] }}..."
                                >
                                    @foreach ($country_sets as $c_code)
                                        <option value="{{ $c_code }}">{{ mb_strtoupper(__("countries.$c_code")) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>
                </div>

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