@extends('layouts.admin.index')

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

      <div class="body-wrapper">
        <div class="container-fluid">
          {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('FormSurveyResult',$id,'Hasil '.$survey->title) }}
          <div class="card w-100 position-relative overflow-hidden">
            <div class="card-body p-4" x-data='surveyMap({
              id: {{ $id  }}
            })'
              @set-load-jquery.window="loadedJquery()">
              <div class="row">
                <div class="col-12 mb-3 d-flex justify-content-end align-items-center">
                  <button class="btn btn-info me-2" data-bs-toggle="modal" data-bs-target="#map-modal" data-bs-whatever="@mdo">
                    <i class="ti ti-map fs-4 me-2"></i>Lihat Sebaran
                  </button>
                  <a href="{{ route('survey.export', ['id' => $id]) }}" class="btn btn-primary">
                    <i class="ti ti-download fs-4 me-2"></i>Ekspor Data Survey
                  </a>
                </div>
                <div class="col-12 mb-2">
                  <form action="{{ route('form-survey.view', ['id' => $id]) }}" method="get" id="form-search">
                    <div class="input-group w-25">
                    <span class="input-group-text rounded-start-pill bg-transparent" id="basic-addon1">
                      <i class="ti ti-search"></i>
                    </span>
                      <input name="s" type="text" value="{{ $q }}" class="form-control rounded-end-pill" placeholder="Cari Survey...">
                    </div>
                  </form>
                </div>
                <div class="col-12 mb-4">
                  <div class="table-responsive mb-4 border rounded-1">
                    <table class="table mb-0 align-middle">
                      <thead class="text-dark fs-4">
                      <tr>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0">No</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0">Tanggal</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0">Judul</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0">Alamat</h6>
                        </th>
                        <th>
                          <h6 class="fs-4 fw-semibold mb-0">Aksi</h6>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      @foreach($data->items() as $d)
                        <tr>
                          <td>{{ $loop->index + $data->firstItem() }}</td>
                          <td>{{ $d->created_at}}</td>
                          <td>{{ $d->form->title }}</td>
                          <td>{{ $d->address ? $d->address : '-' }}</td>
                          <td class="text-center">
                            <a class="d-flex align-items-center gap-3" href="{{ route('survey.view', [$d->id]) }}">
                              <i class="fs-4 ti ti-eye"></i>View
                            </a>
                          </td>
                        </tr>
                      @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
                {{ $data->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="map-modal"  tabindex="-1" >
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div class="map" id="map"></div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/js/leaflet/leaflet.css') }}">
  <style>
    #map{
      width: 100%;
      height: 650px;
      position: relative;
      z-index: 1;
    }
  </style>
@endpush
@push('scripts')
<script src="{{ asset('assets/js/leaflet/leaflet.js') }}" type="text/javascript"></script>
<script type="module">
  $(document).ready(function() {
    let map = null;
    $('.select-survey').select2({
      dropdownParent: $('#export-modal'),
      width: '100%'
    });

  });
</script>
@endpush