@php
$location = $location ?? null;
@endphp

<div class="row g-3">
	
    <div class="col-md-6">
        <label class="form-label">Location Name</label>
        <input type="text" name="name"
               value="{{ old('name',$location->name ?? '') }}"
               class="form-control">
    </div>
	
    <div class="col-md-6">
        <label class="form-label">Location Type</label>
        <select name="location_type" class="form-select" id="location_type">
            <option value="regular_link"
                {{ old('location_type',$location->location_type ?? '')=='regular_link'?'selected':'' }}>
                Regular Contact Location
            </option>
            <option value="external_link"
                {{ old('location_type',$location->location_type ?? '')=='external_link'?'selected':'' }}>
                External Link
            </option>
        </select>
    </div>


    {{-- External --}}
    <div class="col-md-6 external-field">
        <label class="form-label">External Email</label>
        <input type="email" name="external_email"
               value="{{ old('external_email',$location->external_email ?? '') }}"
               class="form-control">
    </div>

    <div class="col-md-6 external-field">
        <label class="form-label">External URL</label>
        <input type="url" name="external_url"
               value="{{ old('external_url',$location->external_url ?? '') }}"
               class="form-control">
    </div>

    {{-- Regular Location --}}
	<div class="row  g-3 regular-field">
		<div class="col-md-4 ">
			<label class="form-label">Contact Location Type</label>
			<select name="contact_location_type"
					id="contact_location_type"
					class="form-select">
				<option value="US"
					{{ old('contact_location_type',$location->contact_location_type ?? '')=='US'?'selected':'' }}>
					US
				</option>
				<option value="International"
					{{ old('contact_location_type',$location->contact_location_type ?? '')=='International'?'selected':'' }}>
					International
				</option>
			</select>
		</div>

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

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

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

		<div class="col-md-4  state-dropdown">
			<label class="form-label">State</label>
			<select name="state" class="form-select">
				@php
					$states = ['AL'=>'Alabama','AK'=>'Alaska','AZ'=>'Arizona','CA'=>'California',
							   'FL'=>'Florida','GA'=>'Georgia','NY'=>'New York','TX'=>'Texas'];
				@endphp
				@foreach($states as $key=>$val)
					<option value="{{ $key }}"
						{{ old('state',$location->state ?? '')==$key?'selected':'' }}>
						{{ $val }}
					</option>
				@endforeach
			</select>
		</div>

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

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

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

		<div class="col-md-6 ">
			<label class="form-label">Email</label>
			<input type="email" name="email"
				   value="{{ old('email',$location->email ?? '') }}"
				   class="form-control">
		</div>

		 <div class="col-12 mt-4 ">
			<h5 class="fw-bold">Map Details</h5>
		</div>
		<div class="col-md-6 ">
			<label class="form-label">Map Zoom Level (Small)</label>
			<input type="number" name="map_zoom_level"
				   value="{{ old('map_zoom_level',$location->map_zoom_level ?? 12) }}"
				   class="form-control">
		</div>

		<div class="col-md-6 ">
			<label class="form-label">Map Zoom Level (Main)</label>
			<input type="number" name="single_map_zoom_level"
				   value="{{ old('single_map_zoom_level',$location->single_map_zoom_level ?? 14) }}"
				   class="form-control">
		</div>

		<div class="col-md-6 ">
			<label class="form-label">View Larger Map URL</label>
			<input type="url" name="large_map_url"
				   value="{{ old('large_map_url',$location->large_map_url ?? '') }}"
				   class="form-control">
		</div>

		<div class="col-md-6 ">
			<label class="form-label">Headquarter Picture</label>
			<input type="file" name="headquarter_image" class="form-control">
			@if(!empty($location?->headquarter_image))
				<img src="{{ asset($location->headquarter_image) }}"
					 class="mt-2" width="120">
			@endif
		</div>

		{{-- SEO / Meta --}}
		<div class="col-12 mt-4 ">
			<h5 class="fw-bold">SEO / Meta Details</h5>
		</div>

		<div class="col-12 ">
			<label class="form-label">Content</label>
			<textarea name="content"
					  class="form-control editor"
					  rows="4">{{ old('content',$location->content ?? '') }}</textarea>
		</div>

		<div class="col-md-12 ">
			<label class="form-label">Meta Title</label>
			<input type="text" name="meta_title"
				   value="{{ old('meta_title',$location->meta_title ?? '') }}"
				   class="form-control">
		</div>

		<div class="col-md-12 ">
			<label class="form-label">Meta Description</label>
			<textarea name="meta_desc"
					  class="form-control"
					  rows="2">{{ old('meta_desc',$location->meta_desc ?? '') }}</textarea>
		</div>

		<div class="col-12 ">
			<label class="form-label">SEO Text</label>
			<textarea name="seo_text"
					  class="form-control editor"
					  rows="3">{{ old('seo_text',$location->seo_text ?? '') }}</textarea>
		</div>
	</div>
		<div class="col-md-6 d-flex align-items-center mt-3">
			<div class="form-check form-switch">
				<input type="checkbox" class="form-check-input"
					   name="is_published" value="1"
					   {{ old('is_published',$location->is_published ?? false) ? 'checked' : '' }}>
				<label class="form-check-label">Publish This</label>
			</div>
		</div>
	

</div>

@push('scripts')
<script>
function toggleLocationFields(){
    let type = $('#location_type').val();
    $('.external-field').toggle(type === 'external_link');
    $('.regular-field').toggle(type !== 'external_link');
}

function toggleStateField(){
    let type = $('#contact_location_type').val();
    $('.state-dropdown').toggle(type === 'US');
    $('.state-textbox').toggle(type === 'International');
}

$(document).ready(function(){
    toggleLocationFields();
    toggleStateField();
    $('#location_type').change(toggleLocationFields);
    $('#contact_location_type').change(toggleStateField);
});
</script>
<!-- Place the first <script> tag in your HTML's <head> -->
<script src="https://cdn.tiny.cloud/1/6d6xltg2exukim76qxrsk3ecnnfztm3laf53xvwnyxmnc146/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

<!-- Place the following <script> and <textarea> tags your HTML's <body> -->
<script>
tinymce.init({
    selector: 'textarea',

    height: 400,

    plugins: [
        'advlist',
        'autolink',
        'lists',
        'link',
        'image',
        'charmap',
        'preview',
        'anchor',
        'searchreplace',
        'visualblocks',
        'code',
        'fullscreen',
        'insertdatetime',
        'media',
        'table',
        'help',
        'wordcount',
		'uploadcare'
    ],

    toolbar: `
        undo redo |
        formatselect |
        bold italic underline |
        forecolor backcolor |
        alignleft aligncenter alignright alignjustify |
        bullist numlist |
        link image table |
        code fullscreen
    `,

    menubar: 'file edit view insert format tools table help',

    branding: false
});
</script>

<textarea>
  Welcome to TinyMCE!
</textarea>

@endpush