@extends('user.template')
@section('title', $title)
@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')

<div class="row">
  <div class="col-md-12 grid-margin">
    <div class="row">
      <div class="col-12 col-xl-9 mb-4 mb-xl-0">
        <h3 class="font-weight-bold">{{$title}}</h3>
        <h6 class="font-weight-normal mb-0">{{$title}}</h6>
      </div>
      <div class="col-12 col-xl-3">
          <button  class="btn btn-success btn-block" data-toggle="modal" data-name="Tambah {{$title}} Baru" data-ket="tambah" href="#modalData">Buat {{$title}} Baru</button>
      </div>
    </div>
  </div>
</div>


@if ($errors->any())
  @foreach ($errors->all() as $error)
    <div class="alert alert-danger alert-dismissible fade show" role="alert"> 
      {{ $error }}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  @endforeach
@endif

<div class="row">
  @foreach ($datas as $data)
    <div class="col-md-4 evaluasi{{$data->id}}">
      <div class="card mb-4">
        <div class="card-body" style="min-height: 100px;">
          <p class="card-title"><strong>Periode {{$data->periode}}</strong></p>
          <small>Update {{tanggal_waktu($data->updated_at)}}</small> <br><br>
        </div>
        <div class="card-footer" style="background-color: white;">
          <div class="row">
            <div class="col-sm-12">
              <a href="{{route('user.evaluasi.show',['id'=>$data->id])}}" class="btn btn-sm btn-info">Detail</a>
              @if (Auth::user()->role == 'Pemda')
                <button  class="btn btn-outline-info btn-sm" data-toggle="modal" data-name="Edit {{$title}}" data-ket="edit" href="#modalData" data-id="{{$data->id}}" data-periode="{{$data->periode}}" data-entitas="{{isset($evEntitas[$data->id]) ? implode(',',$evEntitas[$data->id]) : ''}}">Edit</button>
                <a class="btn btn-outline-danger btn-sm" href="#" onclick="hapus('{{route('user.evaluasi.delete',['id'=> $data->id])}}', 'evaluasi{{$data->id}}', 'Anda akan menghapus semua data yang ada pada pelaporan ini?')" >Hapus</a>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  @endforeach
</div>

<div class="modal fade" id="modalData" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title"></h4>
          </div>
          <form method="post" id="formAction" class="form-horizontal"> @csrf
          <div class="modal-body">
              <div id="inputHidden"></div>
              <div class="form-group">
                <label for="periode" class="font-weight-bold">Periode</label>
                <input type="text" name="periode" class="form-control" required id="periode" placeholder="Periode">
              </div>
              <div class="row">
                <div class="col-sm-12">
                <p class="font-weight-bold">Entitas</p>
                <table class="table table-sm">
                  @foreach ($entitass as $entitas)
                  <tr>
                    <td><input class="form-control entitas" name="entitas[]" type="checkbox" value="{{$entitas->id}}" id="entitas{{$entitas->id}}"  {{env('APP_ENV') != 'production' ? 'checked' : ''}}></td>
                    <td><label class="form-check-label" for="entitas{{$entitas->id}}">{{$entitas->entitas}}</label></td>
                  </tr>
                  @endforeach
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save changes</button>
              <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
          </div>
          </form>
      </div>
  </div>
</div>
@endsection

@section('script')
<script src="{{asset('js/sweetalert2.js')}}"></script>
<script>
  $('#modalData').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var name = button.data('name') 
      var ket = button.data('ket')
  
      var modal = $(this)
      modal.find('.modal-title').text(name)
  
      if (ket == 'tambah') {
          modal.find('#formAction').attr('action', "{{route('user.evaluasi.store')}}")
          modal.find('#inputHidden').html('')
  
          modal.find('#periode').val('')
          $('.entitas').prop("checked", false);
      }else{
          var id = button.data('id') 
          
          let entitas = String(button.data('entitas'));

          console.log(entitas)
          if (entitas.search(",")) {
            entitas = entitas.split(',')
          }else{
            entitas = [entitas];
          }

          modal.find('#periode').val(button.data('periode'))
          $('.entitas').prop("checked", false);
          for (let et = 0; et < entitas.length; et++) {
            const checkEntitas = entitas[et];
            $('#entitas'+checkEntitas).prop("checked", true);
          }

          modal.find('#inputHidden').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formAction').attr('action', "{{route('user.evaluasi.update')}}")
  
      }
  })
</script>
@endsection