@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">Manajemen Risiko </h6>
      </div>
      <div class="col-12 col-xl-3">
        @if (Auth::user()->id != env('ID_DAERAH'))
        <button  class="btn btn-success btn-block" data-toggle="modal" data-name="Tambah {{$title}} Baru" data-ket="tambah" href="#modalData">Buat {{$title}} Baru</button>
        @endif
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-borderless">
            <thead>
              <tr class="text-center">
                <th class="align-middle">No</th>
                <th class="align-middle">Periode <br> Manajemen Risiko</th>
                <th class="align-middle">Tahun <br>Penilaian</th>
                <th class="align-middle">Tujuan</th>
                <th></th>
              </tr>  
            </thead>
            <tbody>
              @foreach ($datas as $no => $data)
              <tr class="data{{$data->id}}">
                <td class="text-center">{{$no+1}}</td>
                <td>
                  <strong>{{$data->periode}}</strong><br>
                  <small>{{$data->pemda}}</small>
                </td>
                <td class="text-center">{{$data->tahun}}</td>
                <td>{{$data->tujuan_strategis}}</td>
                <td style="width: 232px;" class="text-right">
                  @if (Auth::user()->id == 1)
                    <button  class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-name="Edit {{$title}}" data-ket="edit" href="#modalData" data-id="{{$data->id}}" data-pemda="{{$data->pemda}}" data-periode="{{$data->periode}}" data-tahun="{{$data->tahun}}" data-tujuan_strategis="{{$data->tujuan_strategis}}">Edit</button>
                    <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('user.mr.delete',['id'=>$data->id])}}', 'data{{$data->id}}', 'Hapus {{$title}} ?')" >Hapus</a>
                    <a href="{{route('user.mr.show', ['id'=> $data->id])}}" class="btn btn-success btn-sm">Detail</a>
                  @else
                    <a href="{{route('user.konteks.pemda', ['mr_id'=> $data->id])}}" class="btn btn-primary btn-sm">Konteks Strategis Pemda</a>
                  @endif
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        {{$datas->links('paginate.paginate-simple')}}
      </div>
    </div>
  </div>
</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="pemda">Pemda</label>
                <input type="text" name="pemda" class="form-control" required id="pemda" placeholder="Pemda">
              </div>
              <div class="form-group">
                <label for="periode">Periode</label>
                <input type="text" name="periode" class="form-control" required id="periode" placeholder="Periode">
              </div>
              <div class="form-group">
                <label for="tahun">Tahun Penilaian</label>
                <input type="text" name="tahun" class="form-control" required id="tahun" placeholder="Tahun">
              </div>
              <div class="form-group">
                <label for="tujuan_strategis">Tujuan Strategis</label>
                <input type="text" name="tujuan_strategis" class="form-control" required id="tujuan_strategis" placeholder="Tujuan Strategis">
              </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')
@if (Auth::user()->id != env('ID_DAERAH'))

<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.mr.store')}}")
          modal.find('#inputHidden').html('')
  
          modal.find('#pemda').val('')
          modal.find('#periode').val('')
          modal.find('#tahun').val('')
      }else{
          var id = button.data('id') 
  
          modal.find('#pemda').val(button.data('pemda'))
          modal.find('#periode').val(button.data('periode'))
          modal.find('#tahun').val(button.data('tahun'))
          modal.find('#tujuan_strategis').val(button.data('tujuan_strategis'))

          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.mr.update')}}")
  
      }
  })
</script>
@endif

@endsection