@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">
          {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('Forms1UpdateRealisation',$model->id) }}
          <div class="card w-100">
            <div class="card-body">
              <form role="form" action="{{ route('matrix1.forms-store-update') }}" method="post">
                <div class="mb-3 fv-row">
                  <div>
                    <label class="form-label" for="rad_id">Periode RAD</label>
                  </div>
                  <select class="form-select" data-live-search="true" name="rad_id" id="rad_id" disabled>
                    <option value="">Pilih RAD</option>
                    @foreach($rads as $r)
                      <option value="{{ $r->id }}" @selected($r->id == old('rad_id', $model->rad_id)) >{{ $r->name }} ({{ $r->year_start }} - {{ $r->year_end }})</option>
                    @endforeach
                  </select>
                  @error('rad_id')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <div>
                    <label class="form-label" for="pillar_id">Pilar</label>
                  </div>
                  <select class="form-select" data-live-search="true" name="pillar_id" id="pillar_id" disabled>
                    <option value="">Pilih Pilar</option>
                    @foreach($pillars as $p)
                      <option value="{{ $p->id }}" @selected($p->id == old('pillar_id', $model->pillar_id)) >{{ $p->name }}</option>
                    @endforeach
                  </select>
                  @error('pillar_id')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <div>
                    <label class="form-label" for="metadata_purpose_id">Tujuan</label>
                  </div>
                  <select class="form-select select2" data-live-search="true" name="metadata_purpose_id" id="metadata_purpose_id" disabled>
                    <option value="">Pilih Tujuan</option>
                    @foreach($purposes as $p)
                      <option value="{{ $p->id }}" @selected($p->id == old('metadata_purpose_id', $model->metadata_purpose_id)) >{{ $p->name }}</option>
                    @endforeach
                  </select>
                  @error('metadata_purpose_id')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <div>
                    <label class="form-label" for="metadata_target_id">Target</label>
                  </div>
                  <select class="form-select select2" data-live-search="true" name="metadata_target_id" id="metadata_target_id" disabled>
                    <option value="">Pilih Target</option>
                    @foreach($targets as $p)
                      <option value="{{ $p->id }}" @selected($p->id == old('metadata_target_id', $model->metadata_target_id)) >{{ $p->name }}</option>
                    @endforeach
                  </select>
                  @error('metadata_target_id')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <div>
                    <label class="form-label" for="metadata_indicator_id">Indikator</label>
                  </div>
                  <select class="form-select select2" data-live-search="true" name="metadata_indicator_id" id="metadata_indicator_id" disabled>
                    <option value="">Pilih Indikator</option>
                    @foreach($indicators as $p)
                      <option value="{{ $p->id }}" @selected($p->id == old('metadata_indicator_id', $model->metadata_indicator_id)) >{{ $p->name }}</option>
                    @endforeach
                  </select>
                  @error('metadata_indicator_id')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="source">Sumber Data</label>
                  <input class="form-control form-prefill" id="source" name="source" value="{{ old('source', $model->source) }}" placeholder="Sumber Data" disabled/>
                  @error('source')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="unit">Satuan</label>
                  <input class="form-control form-prefill" id="unit" name="unit" value="{{ old('unit', $model->unit) }}" placeholder="Satuan" disabled/>
                  @error('unit')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="baseline">Angka Dasar (Baseline)</label>
                  <input class="form-control form-prefill" id="baseline" name="baseline" value="{{ old('baseline', $model->baseline) }}" placeholder="Angka Dasar (Baseline)" disabled/>
                  @error('baseline')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="d-flex flex-column mb-3 fv-row" id="rad-target-container">
                  <label class="form-label" >Capaian SDGS Per Tahun</label>
                  @foreach($forms as $key => $form)
                    <div class="row mb-3">
                      <div class="col-2">
                        @if($loop->index === 0)
                          <label class="form-label" for="baseline">Tahun</label>
                        @endif
                        <input class="form-control form-prefill row-year" name="forms[{{ $forms[$key]['year'] }}][year]" value="{{ $forms[$key]['year'] }}" placeholder="Tahun" readonly/>
                      </div>
                      <div class="col-2">
                        @if($loop->index === 0)
                          <label class="form-label" for="baseline">Target</label>
                        @endif
                        <input class="form-control form-prefill row-year" name="forms[{{ $forms[$key]['year'] }}][target]" value="{{ $forms[$key]['target'] }}" placeholder="Target" readonly/>
                      </div>
                      <div class="col-4">
                        @if($loop->index === 0)
                          <label class="form-label" for="baseline">Capaian SDGs</label>
                        @endif
                        <input class="form-control form-prefill row-target" name="forms[{{ $forms[$key]['year'] }}][progress]" value="{{ $forms[$key]['progress'] }}" placeholder="Capaian SDGs"/>
                      </div>
                      <div class="col-4">
                        @if($loop->index === 0)
                          <label class="form-label" for="row-status-{{$key}}">Status</label>
                        @endif
                        <select class="form-select select2 form-prefill row-status" name="forms[{{ $forms[$key]['year'] }}][status]" id="row-status-{{$key}}">
                          <option value="">Status</option>
                          <option value="1" @selected($forms[$key]['status'] == 1)>Tercapai</option>
                          <option value="2" @selected($forms[$key]['status'] == 2)>Akan Tercapai</option>
                          <option value="3" @selected($forms[$key]['status'] == 3)>Perlu Perhatian Khusus</option>
                        </select>
                      </div>
                    </div>
                  @endforeach
                </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">
    const templateYearRow = `<div class="row mb-3">
                    <div class="col-3">
                      <label class="form-label" for="baseline">Tahun</label>
                      <input class="form-control form-prefill row-year" value="" placeholder="Tahun" readonly/>
                    </div>
                    <div class="col-9">
                      <label class="form-label" for="baseline">Target SDGs</label>
                      <input class="form-control form-prefill row-target" value="" placeholder="Target SDGs"/>
                    </div>
                  </div>`
    const rads = @json($rads);
    let selectedRad = null;
    $(document).ready(function() {
      $('#rad_id').on('change', function() {
        const val = $(this).val();
        if(val !== ''){
          selectedRad = rads.find(function(r){
            return r.id === Number(val);
          })
          $('#rad-target-container').empty();
          for(let iy = selectedRad.year_start;iy<=selectedRad.year_end;iy++){
            const el = $(templateYearRow);
            el.find('.row-year').attr('name',`forms[${iy}][year]`).val(iy)
            el.find('.row-target').attr('name',`forms[${iy}][target]`)
            $('#rad-target-container').append(el);
          }
        }else{
          selectedRad = null;
          $('#metadata_indicator_id').empty();
          $('#metadata_target_id').empty();
          $('#metadata_purpose_id').empty();
          $('#rad-target-container').empty();
        }
      })
      $('#pillar_id').on('change', function() {
        const pillarId = $(this).val();
        if(pillarId) {
          $.ajax({
            url: `/api/purposes`,
            type: "POST",
            dataType: 'json',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data : {pillar_id: pillarId, version: selectedRad !== null ? selectedRad.metadata_version : 'v1'},
            success:function(res) {
              if(res.data){
                $('#metadata_target_id').empty();
                $('#metadata_indicator_id').empty();
                $('#metadata_purpose_id').empty().append('<option value="">Pilih Tujuan</option>');
                $.each(res.data, function(key, d){
                  $('select[name="metadata_purpose_id"]').append(`<option value="${d.id}">[${d.code}] ${d.name}</option>`);
                });

                var oldPurposeId = '{{ old('metadata_purpose_id', $model->metadata_purpose_id) }}';
                if (oldPurposeId) {
                  $('#metadata_purpose_id').val(oldPurposeId);
                }
              }else{
                $('#metadata_purpose_id').empty();
                $('#metadata_target_id').empty();
                $('#metadata_indicator_id').empty();
              }
            }
          });
        }else{
          $('#metadata_purpose_id').empty();
          $('#metadata_target_id').empty();
          $('#metadata_indicator_id').empty();
        }
      });

      $('#metadata_purpose_id').on('change', function() {
        const metadata_purpose_id = $(this).val();
        if(metadata_purpose_id) {
          $.ajax({
            url: `/api/targets`,
            type: "POST",
            dataType: 'json',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data : {purpose_id: metadata_purpose_id, version: selectedRad !== null ? selectedRad.metadata_version : 'v1'},
            success:function(res) {
              if(res.data){
                $('#metadata_indicator_id').empty();
                $('#metadata_target_id').empty().append('<option value="">Pilih Target</option>');
                $.each(res.data, function(key, d){
                  $('select[name="metadata_target_id"]').append(`<option value="${d.id}">[${d.code}] ${d.name}</option>`);
                });

                const oldId = '{{ old('metadata_target_id', $model->metadata_target_id) }}';
                if (oldId) {
                  $('#metadata_target_id').val(oldId);
                }
              }else{
                $('#metadata_target_id').empty();
                $('#metadata_indicator_id').empty();
              }
            }
          });
        }else{
          $('#metadata_target_id').empty();
          $('#metadata_indicator_id').empty();
        }
      });

      $('#metadata_target_id').on('change', function() {
        const metadata_target_id = $(this).val();
        if(metadata_target_id) {
          $.ajax({
            url: `/api/indicators`,
            type: "POST",
            dataType: 'json',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data : {target_id: metadata_target_id, version: selectedRad !== null ? selectedRad.metadata_version : 'v1'},
            success:function(res) {
              if(res.data){
                $('#metadata_indicator_id').empty().append('<option value="">Pilih Indikator</option>');
                $.each(res.data, function(key, d){
                  $('select[name="metadata_indicator_id"]').append(`<option value="${d.id}">[${d.code}] ${d.name}</option>`);
                });

                const oldId = '{{ old('metadata_indicator_id', $model->metadata_indicator_id) }}';
                if (oldId) {
                  $('#metadata_indicator_id').val(oldId);
                }
              }else{
                $('#metadata_indicator_id').empty();
              }
            }
          });
        }else{
          $('#metadata_indicator_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