@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')

  {{-- My animals --}}
  @if ($user->isPremium)
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="registered_animal">{{ __('messages.global.my_animals') }}</label>
          <select id="registered_animal" class="custom-select">
            <option value="">-</option>
            @foreach ($registeredAnimals as $animal)
              <option value="{{ $animal->id }}"
                {{ request()->input('registered_animal_id') == $animal->id ? 'selected' : '' }}>
                {{ $animal->name }}
              </option>
            @endforeach
          </select>
          @if ($errors->has('registered_animal'))
            <span class="small text-danger">{{ $errors->first('registered_animal') }}</span>
          @endif
        </div>
      </div>
    </div>
  @endif

  <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.i_lost_my_animal') }}</h5>
        </div>
        <div class="card-body">
          <form id="report-form" enctype="multipart/form-data" method="post" action="{{ route('user.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 id="dropzone-count" class="text-right small text-muted">
                    <span id="dropzone-count-current">0</span>
                    <span id="dropzone-count-max">/ 45 Mb</span>
                  </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') ?? $registeredAnimal->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') ?? $registeredAnimal->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') ?? $registeredAnimal->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') ?? $registeredAnimal->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') ?? $registeredAnimal->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') ?? $registeredAnimal->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') ?? $registeredAnimal->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>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="gender">{{ __('messages.global.gender') }} <span class="text-danger">*</span></label>
                  <select id="gender" name="gender" class="custom-select"
                    placeholder="{{ __('messages.global.gender') }}">
                    <option value="">-</option>
                    @foreach ($genders as $gender)
                      <option value="{{ $gender }}"
                        {{ (old('gender') ?? $registeredAnimal->gender) == $gender ? 'selected' : '' }}>
                        {{ __('messages.animal_gender.' . $gender) }}
                      </option>
                    @endforeach
                  </select>
                  @if ($errors->has('gender'))
                    <span class="small text-danger">{{ $errors->first('gender') }}</span>
                  @endif
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="sterilization">{{ __('messages.global.sterilization') }} <span
                      class="text-danger">*</span></label>
                  <select id="sterilization" name="sterilization" class="custom-select"
                    placeholder="{{ __('messages.global.sterilization') }}">
                    <option value="">-</option>
                    @foreach ($sterilizations as $sterilization)
                      <option value="{{ $sterilization }}"
                        {{ (old('sterilization') ?? $registeredAnimal->sterilization) == $sterilization ? 'selected' : '' }}>
                        {{ __('messages.animal_sterilization.' . $sterilization) }}
                      </option>
                    @endforeach
                  </select>
                  @if ($errors->has('sterilization'))
                    <span class="small text-danger">{{ $errors->first('sterilization') }}</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') ?? $registeredAnimal->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') ?? $registeredAnimal->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') ?? $registeredAnimal->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')
  {{-- My animals --}}
  <script>
    $('#registered_animal').change(function() {
      let id = $('#registered_animal option:selected').val();
      window.location.href = "{{ route('user.reports.create') }}?registered_animal_id=" + id;
    });
  </script>

  {{-- 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)']
          fields: ["geometry"],
        });

      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();
    }

    // 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