@include('master.header')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    Data Survey
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h5 class="card-title mb-3">{{$survey->judul}}</h5>
                        <div class="badge mb-2 bg-success-transparent rounded-pill text-success p-2 px-3">Aktif</div>
                        <p class="card-text mb-0">Tahun {{$survey->tahun}}</p>
                        <p class="card-text"><small class="text-muted">Periode <span class="fw-bold">{{date('d M Y', strtotime($survey->tgl_mulai))}}</span> sd <span class="fw-bold">{{date('d M Y', strtotime($survey->tgl_berakhir))}}</span></small></p>
                        <a href="{{route('survey.edit', $survey->id)}}" class="btn btn-sm btn-info"><i class="fa fa-edit"></i> Edit</a>
                    </div>
                </div>
                
                <div class="card-body">
                    <ul class="nav nav-pills justify-content-center">
                        <li class="nav-item">
                            <a class="nav-link" href="{{route('survey.show', $survey->id)}}"><i class="bx bx-tachometer"></i> Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{route('survey.kelola', $survey->id)}}"><i class="bx bx-user"></i> Kelola Surveyor</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{route('survey.data', $survey->id)}}"><i class="bx bx-line-chart"></i> Data Survey</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{route('survey.laporan', $survey->id)}}"><i class="bx bx-pie-chart"></i> Laporan</a>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <div class="card">
                    <div class="card-header justify-content-between">
                        <div class="header-title">
                        <div class="row">
                            <div class="col-sm-6 col-lg-6">
                            <h4 class="card-title">{{$config['title']}} </h4>
                            </div>
                            <div class="col-sm-6 col-lg-6">
                            <a href="{{ route('survey.kelolatambah', $survey->id) }}" class="btn btn-primary float-end">
                                <i class="bx bx-plus"></i> Tambah
                            </a>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                        <table id="dt" class="table table-bordered w-100">
                            <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th class="text-center">Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        </div>
                    </div>
                    </div>
                </div>
              </div>

            
        </div> 
    </div>
@include('master.footer')
    <script>
      $(document).ready(function () {
        $('#dt').dataTable({

          responsive: true,
          serverSide: true,
          processing: true,
          lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10', '25', '50', 'All' ]
            ],
          ajax: {
            url: `{{ route('survey.kelola', $survey->id) }}`
          },
          columns: [
            {
              data: 'name',
              name: 'name'
            },
            {
              data: 'email',
              name: 'email'
            },
            {
              data: 'action',
              name: 'action',
              className: "text-center",
              orderable: false,
              searchable: false
            },
          ],
          rowCallback : function(row, data) {
            let api = this.api();
            $(row).find('.btn-delete').click(function(){
              let user_id = $(this).data('userid'),
                survey_id = $(this).data('surveyid'),
              url = `{{ route("survey.keloladelete", [':survey_id', ':user_id']) }}`;
              url = url.replace(':survey_id', survey_id);
              url = url.replace(':user_id', user_id);
              Swal.fire({
                title   : "Anda Yakin ?",
                text    : "Data tidak dapat dikembalikan setelah di hapus!",
                icon    : "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, Hapus!",
                cancelButtonText: "Tidak, Batalkan",
              }).then((result) => {
                if (result.value) {
                  $.ajax({
                    url: url,
                    type: "DELETE",
                    data: {
                      _token  : '{{ csrf_token() }}',
                      _method : 'DELETE'
                    },
                    error   : function(response){
                      toastr.error(response, 'Failed !');
                    },
                    success : function(response) {
                      if (response.status === "success") {
                        toastr.success(response.message, 'Success !');
                        api.draw();
                      } else {
                        toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                      }
                    }
                  });
                }
              });
            });
          }
        });
      });
    </script>
   </body>
</html>