@props(['lead' => [], 'pipelines' => [] ,'tags'=>[]])

<h4 class="text-primary mb-3">Lead Information</h4>
<div class="row">
    <div class="mb-3 col-md-3">
        <x-input-label for="lead type" required="true" :value="__('Lead Type')" />
        <select id="leadType" name="leadType" class="form-select form-select-sm"
            style="border-radius: 0.625rem !important; border: 1px solid #E6E6E6; height: 33px;">
            <option value="" disabled @selected(old('leadType', $lead['leadType'] ?? '' )=='' )>Select Lead Type</option>
            <option value="buyer" @selected(old('leadType', $lead['leadType'] ?? '' )=='buyer' )>Buyer</option>
            <option value="seller" @selected(old('leadType', $lead['leadType'] ?? '' )=='seller' )>Seller</option>
            <option value="investor" @selected(old('leadType', $lead['leadType'] ?? '' )=='investor' )>Investor</option>
            <option value="rental" @selected(old('leadType', $lead['leadType'] ?? '' )=='rental' )>Rental</option>
        </select>
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="f_name" required="true" :value="__('First Name')" />
        <x-text-input id="f_name" placeholder="Enter First Name" name="f_name" id="lead_first_name" :value="$lead['f_name'] ?? ''" />
        {{-- <input type="text" class="form-control" id="fName" x-model="contact.f_name" readonly> --}}
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="m_name" :value="__('Middle Name Initial')" />
        <x-text-input id="m_name" placeholder="Enter Middle Name Initial" name="m_name" id="lead_middle_name" :value="$lead['m_name'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="l_name" required="true" :value="__('Last Name')" />
        <x-text-input id="l_name" placeholder="Enter Last Name" name="l_name" id="lead_last_name" :value="$lead['l_name'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="nick_name" :value="__('Nick Name')" />
        <x-text-input id="nick_name" placeholder="Enter Nick Name" name="nick_name" id="lead_nick_name" :value="$lead['nick_name'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="company" :value="__('Company')" />
        <x-text-input id="company" placeholder="Enter Company Name" name="company" id="lead_company" :value="$lead['company'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="title" :value="__('Title')" />
        <x-text-input id="title" placeholder="Enter Title" name="title" id="lead_title" :value="$lead['title'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="email" required="true" :value="__('Email')" />
        <x-text-input id="email" placeholder="Enter Email" name="email" id="lead_email" :value="$lead['email'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="phone" required="true" :value="__('Phone Number')" />
        <x-text-input class="phone_number_formate" placeholder="Enter Phone Number" aria-label="phone number" name="phone" id="lead_phone" :value="$lead['phone'] ?? ''" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="additional_phone" :value="__('Additional Phone Number')" />
        <x-text-input class="phone_number_formate" placeholder="Enter Additional Phone Number" aria-label="phone number" name="additional_phone"
            :value="$lead['additional_phone'] ?? ''" id="lead_additional_number" />
    </div>
    <div class="mb-3 col-md-3">
        <x-input-label for="anyone_else_on_deed" :value="__('Anyone else on Deed')" />

        <!-- Info Icon with Tooltip -->
        <i class="bi bi-info-circle text-info"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="This field asks if there are other owners listed on the deed.">
        </i>
        <!-- Dropdown for Yes/No Selection -->
        <select id="anyone_else_on_deed" name="anyone_else_on_deed" class="form-select">
            <option value="" disabled selected> Select an option </option>
            <option value="yes" {{ ($lead['anyone_else_on_deed'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
            <option value="no" {{ ($lead['anyone_else_on_deed'] ?? '') === 'no' ? 'selected' : '' }}>No</option>
        </select>
        <span id="anyone_else_on_deed_message" style="display: none">Add more data in the Assignment section</span>
    </div>
    <div class="mb-3 col-md-3">
        <label class="form-label">Lead PipeLine Status</label>
        <select id="lead_status" class="form-select" name="lead_status">
            <option value="" selected disabled>Select Lead PipeLine Status</option>
            @forelse ($pipelines as $pipeline)
            <option value="{{ $pipeline['pipline_name'] }}"
                @selected(old('lead_status', $lead['lead_status'] ?? '' )==$pipeline['pipline_name'])>
                {{ $pipeline['pipline_name'] }}
            </option>
            @empty
            <option disabled>No pipelines available</option>
            @endforelse
        </select>
    </div>
    @if(isset($lead['tags']))
    <div class="mb-3 col-md-3">
        <label class="form-label">Tags/Properties of Interest</label>
        <select name="tags[]" class="multi-select form-control" multiple data-placeholder="Select Tags..." id="lead-tags">
            @php
            $leadTags = isset($lead['tags']) ? (is_array($lead['tags']) ? $lead['tags'] : explode(',', $lead['tags'])) : [];
            @endphp

            @foreach($leadTags as $option)
            <option value="{{ $option }}" {{ in_array($option, $leadTags) ? 'selected' : '' }}>
                {{ ucfirst(str_replace("-", " ", trim($option))) }}
            </option>
            @endforeach
        </select>
    </div>
    @else
    <div class="mb-3 col-md-3">
        <label class="form-label">Tags/Properties of Interest</label>
        <select name="tags[]" class="multi-select form-control" multiple data-placeholder="Select Tags..." id="lead-tags">

            @foreach($tags as $option)
            <option value="{{ $option }}">
            {{ ucfirst(str_replace("-", " ", trim($option))) }}
            </option>
            @endforeach
        </select>
    </div>
    @endif
</div>