@csrf

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

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

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

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

<div class="row">
    <div class="col-md-6 form-group">
        <label for="phone" class="form-label">Phone</label>
        <input class="form-control @error('phone') is-invalid @enderror"
            name="phone"
            id="phone"
            type="text"
            value="{{ old('phone', $vendor->phone) }}"
        />
        @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
    <div class="col-md-6 form-group">
        <label for="email" class="form-label">Email</label>
        <input class="form-control @error('email') is-invalid @enderror"
            name="email"
            id="email"
            type="text"
            value="{{ old('email', $vendor->email) }}"
        />
        @error('email') <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', $vendor->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', $vendor->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', $vendor->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', $vendor->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', $vendor->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', $vendor->country) }}"
        />
        @error('country') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>

@if(Route::currentRouteName() == 'cacs.vendors.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', $vendor->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', $vendor->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
                </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 Vendor</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: '#about',
        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>