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

@push('styles')
<link href="{{ asset('admin_assets/vendors/dropzone/dropzone.css') }}" rel="stylesheet">
@endpush
<div class="row g-3">
	 <div class="col-12">
		<div class="p-3 bg-light border-start border-4 border-primary rounded">
			<h5 class="fw-bold mb-0">Contact Information</h5>
		</div>
	</div>
	
	<div class="col-md-6">
        <label class="form-label">Location Name <span class="text-danger">*</span></label>
        <input type="text" name="name"
               value="{{ old('name', $location->name ?? '') }}"
               class="form-control @error('name') is-invalid @enderror">
        @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    {{-- Location Type --}}
    <div class="col-md-6">
        <label class="form-label">Location Type <span class="text-danger">*</span></label>
        <select name="location_type"
                id="location_type"
                class="form-select @error('location_type') is-invalid @enderror">
            <option value="regular_link"
                {{ old('location_type', $location->location_type ?? '') == 'regular_link' ? 'selected' : '' }}>
                Regular Location
            </option>
            <option value="external_link"
                {{ old('location_type', $location->location_type ?? '') == 'external_link' ? 'selected' : '' }}>
                External Location
            </option>
        </select>
        @error('location_type')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    {{-- ========== EXTERNAL LINK FIELDS ========== --}}
    <div class="col-md-6 external-field">
        <label class="form-label">External Email <span class="text-danger">*</span></label>
        <input type="email" name="external_email"
               value="{{ old('external_email', $location->external_email ?? '') }}"
               class="form-control @error('external_email') is-invalid @enderror">
        @error('external_email')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6 external-field">
        <label class="form-label">External URL <span class="text-danger">*</span></label>
        <input type="url" name="external_url"
               value="{{ old('external_url', $location->external_url ?? '') }}"
               class="form-control @error('external_url') is-invalid @enderror">
        @error('external_url')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    {{-- ========== REGULAR LOCATION FIELDS ========== --}}
    <div class="col-12 regular-field">
    <div class="row g-3">

        <div class="col-md-4 ">
            <label class="form-label">Contact Location Type <span class="text-danger">*</span></label>
            <select name="contact_location_type"
                    id="contact_location_type"
                    class="form-select @error('contact_location_type') is-invalid @enderror">
                <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>
            @error('contact_location_type')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label class="form-label">Street Address <span class="text-danger">*</span></label>
            <input type="text" name="address"
                   value="{{ old('address', $location->address ?? '') }}"
                   class="form-control @error('address') is-invalid @enderror">
            @error('address')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </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 <span class="text-danger">*</span></label>
            <input type="text" name="city"
                   value="{{ old('city', $location->city ?? '') }}"
                   class="form-control @error('city') is-invalid @enderror">
            @error('city')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- US State --}}
		@php
		$state_list = array ('alabama'=>"AL", 'Alaska'=>"AK", 'Arizona'=>"AZ", 'Arkansas'=>"AR", 'California'=>"CA", 'Colorado'=>"CO", 'Connecticut'=>"CT", 'Delaware'=>"DE", 'District Of Columbia'=>"DC", 'Florida'=>"FL", 'Georgia'=>"GA", 'Hawaii'=>"HI", 'Idaho'=>"ID", 'Illinois'=>"IL", 'Indiana'=>"IN", 'Iowa'=>"IA", 'Kansas'=>"KS", 'Kentucky'=>"KY", 'Louisiana'=>"LA", 'Maine'=>"ME", 'Maryland'=>"MD", 'Massachusetts'=>"MA", 'Michigan'=>"MI", 'Minnesota'=>"MN", 'Mississippi'=>"MS", 'Missouri'=>"MO", 'Montana'=>"MT", 'Nebraska'=>"NE", 'Nevada'=>"NV", 'New Hampshire'=>"NH", 'New Jersey'=>"NJ", 'New Mexico'=>"NM", 'New York'=>"NY", 'North Carolina'=>"NC", 'North Dakota'=>"ND", 'Ohio'=>"OH", 'Oklahoma'=>"OK", 'Oregon'=>"OR", 'Pennsylvania'=>"PA", 'Rhode Island'=>"RI", 'South Carolina'=>"SC", 'South Dakota'=>"SD", 'Tennessee'=>"TN", 'Texas'=>"TX", 'Utah'=>"UT", 'Vermont'=>"VT", 'Virginia'=>"VA", 'Washington'=>"WA", 'West Virginia'=>"WV", 'Wisconsin'=>"WI", 'Wyoming'=>"WY");
		
		@endphp
        <div class="col-md-4 state-dropdown">
            <label class="form-label">State <span class="text-danger">*</span></label>
            <select name="state" class="form-select @error('state') is-invalid @enderror">
                <option value="">Select</option>
                @foreach($state_list as $k=>$v)
                    <option value="{{ $v }}"
                        {{ old('state', $location->state ?? '') == $v ? 'selected' : '' }}>
                        {{ $k }}
                    </option>
                @endforeach
            </select>
            @error('state')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- International State --}}
        <div class="col-md-4 state-textbox">
            <label class="form-label">State <span class="text-danger">*</span></label>
            <input type="text" name="state_text"
                   value="{{ old('state_text', $location->state_text ?? '') }}"
                   class="form-control @error('state_text') is-invalid @enderror">
            @error('state_text')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-4">
            <label class="form-label">Zip Code <span class="text-danger">*</span></label>
            <input type="text" name="zip"
                   value="{{ old('zip', $location->zip ?? '') }}"
                   class="form-control @error('zip') is-invalid @enderror">
            @error('zip')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6">
            <label class="form-label">Phone <span class="text-danger">*</span></label>
            <input type="text" name="phone"
                   value="{{ old('phone', $location->phone ?? '') }}"
                   class="form-control @error('phone') is-invalid @enderror">
            @error('phone')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6">
            <label class="form-label">Email <span class="text-danger">*</span></label>
            <input type="email" name="email"
                   value="{{ old('email', $location->email ?? '') }}"
                   class="form-control @error('email') is-invalid @enderror">
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
		
		{{-- SOCIAL LINKS --}}
		<div class="col-12 mt-4">
			 <div class="p-3 bg-light border-start border-4 border-primary rounded">
				<h5 class="fw-bold mb-0">Social Links</h5>
			</div>
		</div>

		<div class="col-md-4">
			<label class="form-label">Facebook URL</label>
			<input type="url" name="facebook_url"
				   value="{{ old('facebook_url', $location->facebook_url ?? '') }}"
				   class="form-control @error('facebook_url') is-invalid @enderror">
			@error('facebook_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">Twitter URL</label>
			<input type="url" name="twitter_url"
				   value="{{ old('twitter_url', $location->twitter_url ?? '') }}"
				   class="form-control @error('twitter_url') is-invalid @enderror">
			@error('twitter_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">Instagram URL</label>
			<input type="url" name="instagram_url"
				   value="{{ old('instagram_url', $location->instagram_url ?? '') }}"
				   class="form-control @error('instagram_url') is-invalid @enderror">
			@error('instagram_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">LinkedIn URL</label>
			<input type="url" name="linkedin_url"
				   value="{{ old('linkedin_url', $location->linkedin_url ?? '') }}"
				   class="form-control @error('linkedin_url') is-invalid @enderror">
			@error('linkedin_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">YouTube URL</label>
			<input type="url" name="youtube_url"
				   value="{{ old('youtube_url', $location->youtube_url ?? '') }}"
				   class="form-control @error('youtube_url') is-invalid @enderror">
			@error('youtube_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">Vimeo URL</label>
			<input type="url" name="vimeo_url"
				   value="{{ old('vimeo_url', $location->vimeo_url ?? '') }}"
				   class="form-control @error('vimeo_url') is-invalid @enderror">
			@error('vimeo_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">Yelp URL</label>
			<input type="url" name="yelp_url"
				   value="{{ old('yelp_url', $location->yelp_url ?? '') }}"
				   class="form-control @error('yelp_url') is-invalid @enderror">
			@error('yelp_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">Google Reviews URL</label>
			<input type="url" name="google_reviews_url"
				   value="{{ old('google_reviews_url', $location->google_reviews_url ?? '') }}"
				   class="form-control @error('google_reviews_url') is-invalid @enderror">
			@error('google_reviews_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		<div class="col-md-4">
			<label class="form-label">Facebook Reviews URL</label>
			<input type="url" name="facebook_reviews_url"
				   value="{{ old('facebook_reviews_url', $location->facebook_reviews_url ?? '') }}"
				   class="form-control @error('facebook_reviews_url') is-invalid @enderror">
			@error('facebook_reviews_url')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror
		</div>

		@php
$days = [
    'monday' => 'Monday',
    'tuesday' => 'Tuesday',
    'wednesday' => 'Wednesday',
    'thursday' => 'Thursday',
    'friday' => 'Friday',
    'saturday' => 'Saturday',
    'sunday' => 'Sunday',
];

$hrs  = ['01','02','03','04','05','06','07','08','09','10','11','12'];
$mins = ['00','05','10','15','20','25','30','35','40','45','50','55'];

$stored = old('hours', $location->hours_of_operation ?? []);
@endphp

<div class="col-12 mt-4 ">
    <div class="p-3 bg-light border-start border-4 border-primary rounded">
        <h5 class="fw-bold mb-0">Opening Hours</h5>
    </div>
</div>

@foreach($days as $key => $label)
@php
    $day  = $stored[$key] ?? [];
    $mode = $day['mode'] ?? 'open';
@endphp

<!--<pre> @php print_r($day) @endphp</pre>-->
<div class="row g-3 regular-field align-items-center hours-row location-hours-opreation" data-day="{{ $key }}">

    {{-- Day Name --}}
    <div class="col-md-2">
		<!--<label class="form-label mb-1 small text-muted">Weekday</label> -->
        <input type="text"
               name="hours[{{ $key }}][day_label]"
               value="{{ $day['day_label'] ?? $label }}"
               class="form-control fw-semibold">
    </div>

    {{-- Mode Select --}}
    <div class="col-md-2">
        <!--<label class="form-label mb-1 small text-muted">Status</label>-->
        <select name="hours[{{ $key }}][mode]"
                class="form-select hours-mode"
                data-day="{{ $key }}">
            <option value="open"   {{ $mode=='open' ? 'selected' : '' }}>Open</option>
            <option value="closed" {{ $mode=='closed' ? 'selected' : '' }}>Closed</option>
            <option value="custom" {{ $mode=='custom' ? 'selected' : '' }}>Custom</option>
        </select>
    </div>

    {{-- Time --}}
    <div class="col-md-8 time-box {{ $mode!='open' ? 'd-none' : '' }}"
         id="time-{{ $key }}">
        <!--<label class="form-label mb-1 small text-muted">Start Date</label>-->
        <div class="d-flex gap-2">
            <select name="hours[{{ $key }}][start_hour]" class="form-select">
                @foreach($hrs as $h)
                    <option value="{{ $h }}" @selected(($day['start_hour'] ?? '')==$h)>{{ $h }}</option>
                @endforeach
            </select>

            <select name="hours[{{ $key }}][start_min]" class="form-select">
                @foreach($mins as $m)
                    <option value="{{ $m }}" @selected(($day['start_min'] ?? '')==$m)>{{ $m }}</option>
                @endforeach
            </select>

            <select name="hours[{{ $key }}][start_ampm]" class="form-select">
                <option value="AM" @selected(($day['start_ampm'] ?? '')=='AM')>AM</option>
                <option value="PM" @selected(($day['start_ampm'] ?? '')=='PM')>PM</option>
            </select>

            <span class="align-self-center">to</span>

            <select name="hours[{{ $key }}][end_hour]" class="form-select">
                @foreach($hrs as $h)
                    <option value="{{ $h }}" @selected(($day['end_hour'] ?? '')==$h)>{{ $h }}</option>
                @endforeach
            </select>

            <select name="hours[{{ $key }}][end_min]" class="form-select">
                @foreach($mins as $m)
                    <option value="{{ $m }}" @selected(($day['end_min'] ?? '')==$m)>{{ $m }}</option>
                @endforeach
            </select>

            <select name="hours[{{ $key }}][end_ampm]" class="form-select">
                <option value="AM" @selected(($day['end_ampm'] ?? '')=='AM')>AM</option>
                <option value="PM" @selected(($day['end_ampm'] ?? '')=='PM')>PM</option>
            </select>
        </div>
    </div>

    {{-- Custom Text --}}
    <div class="col-md-6 custom-box {{ $mode!='custom' ? 'd-none' : '' }}"
         id="custom-{{ $key }}">
       <!-- <label class="form-label mb-1 small text-muted">Custom Text</label> -->
        <input type="text"
               name="hours[{{ $key }}][custom_text]"
               value="{{ $day['custom_text'] ?? '' }}"
               class="form-control"
               placeholder="Enter your custom text">
    </div>

</div>
@endforeach


<div class="col-12 mt-4 ">
	<div class="p-3 bg-light border-start border-4 border-primary rounded">
		<h5 class="fw-bold mb-0">API's</h5>
	</div>
	
</div>





		 <div class="col-12 mt-4 ">
			<div class="p-3 bg-light border-start border-4 border-primary rounded">
				<h5 class="fw-bold mb-0">Map Details</h5>
			</div>
			
		</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> -->
		
		<div class="col-md-6 ">
			<label class="form-label">Headquarter Picture</label>
			<input type="file" name="headquarter_image" class="form-control">
			<!--<div class="dropzone dropzone-multiple p-0" id="dropzone" data-dropzone="data-dropzone" data-options='{"url":"valid/url","maxFiles":1,"dictDefaultMessage":"Choose or Drop a file here"}'>
                  <div class="fallback">
                    <input type="file" name="headquarter_image" />
                  </div>
                  <div class="dz-message" data-dz-message="data-dz-message">
                    <div class="dz-message-text"><img class="me-2" src="{{ asset('admin_assets/assets/img/icons/cloud-upload.svg') }}" width="25" alt="" />Drop your file here</div>
                  </div>
                  <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
                    <div class="d-flex pb-3 border-bottom border-translucent media px-2">
                      <div class="border p-2 rounded-2 me-2"><img class="rounded-2 dz-image" src="{{ asset('admin_assets/assets/img/icons/file.png') }}" alt="..." data-dz-thumbnail="data-dz-thumbnail" /></div>
                      <div class="flex-1 d-flex flex-between-center">
                        <div>
                          <h6 data-dz-name="data-dz-name"></h6>
                          <div class="d-flex align-items-center">
                            <p class="mb-0 fs-9 text-body-quaternary lh-1" data-dz-size="data-dz-size"></p>
                            <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
                          </div><span class="fs-10 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
                        </div>
                        <div class="dropdown">
                          <button class="btn btn-link text-body-quaternary btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h"></span></button>
                          <div class="dropdown-menu dropdown-menu-end border border-translucent py-2"><a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div> -->
			@if(!empty($location?->headquarter_image))
				<div class="image-wrapper position-relative d-inline-block  mt-2 uploaded_image_thumb"
					 data-id="{{ $location->id }}"
					 data-model="Location"
					 data-column="headquarter_image"
					 data-path="uploads/locations">

					<img src="{{ asset('uploads/locations/'.$location->headquarter_image) }}"
						 class="img-thumbnail" width="80">

					<button type="button"
							class="remove-image-btn image-remove-icon"
							title="Remove image">
						×
					</button>

				</div>
			@endif

		</div>
		
		

		{{-- SEO / Meta --}}
		<div class="col-12 mt-4 ">
			<div class="p-3 bg-light border-start border-4 border-primary rounded">
				<h5 class="fw-bold mb-0">SEO / Meta Details</h5>
			</div>
		</div>

		<div class="col-12 ">
			<label class="form-label">Content</label>
			<textarea name="content" id=""
					  class="form-control editor ckeditor_large"
					  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 ckeditor-small"
					  rows="3">{{ old('seo_text',$location->seo_text ?? '') }}</textarea>
		</div>

	</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="status" value="1"
					   {{ old('status',$location->status ?? 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>

<script src="{{ asset('admin_assets/ckeditor/ckeditor.js') }}"></script>
<script>
    window.CKEDITOR_UPLOAD_URL =
        '{{ asset("admin_assets/ckfinder") }}/core/connector/php/connector.php?command=QuickUpload';
</script>
<script src="{{ asset('admin_assets/assets/js/ckeditor-large.js') }}"></script>
<script src="{{ asset('admin_assets/assets/js/ckeditor-small.js') }}"></script>
<script>
    $(document).ready(function () {
        initCkeditorFull();
		initCkeditorSmall();
    });
</script>
<script src="{{ asset('admin_assets/vendors/dropzone/dropzone-min.js') }}"> </script>

<script>
$(document).on('change', '.hours-mode', function () {
    const day  = $(this).data('day');
    const mode = $(this).val();

    $('#time-' + day).toggleClass('d-none', mode !== 'open');
    $('#custom-' + day).toggleClass('d-none', mode !== 'custom');
});
</script>

@endpush