@push('styles')
	<link href="{{ asset('admin_assets/vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
@endpush
<div class="card shadow-none border my-4 admin-contact-section">

    {{-- HEADER --}}
    <div class="card-header p-4 border-bottom bg-body">
        <h4 class="mb-0">{{ isset($contact) ? 'Edit Contact' : 'Create Contact' }}</h4>
    </div>

    <div class="card-body p-4">

        {{-- BASIC INFO --}}
        <h5 class="mb-3">Basic Info</h5>
        <div class="row g-3">

            <div class="col-md-4">
                <label class="form-label">First Name  <span class="text-danger">*</span></label>
                <input type="text" name="first_name" class="form-control"
                       value="{{ old('first_name', $contact->first_name ?? '') }}">
					   
					   @error('first_name')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Middle Name</label>
                <input type="text" name="middle_name" class="form-control"
                       value="{{ old('middle_name', $contact->middle_name ?? '') }}">
					   @error('middle_name')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Last Name <span class="text-danger">*</span></label>
                <input type="text" name="last_name" class="form-control"
                       value="{{ old('last_name', $contact->last_name ?? '') }}">
					    @error('last_name')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Gender <span class="text-danger">*</span></label>
                <select name="gender" class="form-control">
                    <option value="">Select</option>
                    <option value="male" @selected(old('gender', $contact->gender ?? '')=='male')>Male</option>
                    <option value="female" @selected(old('gender', $contact->gender ?? '')=='female')>Female</option>
                </select>
				@error('gender')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
			<div class="col-md-4">
                <label class="form-label">Age Group</label>
                <select name="age_group" class="form-control">
                    <option value="">Select</option>
                    <option value="0-5">0-5</option>
                    <option value="6-10">6-10</option>
                    <option value="11-15">11-15</option>
                    <option value="16+">16+</option>
                </select>
				
				@error('age_group')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
           <div class="col-md-4">
		   <label class="form-label">
                Date Of Birth
            </label>
    <div class="flatpickr-input-container">
        <div class="form-floating">

            <input
                type="text"
                id="dateOfBirthPicker"
                name="date_of_birth"
                class="form-control datetimepicker @error('date_of_birth') is-invalid @enderror"
                placeholder="Date of Birth"
                value="{{ old('date_of_birth', optional($contact->date_of_birth ?? null)->format('Y-m-d')) }}"
                data-options='{
                    "disableMobile": true,
                    "dateFormat": "Y-m-d",
                    
                }'
            >

            <span class="uil uil-calendar-alt flatpickr-icon text-body-tertiary"></span>


            @error('date_of_birth')
                <div class="invalid-feedback d-block">
                    {{ $message }}
                </div>
            @enderror

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

            

        </div>

        {{-- RELATIONS --}}
        <h5 class="mt-4 mb-3">Classification</h5>
        <div class="row g-3">

            <div class="col-md-6">
                <label class="form-label">Contact Type</label>
                <select name="contact_type_id" class="form-control">
                    <option value="">Select</option>
                    @foreach($contactTypes as $type)
                        <option value="{{ $type->id }}"
                            @selected(old('contact_type_id', $contact->contact_type_id ?? '') == $type->id)>
                            {{ $type->title }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-6">
                <label class="form-label">Contact Phase</label>
                <select name="contact_phase_id" class="form-control">
                    <option value="">Select</option>
                    @foreach($contactPhases as $phase)
                        <option value="{{ $phase->id }}"
                            @selected(old('contact_phase_id', $contact->contact_phase_id ?? '') == $phase->id)>
                            {{ $phase->title }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-12">
				<label class="form-label">Tags</label>

				@php
					$selectedTags = old('tags', isset($contact)
						? $contact->tags->pluck('id')->map(fn($id) => (string)$id)->toArray()
						: []
					);
				@endphp

				<select name="tags[]" class="form-control tag-select" multiple>

					{{-- existing tags --}}
					@foreach($tags as $tag)
						<option value="{{ $tag->id }}"
							@selected(in_array((string)$tag->id, $selectedTags, true))>
							{{ $tag->title }}
						</option>
					@endforeach

					{{-- new tags (important) --}}
					@foreach($selectedTags as $tag)
						@if(!$tags->pluck('id')->map(fn($id)=>(string)$id)->contains($tag))
							<option value="{{ $tag }}" selected>{{ $tag }}</option>
						@endif
					@endforeach

				</select>
				<div class="form-text text-muted mt-2">

				Select existing tags from the dropdown,
				or type a new tag and press
				<strong>Enter</strong>
				to add it.

			</div>
			</div>

        </div>

       
		{{-- ADDRESS --}}
		<h5 class="mt-4 mb-3">Address</h5>
		<div class="row g-3">

			<div class="col-md-6">
				<label class="form-label">Address Line 1</label>
				<input type="text" name="address1" class="form-control"
					   value="{{ old('address1', $contact->address1 ?? '') }}">
			</div>

			<div class="col-md-6">
				<label class="form-label">Address Line 2</label>
				<input type="text" name="address2" class="form-control"
					   value="{{ old('address2', $contact->address2 ?? '') }}">
			</div>

			<div class="col-md-4">
				<label class="form-label">City</label>
				<input type="text" name="city" class="form-control"
					   value="{{ old('city', $contact->city ?? '') }}">
			</div>

			<div class="col-md-4">
				<label class="form-label">State</label>
				<input type="text" name="state" class="form-control"
					   value="{{ old('state', $contact->state ?? '') }}">
			</div>

			<div class="col-md-4">
				<label class="form-label">ZIP Code</label>
				<input type="text" name="zip" class="form-control"
					   value="{{ old('zip', $contact->zip ?? '') }}">
			</div>

		</div>


		{{-- PHONE --}}
		<h5 class="mt-4 mb-3">Phone / Email</h5>
		<div class="row g-3">
			

			<div class="col-md-2">
				<label class="form-label">Phone 1 Label <span class="text-danger">*</span></label>

				<select name="phone1_label" class="form-control">
					<option value="">Select</option>

					@foreach(\App\Utilities\CrmUtility::phoneLabels() as $value => $label)

					<option value="{{ $value }}"
						{{ old('phone1_label', $contact->phone1_label ?? '') == $value ? 'selected' : '' }}>

						{{ $label }}

					</option>

				@endforeach

				</select>
				  @error('phone1_label')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
			</div>

			<div class="col-md-2">
				<label class="form-label">Phone 1 <span class="text-danger">*</span></label>
				<input type="text" name="phone1" class="form-control"
					   value="{{ old('phone1', $contact->phone1 ?? '') }}">
					    @error('phone1')
                    <div class="checkbox-error-msg text-danger mt-2  invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
			</div>

			<div class="col-md-2">
					<label class="form-label">Phone 2 Label</label>

					<select name="phone2_label" class="form-control">
						<option value="">Select</option>

						@foreach(\App\Utilities\CrmUtility::phoneLabels() as $value => $label)

						<option value="{{ $value }}"
							{{ old('phone2_label', $contact->phone2_label ?? '') == $value ? 'selected' : '' }}>

							{{ $label }}

						</option>

					@endforeach

					</select>
				</div>

			<div class="col-md-2">
				<label class="form-label">Phone 2</label>
				<input type="text" name="phone2" class="form-control"
					   value="{{ old('phone2', $contact->phone2 ?? '') }}">
			</div>
			
			<div class="col-md-4">
                <label class="form-label">Email <span class="text-danger">*</span></label>
                <input type="email" name="email" class="form-control" value="{{ old('email', $contact->email ?? '') }}">
                @error('email')
				<div class="checkbox-error-msg text-danger mt-2  invalid-feedback">{{ $message }}</div>
				@enderror
            </div>

		</div>


		{{-- GUARDIAN --}}
		<h5 class="mt-4 mb-3">Guardian Info</h5>
		<div class="row g-3">

			<div class="col-md-6">
				<label class="form-label">Mother / Guardian Name</label>
				<input type="text" name="mother_name" class="form-control"
					   value="{{ old('mother_name', $contact->mother_name ?? '') }}">
			</div>

			<div class="col-md-6">
				<label class="form-label">Father / Guardian Name</label>
				<input type="text" name="father_name" class="form-control"
					   value="{{ old('father_name', $contact->father_name ?? '') }}">
			</div>

		</div>


		{{-- EMERGENCY --}}
		<h5 class="mt-4 mb-3">Emergency Contact</h5>
		<div class="row g-3">

			<div class="col-md-6">
				<label class="form-label">Emergency Contact Name</label>
				<input type="text" name="emergency_contact_name" class="form-control"
					   value="{{ old('emergency_contact_name', $contact->emergency_contact_name ?? '') }}">
			</div>

			<div class="col-md-6">
				<label class="form-label">Emergency Contact Phone</label>
				<input type="text" name="emergency_contact_phone" class="form-control"
					   value="{{ old('emergency_contact_phone', $contact->emergency_contact_phone ?? '') }}">
			</div>

		</div>


		{{-- MARKETING --}}
		<h5 class="mt-4 mb-3">Marketing</h5>
		<div class="row g-3">

			<div class="col-md-6">
				<label class="form-label">Marketing Source</label>

				<select name="marketing_source_id" class="form-control">

					<option value="">Select</option>

					@foreach($marketing_sources as $source)

						<option value="{{ $source->id }}"
							@selected(old('marketing_source_id', $contact->marketing_source_id ?? '') == $source->id)>

							{{ $source->title }}

						</option>

					@endforeach

				</select>
			</div>

			<div class="col-md-6">
				<label class="form-label">Marketing Source Detail</label>
				<input type="text" name="marketing_source_detail" class="form-control"
					   value="{{ old('marketing_source_detail', $contact->marketing_source_detail ?? '') }}">
			</div>

		</div>

        {{-- ADDITIONAL --}}
        <div class="mt-4">
            <label class="form-label">Additional Info</label>
            <textarea name="additional_info" class="form-control" rows="3">{{ old('additional_info', $contact->additional_info ?? '') }}</textarea>
        </div>

        {{-- ACTION --}}
        <div class="d-flex gap-2 mt-4">
            <button class="btn btn-primary" type="submit">
                {{ isset($contact) ? 'Update' : 'Save' }}
            </button>
            <a href="{{ route('admin.contacts.index') }}" class="btn btn-secondary">Back</a>
        </div>

    </div>
</div>

@push('scripts')
<script src="{{ asset('admin_assets/vendors/flatpickr/flatpickr.min.js') }}"></script>

<script>
$(function () {

    $('.tag-select').select2({
        tags: true,
        tokenSeparators: [','],
        width: '100%',
        placeholder: 'Select or add tags',

        createTag: function (params) {
            return {
                id: params.term,
                text: params.term,
                newTag: true
            };
        }
    });
	
	
	flatpickr('#dateOfBirthPicker', {
        disableMobile: true,
        dateFormat: 'Y-m-d',
        maxDate: new Date(new Date().setDate(new Date().getDate() - 1))
    });

});
</script>
<style>
.contact-form h5{background: #ededed5e;padding: 10px;}
.form-floating > .form-control:not(:placeholder-shown){padding-top: 11.5px !important;}
.form-floating > .form-control{height: calc(2.175rem + 2px);min-height: calc(2.175rem + 2px);}
</style>
@endpush