@extends('layouts.admin.index')

@section('content')
<div id="main-wrapper">
  <!-- Sidebar -->
  @include('layouts.admin.sidebar')
  <div class="page-wrapper">
    <!--  Header -->
    @include('layouts.admin.header')

    <div class="body-wrapper">
      <div class="container-fluid">
        <div class="card w-100">
          <div class="card-body">
            <h3 class="mb-4">{{ $model->id ? 'Edit' : 'Tambah' }} {{ 'Lembaga' }}</h3>
            <form role="form" action="{{ route('institution.store') }}" method="post" enctype="multipart/form-data">
              <div class="mb-3 fv-row d-flex flex-column">
                <label class="form-label" for="logo">Logo</label>
                @if($model->logo)
                  <img src="{{ asset('storage/institution/'.$model->logo) }}" style="max-width: 200px" class="mb-2"/>
                @endif
                <input type="file" class="form-control" name="logo" id="logo" />
                @error('logo')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="name">Nama Lembaga</label>
                <input class="form-control" id="name" name="name" value="{{ old('name', $model->name) }}" placeholder="Nama Lembaga"/>
                @error('name')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="short_description">Deskripsi Singkat</label>
                <textarea class="form-control" id="short_description" name="short_description" placeholder="Deskripsi Singkat">{{ old('short_description', $model->short_description) }}</textarea>
                @error('short_description')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="description">Deskripsi</label>
                <textarea class="form-control" id="description" name="description" placeholder="Deskripsi">{{ old('description', $model->description) }}</textarea>
                @error('description')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="actor_element_type_id_label">Jenis Unsur Aktor Pembangunan</label>
                </div>
                <select class="form-select select2" name="actor_element_type_id" id="actor_element_type_id_label" data-live-search="true">
                  <option value="">Pilih Jenis Unsur Aktor Pembangunan</option>
                  @foreach($actorElementTypes as $r)
                    <option value="{{ $r->id }}" @selected($r->id == old('actor_element_type_id', $model->actor_element_type_id))>{{ $r->name }}</option>
                  @endforeach
                </select>
                @error('actor_element_type_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="organization_type_id_label">Jenis Organisasi</label>
                </div>
                <select class="form-select select2" name="organization_type_id" id="organization_type_id_label" data-live-search="true">
                  <option value="">Pilih Jenis Organisasi</option>
                  @foreach($organizationTypes as $r)
                    <option value="{{ $r->id }}" @selected($r->id == old('organization_type_id', $model->organization_type_id))>{{ $r->name }}</option>
                  @endforeach
                </select>
                @error('organization_type_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="working_area_id">Wilayah Kerja</label>
                </div>
                <select class="form-select select2" name="working_area_id" id="working_area_id" data-live-search="true">
                  <option value="">Pilih Wilayah Kerja</option>
                  @foreach($workingAreas as $r)
                    <option value="{{ $r->id }}" @selected($r->id == old('working_area_id', $model->working_area_id))>{{ $r->name }}</option>
                  @endforeach
                </select>
                @error('working_area_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="year">Tahun Berdiri</label>
                <input class="form-control" id="year" name="year" value="{{ old('year', $model->year) }}" placeholder="Tahun Berdiri"/>
                @error('year')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="province_id">Provinsi</label>
                </div>
                <select class="form-select select2" name="province_id" id="province_id" data-live-search="true">
                  <option value="">Pilih Provinsi</option>
                  @foreach($provinces as $r)
                    <option value="{{ $r->id }}" @selected($r->id == old('province_id', $model->province_id))>{{ $r->name }}</option>
                  @endforeach
                </select>
                @error('province_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="city_id">Kabupaten/Kota</label>
                </div>
                <select class="form-select select2" name="city_id" id="city_id" data-live-search="true">
                  @if(old('province_id', $model->province_id))
                    <option value="">Pilih Kabupaten/Kota</option>
                    @foreach($cities as $r)
                      <option value="{{ $r->id }}" @selected($r->id == old('city_id', $model->city_id))>{{ $r->type }} {{ $r->name }}</option>
                    @endforeach
                  @endif
                </select>
                @error('city_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="subdistrict_id">Kecamatan</label>
                </div>
                <select class="form-select select2" name="subdistrict_id" id="subdistrict_id" data-live-search="true">
                  @if(old('city_id', $model->city_id))
                    <option value="">Pilih Kecamatan</option>
                    @foreach($subdistricts as $r)
                      <option value="{{ $r->id }}" @selected($r->id == old('subdistrict_id', $model->subdistrict_id))>{{ $r->name }}</option>
                    @endforeach
                  @endif
                </select>
                @error('subdistrict_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="village_id">Desa/Kelurahan</label>
                </div>
                <select class="form-select select2" name="village_id" id="village_id" data-live-search="true">
                  @if(old('subdistrict_id', $model->subdistrict_id))
                    <option value="">Pilih Desa/Kelurahan</option>
                    @foreach($villages as $r)
                      <option value="{{ $r->id }}" @selected($r->id == old('village_id', $model->village_id))>{{ $r->name }}</option>
                    @endforeach
                  @endif
                </select>
                @error('village_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="address">Alamat Lengkap Lembaga/Organisasi</label>
                <textarea class="form-control" id="address" name="address" placeholder="Alamat Lengkap Lembaga/Organisasi">{{ old('address', $model->address) }}</textarea>
                @error('address')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="phone">No. Telepon/Handphone/Whatsapp</label>
                <input class="form-control" id="phone" name="phone" value="{{ old('phone', $model->phone) }}" placeholder="No. Telepon"/>
                @error('phone')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="email">Email</label>
                <input class="form-control" id="email" name="email" value="{{ old('email', $model->email) }}" placeholder="Email"/>
                @error('email')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="website">Website (Optional)</label>
                <input class="form-control" id="website" name="website" value="{{ old('website', $model->website) }}" placeholder="Website"/>
                @error('website')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label">Ruang Lingkup Tujuan TPB/SDGs</label>
                <div>
                  @foreach($metadataPurposes as $mp)
                    <div class="form-check">
                      <input class="form-check-input primary" type="checkbox" name="goals[]" id="mp-{{$mp->id}}-check" value="{{ $mp->id }}" @checked(in_array($mp->id,old('goals',$institutionGoals)))>
                      <label class="form-check-label" for="mp-{{$mp->id}}-check">[{{$mp->code}}]{{ $mp->name }}</label>
                    </div>
                  @endforeach
                </div>
                @error('goals')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label">Hal yang Bisa Dikerjasamakan</label>
                <div>
                  @foreach($partnershipTypes as $pt)
                    <div class="form-check form-check-inline">
                      <input class="form-check-input primary" type="checkbox" name="partnership[]" id="pt-{{$pt->id}}-check" value="{{ $pt->id }}" @checked(in_array($pt->id,old('partnership',$institutionPartnership)))>
                      <label class="form-check-label" for="pt-{{$pt->id}}-check">{{ $pt->name }}</label>
                    </div>
                  @endforeach
                </div>
                @error('partnership')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label">Aktivitas Utama Lembaga/Organisasi</label>
                <div>
                  @foreach($primaryActivities as $pa)
                    <div class="form-check form-check-inline">
                      <input class="form-check-input primary" type="checkbox" name="activities[]" id="pa-{{$pa->id}}-check" value="{{ $pa->id }}" @checked(in_array($pa->id,old('activities',$institutionActivity)))>
                      <label class="form-check-label" for="pa-{{$pa->id}}-check">{{ $pa->name }}</label>
                    </div>
                  @endforeach
                </div>
                @error('activities')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <input type="hidden" name="id" value="{{ $model->id }}" />
              {{ csrf_field() }}
              <div class="d-flex w-100 justify-content-end">
                <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script type="module">
  $(document).ready(function() {
    $('#province_id').on('change', function() {
      const provinceId = $(this).val();
      if(provinceId) {
        $.ajax({
          url: `/api/cities/${provinceId}`,
          type: "GET",
          data : {"_token":"{{ csrf_token() }}"},
          dataType: "json",
          success:function(data)
          {
            if(data){
              $('#city_id').empty();
              $('#city_id').append('<option value="">Pilih Kabupaten/Kota</option>');
              $.each(data, function(key, city){
                $('select[name="city_id"]').append(`<option value="${city.id}">${city.type} ${city.name}</option>`);
              });
              // If old city value exists, re-select it
              var oldCityId = '{{ old('city_id', $model->city_id) }}';
              if (oldCityId) {
                  $('#city_id').val(oldCityId);
              }
            }else{
              $('#city_id').empty();
            }
          }
        });
      }else{
        $('#city_id').empty();
      }
    });

    $('#city_id').on('change', function() {
      const city_id = $(this).val();
      if(city_id) {
        $.ajax({
          url: `/api/subdistricts/${city_id}`,
          type: "GET",
          data : {"_token":"{{ csrf_token() }}"},
          dataType: "json",
          success:function(data)
          {
            if(data){
              $('#subdistrict_id').empty();
              $('#subdistrict_id').append('<option value="">Pilih Kecamatan</option>');
              $.each(data, function(key, sd){
                $('select[name="subdistrict_id"]').append('<option value="'+ sd.id +'">' + sd.name+ '</option>');
              });
              // If old city value exists, re-select it
              var oldSubdistrictId = '{{ old('subdistrict_id', $model->subdistrict_id) }}';
              if (oldSubdistrictId) {
                  $('#subdistrict_id').val(oldSubdistrictId);
              }
            }else{
              $('#subdistrict_id').empty();
            }
          }
        });
      }else{
        $('#subdistrict_id').empty();
      }
    });

    $('#subdistrict_id').on('change', function() {
      const subdistrict_id = $(this).val();
      if(subdistrict_id) {
        $.ajax({
          url: `/api/villages/${subdistrict_id}`,
          type: "GET",
          data : {"_token":"{{ csrf_token() }}"},
          dataType: "json",
          success:function(data)
          {
            if(data){
              $('#village_id').empty();
              $('#village_id').append('<option value="">Pilih Desa/Kelurahan</option>');
              $.each(data, function(key, sd){
                $('select[name="village_id"]').append('<option value="'+ sd.id +'">' + sd.name+ '</option>');
              });
              // If old city value exists, re-select it
              var oldVillageId = '{{ old('village_id', $model->village_id) }}';
              if (oldVillageId) {
                  $('#village_id').val(oldVillageId);
              }
            }else{
              $('#village_id').empty();
            }
          }
        });
      }else{
        $('#village_id').empty();
      }
    });

    const oldProvinceId = '{{ old('province_id', $model->province_id) }}';
    if (oldProvinceId) {
        $('#province_id').trigger('change');
    }
    const oldCityId = '{{ old('city_id', $model->city_id) }}';
    if (oldCityId) {
        $('#city_id').trigger('change');
    }
    const oldSubdistrictId = '{{ old('subdistrict_id', $model->subdistrict_id) }}';
    if (oldSubdistrictId) {
        $('#subdistrict_id').trigger('change');
    }

    $('#description').summernote({
      placeholder: 'Deskripsi',
      tabsize: 2,
      height: 300,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview', 'help']]
      ]
    });
  });
</script>
@endpush