@push('css')
<style>
    .iti--allow-dropdown {
        width: 100% !important;
    }
</style>
@endpush
<div class="row">
    <h4 class="text-primary mb-3 mt-4">Personal Information</h4>
    <div class="mb-3 col-md-3">
        <x-input-label for="f_name" :value="__('First Name')" />
        <x-text-input id="f_name" name="f_name" placeholder="Enter your First Name" type="text"
            :value="old('f_name') ?? ($contact['f_name'] ?? '')" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="m_name" :value="__('Middle Name Initial')" />
        <x-text-input id="m_name" name="m_name" placeholder="Enter your  Middle Name Initial" type="text"
            :value="old('m_name') ?? ($contact['m_name'] ?? '')" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="l_name" :value="__('Last Name')" />
        <x-text-input id="l_name" name="l_name" placeholder="Enter your Last Name" type="text"
            :value="old('l_name') ?? ($contact['l_name'] ?? '')" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="n_name" :value="__('Nick Name')" />
        <x-text-input id="n_name" name="n_name" placeholder="Enter your Nick Name" type="text"
            :value="old('n_name') ?? ($contact['n_name'] ?? '')" />
    </div>
</div>

<div class="row">
    <div class="mb-3 col-md-3">

        <x-input-label for="email" :value="__('Email')" :required="true" />
        <x-text-input id="email" name="email" type="email" placeholder="example@example.com"
            :value="old('email') ?? ($contact['email'] ?? '')" />
        <div class="mt-0">
            <div class="form-check custom-checkbox">
                <input type="checkbox" class="form-check-input" id="gridCheck">
                <label class="form-check-label form-label" for="gridCheck">
                    Assigned To Email Campaigns
                </label>
            </div>
        </div>
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="company" :value="__('Company')" />
        <x-text-input id="company" name="company" type="text" placeholder="Enter Company Name"
            class="form-control form-control-sm" :value="old('company') ?? ($contact['company'] ?? '')" />
    </div>
    <div class="mb-3 col-md-3">
    <x-input-label for="cell_phone" :value="__('Phone Number')" />
    <x-text-input class="phone_number_formate" id="cell_phone" name="cell_phone"
        placeholder="877-546-2015" aria-label="phone number"
        :value="old('cell_phone') ?? ($contact['cell_phone'] ?? '')" />
    <input type="hidden" id="cell_phone_full" name="cell_phone"  value="{{old('cell_phone') ?? ($contact['cell_phone'] ?? '')}}" />
</div>

<div class="mb-3 col-md-3">
    <x-input-label for="office_phone" :value="__('Additional Phone Number')" />
    <x-text-input class="phone_number_formate" id="office_phone" name="office_phone"
        placeholder="877-546-2015" aria-label="phone number"
        :value="old('office_phone') ?? ($contact['office_phone'] ?? '')" />
    <input type="hidden" id="office_phone_full" name="office_phone"  value="{{old('office_phone') ?? ($contact['office_phone'] ?? '')}}" />
</div>

    <div class="mb-3 col-md-3 ">
        <x-input-label for="website" :value="__('Website')" />
        <x-text-input class="form-control form-control-sm" name="website" placeholder="website" aria-label="website"
            :value="old('website') ?? ($contact['website'] ?? '')" />
    </div>
    <div class="mb-3 col-md-3 ">
        <label class="form-label">Preferred Method of Contact</label>

        <select name="preferred_contact_method[]"
            class="multi-select form-control form-control-sm select2-hidden-accessible contactBy" multiple tabindex="-1"
            aria-hidden="true" data-placeholder="Select Preferred Method of Contact...">
            {{-- <option value="" disabled selected hidden>Select preferred contact method...</option> --}}
            <option value="any" {{ in_array('any', $contact['preferred_contact_method'] ?? []) ? 'selected' : '' }}>
                Any</option>
            <option value="sms" {{ in_array('sms', $contact['preferred_contact_method'] ?? []) ? 'selected' : '' }}>
                SMS
            </option>
            <option value="email" {{ in_array('email', $contact['preferred_contact_method'] ?? []) ? 'selected' : '' }}>
                Email</option>
            <option value="phone" {{ in_array('phone', $contact['preferred_contact_method'] ?? []) ? 'selected' : '' }}>
                Phone</option>

        </select>
    </div>

    <div class="mb-3 col-md-3 ">
        <label class="form-label">Contact Source</label>
        <select name="contact_source[]"
            class="multi-select form-control form-control-sm contact-source select2-hidden-accessible" multiple
            data-placeholder="Select Contact Source...">
            @foreach ($contactSources as $source)
            <option value="{{ $source }}" {{ in_array($source, $contact['contact_source'] ?? []) ? 'selected' : '' }}>
                {{ ucfirst($source) }}
            </option>
            @endforeach
        </select>
    </div>

    <div class="mb-3 col-md-3 contact-pipeline-container ">
        <x-input-label form="contact_pipeline_status" :value="__('Contact Pipeline Status')" />

        <select wire:model="contactPipeline" class="form-control form-control-sm" name="conact_pipeline_status">
            <option value="" selected>Select Pipeline</option>
            @foreach ($pipelines as $pipeline)
            <option value="{{ $pipeline['pipline_name'] }}" @selected(old('conact_pipeline_status',
                $contact['conact_pipeline_status'] ?? '' )==$pipeline['pipline_name'])>{{ $pipeline['pipline_name'] }}
            </option>
            @endforeach
        </select>
    </div>



    <h4 class="text-primary mb-3 mt-4">Address</h4>


    <div class="mb-3 col-md-3  position-relative">
        <x-input-label for="street" :value="__('Street')" />
        <x-text-input id="street" name="street" placeholder="Enter Street" :value="old('street') ?? ($contact['street'] ?? '')" />

    </div>


    <div class="mb-3 col-md-3  position-relative">
        <x-input-label for="city" :value="__('City')" />
        <x-text-input id="city" name="city" placeholder="Enter City" :value="old('city') ?? ($contact['city'] ?? '')" />

    </div>

    <div class="mb-3 col-md-3  position-relative">
        <x-input-label for="state" :value="__('State')" />
        <x-text-input id="state" name="state" placeholder="Enter state" :value="old('state') ?? ($contact['state'] ?? '')" />

    </div>

    <div class="mb-3 col-md-3 position-relative">
        <div class="d-flex align-items-center">
            <x-input-label for="zip" :value="__('Zip Code')" />
        </div>
        <x-text-input
            maxlength="10"
            id="zip"
            name="zip"
            placeholder="Enter Zip Code"
            :value="old('zip') ?? ($contact['zip'] ?? '')" />
    </div>

    <div class="mb-3 col-md-3  position-relative">
        <x-input-label for="county" :value="__('County')" />
        <x-text-input id="county" name="county" placeholder="Enter County"
            :value="old('county') ?? ($contact['county'] ?? '')" />

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipElements.forEach(function(element) {
                new bootstrap.Tooltip(element);
            });


        });
    </script>