@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">
        {{ $disabled ? Breadcrumbs::render('GoodPracticesView', $model->id) : ($model->id ? Breadcrumbs::render('GoodPracticesEdit',$model->id) : Breadcrumbs::render('GoodPracticesAdd')) }}
        <div class="card w-100">
          <div class="card-body">
            <form role="form" action="{{ route($fromMsp ? 'good-practice.store-from-msp':'good-practice.store') }}" method="post" enctype="multipart/form-data" id="form-action">
              <div class="mb-3 fv-row d-flex flex-column">
                <label class="form-label" for="image">Header Praktik Baik</label>
                @if($model->image)
                  <img src="{{ asset('storage/'.($fromMsp ? 'msp-roadmap/galleries':'good-practice').'/'.$model->image) }}" style="max-width: 200px" class="mb-2"/>
                @endif
                @if(!$disabled)
                  <input type="file" class="form-control" name="image" id="image" />
                @endif
                @error('image')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="title">Judul Praktik Baik</label>
                <input class="form-control" id="title" name="title" value="{{ old('title', $model->title) }}" placeholder="Judul Praktik Baik" @readonly($disabled)/>
                @error('title')
                  <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',$goodPracticeGoals))) @disabled($disabled)>
                      <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" for="summary">Ringkasan</label>
                <textarea class="form-control" id="summary" name="summary" placeholder="Ringkasan" @readonly($disabled)>{{ old('summary', $model->summary) }}</textarea>
                @error('summary')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="background">Latar Belakang</label>
                <textarea class="form-control" id="background" name="background" placeholder="Latar Belakang" @readonly($disabled)>{{ old('background', $model->background) }}</textarea>
                @error('background')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="implementation_location">Lokasi Pelaksanaan</label>
                <input class="form-control" id="implementation_location" name="implementation_location" value="{{ old('implementation_location', $model->implementation_location) }}" placeholder="Lokasi Pelaksanaan" @readonly($disabled)/>
                @error('implementation_location')
                  <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" @disabled($disabled)>
                  <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" @disabled($disabled)>
                  @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" @disabled($disabled)>
                  @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" @disabled($disabled)>
                  @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="implementation_start_date">Tanggal Mulai Pelaksanaan</label>
                <input class="form-control" type="date" id="implementation_start_date" name="implementation_start_date" value="{{ old('implementation_start_date', $model->implementation_start_date) }}" @readonly($disabled)/>
                @error('implementation_start_date')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="implementation_end_date">Tanggal Selesai Pelaksanaan</label>
                <input class="form-control" type="date" id="implementation_end_date" name="implementation_end_date" value="{{ old('implementation_end_date', $model->implementation_end_date) }}" @readonly($disabled)/>
                @error('implementation_end_date')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="implementation_process">Proses/Tahapan Pelaksanaan</label>
                <textarea class="form-control" id="implementation_process" name="implementation_process" placeholder="Latar Belakang" @readonly($disabled)>{{ old('implementation_process', $model->implementation_process) }}</textarea>
                @error('implementation_process')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label">Pelaku yang Terlibat (Lembaga/Organisasi)</label>
                <div>
                  @foreach($actorElements as $ae)
                    <div class="form-check form-check-inline">
                      <input class="form-check-input primary" type="checkbox" name="actors[]" id="ae-{{$ae->id}}-check" value="{{ $ae->id }}" @checked(in_array($ae->id,old('actors',$goodPracticeActors))) @disabled($disabled)>
                      <label class="form-check-label" for="ae-{{$ae->id}}-check">{{ $ae->name }}</label>
                    </div>
                  @endforeach
                </div>
                @error('actors')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="result">Hasil & Dampak</label>
                <textarea class="form-control" id="result" name="result" placeholder="Hasil & Dampak" @readonly($disabled)>{{ old('result', $model->result) }}</textarea>
                @error('result')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="recommendation">Rekomendasi & Pembelajaran</label>
                <textarea class="form-control" id="recommendation" name="recommendation" placeholder="Rekomendasi & Pembelajaran" @readonly($disabled)>{{ old('recommendation', $model->recommendation) }}</textarea>
                @error('recommendation')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="sources">Sumber Informasi</label>
                <textarea class="form-control" id="sources" name="sources" placeholder="Sumber Informasi" @readonly($disabled)>{{ old('sources', $model->sources) }}</textarea>
                @error('sources')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="learning_source_contact">Kontak Sumber Pengetahuan</label>
                <textarea class="form-control" id="learning_source_contact" name="learning_source_contact" placeholder="Kontak Sumber Pengetahuan" @readonly($disabled)>{{ old('learning_source_contact', $model->learning_source_contact) }}</textarea>
                @error('learning_source_contact')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="potential_partnership">Potensi & Kebutuhan Kerjasama</label>
                <textarea class="form-control" id="potential_partnership" name="potential_partnership" placeholder="Potensi & Kebutuhan Kerjasama" @readonly($disabled)>{{ old('potential_partnership', $model->potential_partnership) }}</textarea>
                @error('potential_partnership')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="published_at">Tanggal Terbit</label>
                <input class="form-control" type="date" id="published_at" name="published_at" value="{{ old('published_at', $model->published_at) ?? date('Y-m-d') }}" @readonly($disabled)/>
                @error('published_at')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label for="inputName" class="form-label">Dokumentasi</label>
                <div class="d-flex flex-column gap-2 mb-3" id="list-gallery">
                  @foreach($galleries as $a)
                    <div class="d-flex gap-2 py-2 border-bottom justify-content-between align-items-center">
                      <a href="{{ asset('storage/'.($fromMsp ? 'msp-roadmap/galleries':'good-practice/galleries').'/'. $a->filename) }}" target="_blank">
                      <figure class="figure">
                        <img src="{{ asset('storage/'.($fromMsp ? 'msp-roadmap/galleries':'good-practice/galleries').'/'. $a->filename) }}" class="figure-img img-fluid rounded" style="max-width: 200px;" alt="{{ $a->subtitle ?: $a->filename_original }}">
                        <figcaption class="figure-caption fs-3">{{ $a->subtitle ?: $a->filename_original }}</figcaption>
                      </figure>
                      </a>
                      @if($fromMsp)
                        <input type="hidden" name="msp_galleries_ids[]" value="{{ $a->id }}"/>
                      @endif
                      @if(!$disabled)
                        <button type="button" class="btn btn-danger remove-gallery-edit" data-id="{{ $a->id }}"><i class="ti ti-trash"></i></button>
                      @endif
                    </div>
                  @endforeach
                </div>
                @error('galleries')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
                @if(!$disabled)
                  <button type="button" class="btn btn-outline-primary add-gallery"><i class="ti ti-plus"></i> Tambah Dokumentasi</button>
                @endif
              </div>
              <input type="hidden" name="id" value="{{ $model->id }}" />
              <input type="hidden" name="is_draft" value="0" />
              @if($fromMsp)
                <input type="hidden" name="msp_act_id" value="{{ $mspAct->id }}">
                <input type="hidden" name="actor_id" value="{{ $mspAct->actor_id }}">
              @endif
              {{ csrf_field() }}
              <div class="d-flex w-100 justify-content-end">
                @if(!$disabled)
                  <button type="button" class="btn btn-info me-2 btn-draft"><i class="ti ti-file me-2"></i>Simpan Sebagai Draft</button>
                  <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Terbitkan</button>
                @endif
              </div>
            </form>
            @if($disabled && $model->status == 0 && auth()->user()->role_id == 1 && !$model->is_draft)
              <div class="d-flex w-100 justify-content-end">
                <a class="btn btn-primary me-2 approve-confirmation" data-action="{{ route('good-practice.approve') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin menyetujui data ini?" href="javascript:void(0)">
                  <i class="ti ti-check me-2"></i>Setuju
                </a>
                <a class="btn btn-danger reject-confirmation" data-action="{{ route('good-practice.reject') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin menyetujui data ini?" href="javascript:void(0)">
                  <i class="ti ti-x me-2"></i>Tolak
                </a>
              </div>
            @endif
            @if($disabled && $model->status == 1)
              <div class="d-flex w-100 justify-content-start">
                <h5>Disetujui Oleh: {{ $model->approvedBy ? $model->approvedBy->name : '-' }} ({{ $model->approved_date }})</h5>
              </div>
            @endif
            @if($disabled && $model->status == 2)
              <div class="d-flex w-100 justify-content-start">
                <h5>Ditolak Oleh: {{ $model->rejectedBy ? $model->rejectedBy->name : '-' }} ({{ $model->rejected_date }})</h5>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection


@push('scripts')
<script type="module">
  $(document).ready(function() {
    $('.btn-draft').on('click', function(){
      $('input[name="is_draft"]').val(1);
      $('#form-action').submit();
    })
    $('#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');
    }
  });
</script>
@endpush