@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"
               placeholder="Title"
               value="{{ old('title', $cac->title) }}"
        />
        @error('title') <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"
               placeholder="Address"
               autocomplete="address-line1"
               value="{{ old('address1', $cac->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"
               placeholder="Address Continued"
               autocomplete="address-line2"
               value="{{ old('address2', $cac->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"
               placeholder="City"
               autocomplete="address-level2"
               value="{{ old('city', $cac->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"
               placeholder="State"
               autocomplete="address-level1"
               value="{{ old('state', $cac->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"
               placeholder="ZIP"
               autocomplete="postal-code"
               value="{{ old('zip', $cac->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"
               placeholder="Country"
               autocomplete="country-name"
               value="{{ old('country', $cac->country) }}"
        />
        @error('country') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>
<div class="row">
    <div class="col form-group">
        <label for="about" class="form-label">About Your Community</label>
        <textarea class="form-control @error('about') is-invalid @enderror"
                  id="about"
                  name="about"
                  rows="5"
                  placeholder="About Your Community"
                  style="height:200px;">{{ old('about', $cac->about) }}</textarea>
        @error('about') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
</div>
@if(Route::currentRouteName() == 'cacs.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"
                   placeholder="Latitude"
                   value="{{ old('latitude', $cac->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"
                   placeholder="Longitude"
                   value="{{ old('longitude', $cac->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 CAC 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>
    <div class="row">
        <div class="col form-group">
            <label for="photo" class="form-label">Photo</label>
            <input class="form-control @error('photo') is-invalid @enderror"
                   name="photo"
                   type="file"
                   id="photo"
                   placeholder="Photo"
            />
            @error('photo') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>
    <div class="row">
        <div class="col form-group">
            <label for="business_plan" class="form-label">Business Plan</label>
            <textarea class="form-control @error('business_plan') is-invalid @enderror"
                  id="business_plan"
                  name="business_plan"
                  rows="5"
                  placeholder="Your Community Business Plan"
                  style="height:200px;">{{ old('business_plan', $cac->business_plan) }}</textarea>
            @error('business_plan') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>
@endif
<button type="submit" class="btn btn-primary"><i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Community</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>
    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>