@extends('layouts.admin.index')

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

      @include('layouts.admin.header')

      <div class="body-wrapper">
        <div class="container-fluid">
          {{ $model->id ? \Diglactic\Breadcrumbs\Breadcrumbs::render('MSPEdit',$model->id) : \Diglactic\Breadcrumbs\Breadcrumbs::render('MSPAdd') }}
          <div class="card w-100">
            {{-- <div class="card-body"> --}}
            <div class="card-body f1" x-data="mspForm()">
              <form role="form" action="{{ route('msp.store') }}" method="post" enctype="multipart/form-data">
                @if($model->image)
                  <div class="mb-3">
                    <img src="{{ asset('storage/msp/'. $model->image) }}" alt="image" class="img-thumbnail" width="200">
                  </div>
                @endif
                <div class="mb-3 fv-row">
                  <label class="form-label" for="image">Gambar</label>
                  <input class="form-control" id="image" name="image" type="file" @readonly($disabled)/>
                  @error('image')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="name">Nama MSP</label>
                  <input class="form-control" id="name" name="name" value="{{ old('name', $model->name) }}" placeholder="Nama MSP" @readonly($disabled)/>
                  @error('name')
                  <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 rows="6" class="form-control" id="description" name="description" placeholder="Deskripsi" @readonly($disabled)>{{ old('description', $model->description) }}</textarea>
                  @error('description')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="start_date">Tanggal Mulai</label>
                  <input class="form-control" type="date" id="start_date" name="start_date" placeholder="Tanggal Mulai" value="{{ old('start_date', $model->start_date) }}" @readonly($disabled) />
                  @error('start_date')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="end_date">Tanggal Selesai</label>
                  <input class="form-control" type="date" id="end_date" name="end_date" placeholder="Tanggal Selesai" value="{{ old('end_date', $model->end_date) }}" @readonly($disabled) />
                  @error('end_date')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                  @enderror
                </div>
                @if(!$model->id)
                  <div class="mb-3 fv-row">
                    <label class="form-label" for="description">Stakeholder Analisis</label>
                    <select class="form-select" name="analysis_id" id="analysis_id">
                      <option value="">Pilih Analisis</option>
                      @foreach($analysis as $a)
                          <option value="{{$a->id}}">{{$a->name}} [{{ $a->indicator->code }}]</option>
                      @endforeach
                    </select>
                    <div class="d-none flex-column my-2 align-items-start" id="analysis-info">
                      <span class="fw-bold">Deskripsi: </span>
                      <p></p>
                      <a class="btn btn-info"><i class="ti ti-eye me-2"></i>Pratinjau Analisis</a>
                    </div>
                    @error('analysis_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                @endif
                <input type="hidden" name="id" value="{{ $model->id }}" />
                {{ csrf_field() }}
                <div class="d-flex w-100 justify-content-end">
                  @if(!$disabled)
                    <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
                  @endif
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
  function mspForm(){
    return {
      stakeholders: @json($analysis),
      selectedStakeholder: null,
      init(){
        const existingAnalysis = $('#analysis_id').val();
        this.toggleAnalysisInfo(existingAnalysis)
        const _this = this;
        $('#analysis_id').on('change', function(){
          const val = $(this).val();
          _this.toggleAnalysisInfo(val)
        })
      },
      toggleAnalysisInfo(val){
        if(val === '' || val === null){
          $('#analysis-info').removeClass('d-flex').addClass('d-none');
        }else{
          const valInt = Number(val);
          const stakeholder = this.stakeholders.find(s => {
            return s.id === valInt
          })
          $('#analysis-info').find('p').html(stakeholder.description)
          $('#analysis-info').find('a').prop('href',`/stakeholder/view/${stakeholder.id}`).attr('target','_blank')
          $('#analysis-info').removeClass('d-none').addClass('d-flex');
        }
      }
    }
  }
</script>
@endpush