@csrf

@include('partials.validation-errors', ['displayErrors' => false])

<div class="row">
    <div class="col form-group">
        <label for="title" class="form-label">Title</label>
        <input class="form-control @error('title') is-invalid @enderror"
            name="title"
            id="title"
            type="text"
            value="{{ old('title', $event->title) }}"
        />
        @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

<div class="row">
    <img src="{{ ($event->photo) ? Storage::url('cacs/' . $cac->id . '/' . $event->photo) : asset('img/placeholder-1024x768.svg') }}" alt="{{ $event->title }}" class="img-fluid mb-2" />
    <div class="col form-group">
        <label for="photo" class="form-label">Photo</label>
        <input class="form-control @error('photo') is-invalid @enderror"
            name="photo"
            id="photo"
            type="file"
        />
        @error('photo') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

<div class="row">
    <div class="col form-group">
        <label for="description" class="form-label">Description</label>
        <textarea class="form-control @error('description') is-invalid @enderror"
                  id="description"
                  name="description"
                  rows="5">{{ old('description', $event->description) }}</textarea>
        @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

<div class="row">
    <div class="col-6 form-group">
        <label for="starts_at" class="form-label">Starts At</label>
        <input class="form-control @error('starts_at') is-invalid @enderror"
               name="starts_at"
               type="datetime-local"
               id="starts_at"
               value="{{ old('starts_at', $event->starts_at) }}"
        />
        @error('starts_at') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-6 form-group">
        <label for="ends_at" class="form-label">Ends At</label>
        <input class="form-control @error('ends_at') is-invalid @enderror"
               name="ends_at"
               type="datetime-local"
               id="ends_at"
               value="{{ old('ends_at', $event->ends_at) }}"
        />
        @error('ends_at') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

<div class="row">
    <div class="col-md-6 form-group">
        <label for="address1" class="form-label">Address</label>
        <input class="form-control @error('address1') is-invalid @enderror"
               name="address1"
               id="address1"
               type="text"
               autocomplete="address-line1"
               value="{{ old('address1', $event->address1) }}"
        />
        @error('address1') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-6 form-group">
        <label for="address2" class="form-label">Address Continued</label>
        <input class="form-control @error('address2') is-invalid @enderror"
               name="address2"
               id="address2"
               type="text"
               autocomplete="address-line2"
               value="{{ old('address2', $event->address2) }}"
        />
        @error('address2') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

<div class="row">
    <div class="col-md-6 form-group">
        <label for="city" class="form-label">City</label>
        <input class="form-control @error('city') is-invalid @enderror"
               name="city"
               type="text"
               id="city"
               autocomplete="address-level2"
               value="{{ old('city', $event->city) }}"
        />
        @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-6 form-group">
        <label for="state" class="form-label">State</label>
        <input class="form-control @error('state') is-invalid @enderror"
               name="state"
               id="state"
               type="text"
               autocomplete="address-level1"
               value="{{ old('state', $event->state) }}"
        />
        @error('state') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

<div class="row">
    <div class="col-md-6 form-group">
        <label for="zip" class="form-label">ZIP</label>
        <input class="form-control @error('zip') is-invalid @enderror"
               name="zip"
               type="text"
               id="zip"
               autocomplete="postal-code"
               value="{{ old('zip', $event->zip) }}"
        />
        @error('zip') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-6 form-group">
        <label for="country" class="form-label">Country</label>
        <input class="form-control @error('country') is-invalid @enderror"
               name="country"
               id="country"
               type="text"
               autocomplete="country-name"
               value="{{ old('country', $event->country) }}"
        />
        @error('country') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

@if(Route::currentRouteName() == 'cacs.events.edit')
    <div class="row">
        <div class="col-md-6 form-group">
            <label for="latitude" class="form-label">Latitude</label>
            <input class="form-control @error('latitude') is-invalid @enderror"
                   name="latitude"
                   type="text"
                   id="latitude"
                   value="{{ old('latitude', $event->latitude) }}"
            />
            @error('latitude') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="col-md-6 form-group">
            <label for="longitude" class="form-label">Latitude</label>
            <input class="form-control @error('longitude') is-invalid @enderror"
                   name="longitude"
                   type="text"
                   id="longitude"
                   value="{{ old('longitude', $event->longitude) }}"
            />
            @error('longitude') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>

    <div class="row">
        <div class="col form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="1" name="use_geocoder" id="use_geocoder">
                <label class="form-check-label" for="use_geocoder">
                    &nbsp;Set latitude / longitude using Mapbox Geocoder API&nbsp;
                </label>
                <i class="bi bi-info-circle-fill text-primary"
                   data-bs-toggle="tooltip"
                   data-bs-placement="top"
                   title="If you check this box and make a change to your event address, the Mapbox Geocoder will
                   calculate the latitude and longitude automatically. Alternatively, you can leave this box unchecked
                   and manually enter the latitude and longitude.">
                </i>
            </div>
        </div>
    </div>
@endif

<button type="submit" class="btn btn-primary"><i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Event</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.14/web.js"></script>
<script src="https://cdn.tiny.cloud/1/f9fooujhh9num7f3plm9xaryp3zm6t3293xran7y9llobace/tinymce/6/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#description',
        plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount linkchecker',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    });

    const script = document.getElementById('search-js');
    script.onload = function() {
        mapboxsearch.config.accessToken = '{{ $mapboxAccessToken->access_token }}';
        let autofill = mapboxsearch.autofill({});
        autofill.addEventListener('retrieve', (event) => {
            $.ajax({
                url: '{{ route('cacs.autofill') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    access_token: '{{ $mapboxAccessToken->access_token }}'
                }
            });
        });
    };
</script>