@extends('admin.template-admin')
@section('title',$title)
@section('head')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.13.1/datatables.min.css"/>

@endsection
@section('content')
<div class="container-fluid flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-lg-12 mb-4 order-0">
            <div class="card">
              <div class="d-flex align-items-end">
                  <div class="card-body">
                    <h5 class="card-title text-primary">{{$title}}</h5>
                    <p class="mb-4">Membuat Surat Tugas Pilih Area Dan Tunjuk Pegawai dan Tambahkan Keterangan</p>
                  </div>
              </div>
            </div>
          </div>
    </div>
    <form action="{{route('admin.st.store')}}" method="POST"> @csrf

    @if ($errors->any())
      @foreach ($errors->all() as $error)
      <div class="alert alert-danger alert-dismissible" role="alert">
        {{$error}}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
      </div>
      @endforeach
    @endif

    <div class="card mb-4">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="mb-0">Surat Tugas</h5>
      </div>
      <div class="card-body">
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="inputDibuat">Tanggal Dibuat</label>
            <div class="col-sm-10">
              <input type="date" class="form-control" id="inputDibuat" name="dibuat" value="{{env('APP_ENV') != 'production' ? date('Y-m-d') : ''}}" required>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="inputNomor">Nomor Surat</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="inputNomor" name="nomor" placeholder="Nomor Surat" value="{{env('APP_ENV') != 'production' ? rand(1,999999) : ''}}" required>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="hp">HP</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="hp" name="hp" placeholder="HP" value="{{env('APP_ENV') != 'production' ? rand(1,9) : ''}}" required>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="inputMulai">Tanggal Mulai</label>
            <div class="col-sm-10">
              <input type="date" class="form-control" id="inputMulai" name="mulai" value="{{env('APP_ENV') != 'production' ? date('Y-m-d',strtotime('+5 day')) : ''}}" required>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="inputSelesai">Tanggal Selesai</label>
            <div class="col-sm-10">
              <input type="date" class="form-control" id="inputSelesai" name="selesai" value="{{env('APP_ENV') != 'production' ? date('Y-m-d',strtotime('+15 day')) : ''}}" required>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="inputUraian">Uraian</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="inputUraian" name="uraian" placeholder="Uraian" required>{{env('APP_ENV') != 'production' ? 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus beatae tenetur earum, vitae non esse inventore quae quaerat, ducimus nostrum nihil, alias numquam assumenda! Aliquam velit fuga ipsum porro? Dolor.' : ''}}</textarea>
            </div>
          </div>

          <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="inputSelesai">Team</label>
            <div class="col-sm-10">
              <select name="team_id" id="" class="form-control" onchange="dataAnggota(this)" required>
                <option value="">Pilih Team</option>
                @foreach ($teams as $team)
                    <option value="{{$team->id}}">{{$team->nama}}</option>
                @endforeach
              </select>
            </div>
          </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="mb-0">Detail Anggota Team</h5>
      </div>
      <div class="card-body">
          <div class="table-responsive">
            <table class="table table-sm">
              <thead>
                <tr>
                  <th style="width: 10px"></th>
                  <th>Nama</th>
                  <th>NIP</th>
                  <th>Pangkat</th>
                  <th>Jabatan</th>
                  <th>Peran</th>
                </tr>
              </thead>
              <tbody id="dataPegawai">
                
              </tbody>
            </table>
          </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="mb-0">Pilih Area</h5>
      </div>
      <div class="card-body">
          <div class="table-responsive">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th style="width: 10px">No</th>
                    <th>Kode Desa</th>
                    <th>Nama Desa</th>
                    <th>Skor</th>
                    <th>Keterangan</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($samples as $no => $sample)
                      <tr class="data{{$no}}">
                          <td>
                            <input class="form-check-input" type="checkbox" name="sampleDesa[]" value="{{$sample->kd_desa}}" id="flexCheckDefault" checked>
                          </td>
                          <td>{{$sample->kd_desa}}</td>
                          <td>{{$sample->nama_pemdes}}</td>
                          <td>{{$sample->skor}}</td>
                          <td class="valKeterangan{{$no}}">{{$sample->keterangan}}</td>
                          <td class="text-end">
                            <button type="button" class="btn btn-primary btn-sm btn-block" data-bs-toggle="modal" data-name="Edit Sample Surat Tugas" data-ket="edit" href="#modalData" data-id="{{$sample->kd_desa}}" data-keterangan="{{$sample->keterangan}}" data-no="{{$no}}" >Tambah Keterangan</button>
                            <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('admin.st.sample.delete',['kd_desa'=>$sample->kd_desa])}}', 'data{{$no}}', 'Hapus {{$title}} ?')" >Hapus</a>
                          </td>
                      </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
      </div>
    </div>

    <div class="d-grid gap-2">
      <button class="btn btn-primary mt-3" type="submit">Simpan</button>
    </div>
    </form>



    <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>
              <div class="modal-body">
                  <div id="inputHidden"></div>
                  <div class="form-floating mb-3">
                    <input type="text" name="keterangan" class="form-control" id="keterangan" placeholder="Keterangan">
                    <label for="keterangan">Keterangan</label>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="storeKeterangan()">Save changes</button>
                  <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
              </div>
          </div>
      </div>
    </div>
    
</div>
@endsection

@section('script')

<script src="{{asset('js/delete.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)
          
          var id = button.data('id') 
          var no = button.data('no') 
          modal.find('#keterangan').val(button.data('keterangan'))
          modal.find('#inputHidden').html('<input type="hidden" name="kd_desa" id="kdDesa" value="'+id+'"><input type="hidden" name="_method" value="put"><input type="hidden" name="no" id="no" value="'+no+'">')
      })

      function storeKeterangan() {
        var keterangan = $('#keterangan').val();
        var kdDesa = $('#kdDesa').val();
        var no = $('#no').val();
        
        $('#modalData').modal('toggle');
        $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
            url: '{{route("admin.st.sample.update")}}',
            type: 'PUT',
            dataType: "JSON",
            data: {"keterangan": keterangan, "kd_desa": kdDesa},
            success: function (response) {
                if (response.kode = '00') {
                    Swal.fire( response.swal.title, response.swal.message, response.swal.icon)
                    $('.valKeterangan'+no).html(keterangan);
                } else {
                    Swal.fire("Kesalahan Jaringan, Coba beberapa saat lagi", {
                        icon: "error",
                    });
                    console.log(response.message);
                }
            },
            error: function (xhr) {
                Swal.fire( xhr.responseJSON.swal.title, xhr.responseJSON.swal.message, xhr.responseJSON.swal.icon)
            }
        });      
      };

      function dataAnggota(val) {
        var id = val.value;
        $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
            url: '{{route("admin.team.data")}}',
            type: 'GET',
            dataType: "JSON",
            data: {"id": id},
            success: function (response) {
                if (response.kode = '00') {
                  $('#dataPegawai').empty()
                  $.each(response.data, function(index, data) {
                    var nomor = index+1;
                      $('#dataPegawai').append('<tr><td>'+nomor+'</td> <td>'+data.nama+'</td> <td>'+data.nip+'</td> <td>'+data.pangkat+'</td> <td>'+data.jabatan+'</td> <td>'+data.peran+'</td> </tr>');
                  });

                } else {
                    Swal.fire("Kesalahan Jaringan, Coba beberapa saat lagi", {
                        icon: "error",
                    });
                    console.log(response.message);
                }
            },
            error: function (xhr) {
                Swal.fire( xhr.responseJSON.swal.title, xhr.responseJSON.swal.message, xhr.responseJSON.swal.icon)
            }
        });      
      };

    </script>
@endsection