@extends('user::_layouts.authenticated.layout')

@section('title', __('messages.global.create_report'))

@section('css')
  {{-- Dropzone --}}
  @include('user::_layouts.authenticated._partials.dropzone_images_css')
@endsection

@section('content')

  <div class="row">

    <div class="col-lg-4">
    </div>

    <div class="col-lg-8 order-first">

      <div class="card card-user">
        <div class="card-header">
          <h5 class="card-title">{{ __('messages.global.report_found_animal') }}</h5>
        </div>
        <div class="card-body">
          <form id="report-form" enctype="multipart/form-data" method="post"
            action="{{ route('user.found_reports.store') }}">
            {{ csrf_field() }}

            <div class="row mb-3">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="images[]">
                    {{ __('messages.global.pictures') }}
                    ({{ __('messages.global.max_3_pictures') }})
                    <span class="text-danger">*</span>
                    <br><span class="text-primary">{{ __('messages.global.main_picture') }}</span>
                  </label>
                  <div class="form-control dropzone" id="dropzone" style="border: 1px solid #dddddd;"></div>
                </div>
                @if ($errors->has('images'))
                  <span class="small text-danger">{{ $errors->first('images') }}</span>
                @endif
                @if ($errors->has('images.0'))
                  <span class="small text-danger">{{ $errors->first('images.0') }}</span>
                @endif
              </div>
            </div>

            <div class="row">
              <div class="col-md-8">
                <div class="form-group">
                  <label for="location_address">{{ __('messages.global.address') }} <span
                      class="text-danger">*</span></label>
                  <input type="text" id="location_address" name="location_address" class="form-control"
                    placeholder="{{ __('messages.global.address') }}" value="{{ old('location_address') }}"
                    onFocus="geolocate()">
                  @if ($errors->has('location_address'))
                    <span class="small text-danger">{{ $errors->first('location_address') }}</span>
                  @endif
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label for="location_latitude">{{ __('messages.global.latitude') }} <span
                      class="text-danger">*</span></label>
                  <input type="text" readonly id="location_latitude" name="location_latitude" class="form-control"
                    placeholder="{{ __('messages.global.latitude') }}" value="{{ old('location_latitude') }}">
                  @if ($errors->has('location_latitude'))
                    <span class="small text-danger">{{ $errors->first('location_latitude') }}</span>
                  @endif
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group">
                  <label for="location_longitude">{{ __('messages.global.longitude') }} <span
                      class="text-danger">*</span></label>
                  <input type="text" readonly id="location_longitude" name="location_longitude" class="form-control"
                    placeholder="{{ __('messages.global.longitude') }}" value="{{ old('location_longitude') }}">
                  @if ($errors->has('location_longitude'))
                    <span class="small text-danger">{{ $errors->first('location_longitude') }}</span>
                  @endif
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="animal_species">{{ __('messages.global.animal_species') }} <span
                      class="text-danger">*</span></label>

                  <select id="animal_species" name="animal_species" class="custom-select"
                    placeholder="{{ __('messages.global.animal_species') }}">
                    <option>-</option>

                    {{-- Pet --}}
                    <optgroup label="{{ __('messages.animal_species_categories.pet') }}">

                      {{-- Pet Dog --}}
                    <optgroup label="{{ __('messages.animal_species_categories.pet_dog') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'pet_dog'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>

                    {{-- Pet Cat --}}
                    <optgroup label="{{ __('messages.animal_species_categories.pet_cat') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'pet_cat'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>

                    {{-- Pet Other --}}
                    <optgroup label="{{ __('messages.animal_species_categories.pet_other') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'pet') && !Str::startsWith($species, 'pet_dog') && !Str::startsWith($species, 'pet_cat'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>
                    </optgroup>

                    {{-- Livestock --}}
                    <optgroup label="{{ __('messages.animal_species_categories.livestock') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'livestock'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>

                    {{-- Circus --}}
                    <optgroup label="{{ __('messages.animal_species_categories.circus') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'circus'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>

                    {{-- Wild --}}
                    <optgroup label="{{ __('messages.animal_species_categories.wild') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'wild') && !Str::startsWith($species, 'wild_aquatic'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>

                    {{-- Wild Aquatic --}}
                    <optgroup label="{{ __('messages.animal_species_categories.wild_aquatic') }}">
                      @foreach ($animalSpecies as $species)
                        @if (Str::startsWith($species, 'wild_aquatic'))
                          <option value="{{ $species }}" {{ old('animal_species') == $species ? 'selected' : '' }}>
                            {{ __('messages.animal_species.' . $species) }}</option>
                        @endif
                      @endforeach
                    </optgroup>

                  </select>
                  @if ($errors->has('animal_species'))
                    <span class="small text-danger">{{ $errors->first('animal_species') }}</span>
                  @endif
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="animal_condition">{{ __('messages.global.animal_condition') }} <span
                      class="text-danger">*</span></label>
                  <select id="animal_condition" name="animal_condition" class="custom-select"
                    placeholder="{{ __('messages.global.animal_condition') }}">
                    <option>-</option>
                    @foreach ($animalConditions as $condition)
                      <option value="{{ $condition }}" {{ old('animal_condition') == $condition ? 'selected' : '' }}>
                        {{ __('messages.animal_condition.' . $condition) }}</option>
                    @endforeach
                  </select>
                  @if ($errors->has('animal_condition'))
                    <span class="small text-danger">{{ $errors->first('animal_condition') }}</span>
                  @endif
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="final_location">{{ __('messages.global.where_is_animal') }} <span
                      class="text-danger">*</span></label>
                  <input type="text" id="final_location" name="final_location" class="form-control"
                    placeholder="{{ __('messages.global.where_is_animal') }}" value="{{ old('final_location') }}">
                  @if ($errors->has('final_location'))
                    <span class="small text-danger">{{ $errors->first('final_location') }}</span>
                  @endif
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="identification_type">{{ __('messages.global.identification_type') }}</label>
                  <select id="identification_type" name="identification_type" class="custom-select"
                    placeholder="{{ __('messages.global.identification_type') }}">
                    <option value="">-</option>
                    @foreach ($identificationTypes as $identificationType)
                      <option value="{{ $identificationType }}"
                        {{ old('identification_type') == $identificationType ? 'selected' : '' }}>
                        {{ __('messages.identification_type.' . $identificationType) }}
                      </option>
                    @endforeach
                  </select>
                  @if ($errors->has('identification_type'))
                    <span class="small text-danger">{{ $errors->first('identification_type') }}</span>
                  @endif
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="identification_number">{{ __('messages.global.identification_number') }}</label>
                  <input type="text" id="identification_number" name="identification_number" class="form-control"
                    placeholder="{{ __('messages.global.identification_number') }}"
                    value="{{ old('identification_number') }}">
                  @if ($errors->has('identification_number'))
                    <span class="small text-danger">{{ $errors->first('identification_number') }}</span>
                  @endif
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="comment">{{ __('messages.global.comment') }}</label>
                  <textarea id="comment" name="comment" data-maxlength="1000" class="form-control" rows="3"
                    placeholder="{{ __('messages.global.comment') }}">{{ old('comment') }}</textarea>
                  <div data-parent-id="comment" class="char-count-div text-right small text-muted">
                    <span data-parent-id="comment" class="char-count-current">0</span>
                    <span data-parent-id="comment" class="char-count-maximum">/ 1000</span>
                  </div>
                  @if ($errors->has('comment'))
                    <span class="small text-danger">{{ $errors->first('comment') }}</span>
                  @endif
                </div>
              </div>
            </div>

            @if ($user->hasOrganization)
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="internal_note">{{ __('messages.global.internal_note') }}</label>
                    <textarea id="internal_note" name="internal_note" data-maxlength="1000" class="form-control" rows="3"
                      placeholder="{{ __('messages.global.internal_note') }}">{{ old('internal_note') }}</textarea>
                    <div data-parent-id="internal_note" class="char-count-div text-right small text-muted">
                      <span data-parent-id="internal_note" class="char-count-current">0</span>
                      <span data-parent-id="internal_note" class="char-count-maximum">/ 1000</span>
                    </div>
                    @if ($errors->has('internal_note'))
                      <span class="small text-danger">{{ $errors->first('internal_note') }}</span>
                    @endif
                  </div>
                </div>
              </div>
            @endif

            <div class="row">
              <div class="update ml-auto mr-auto">
                <button type="submit" id="create-report-btn" name="create-report"
                  class="btn btn-primary btn-round">{{ __('messages.global.create') }}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
@endsection

@section('js')

  {{-- Disable form when submitted --}}
  <script>
    $('#report-form').submit(function() {
      $('#create-report-btn').addClass("disabled");
    });
  </script>

  <script>
    // Autocompletion for address field
    var placeSearch, autocomplete;

    function initAutocomplete() {
      autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('location_address'), {
          //types: ['(cities)']
        });

      autocomplete.setFields(['geometry']);
      autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
      var place = autocomplete.getPlace();

      document.getElementById('location_latitude').value = place.geometry.location.lat();
      document.getElementById('location_longitude').value = place.geometry.location.lng();

      for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          document.getElementById(addressType).value = val;
        }
      }
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }
  </script>

  {{-- Counter for textarea --}}
  @include('user::_layouts.authenticated._partials.textarea_char_count_js')

  {{-- Dropzone --}}
  @include('user::_layouts.authenticated._partials.dropzone_images_js')

  <script
    src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.api_key') }}&libraries=places&callback=initAutocomplete"
    async defer></script>
@endsection