@extends('layouts/contentLayoutMaster')

@section('title', 'DataTables')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">

@endsection


@section('content')
    <!-- Ajax Sourced Server-side -->
    <section id="ajax-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom d-flex " style="justify-content: space-between !important">
                        <h4 class="card-title">Kontak</h4>
                        <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambah">Tambah</a>
                    </div>
                    <div class="modal fade" id="tambah" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog  modal-lg" role="document">
                            <form method="POST" enctype="multipart/form-data" class="modal-content" accept="">
                                @csrf
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modalFullTitle">Tambah Level</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="containers">
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Nama</h5>
                                            </label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="Nama" required
                                                    name="nama" aria-describedby="basic-addon-search1" />
                                            </div>
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                              <h5>Level Siaga</h5>
                                            </label>
                                            <select class="select2 form-select" id="select2-multiple" multiple>
                                                <option value="Siaga 1">Siaga 1</option>
                                                <option value="Siaga 2">Siaga 2</option>
                                                <option value="Siaga 3">Siaga 3</option>
                                                <option value="Siaga 4">Siaga 4</option>
                                            </select>
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                              <h5>Lokasi Alat</h5>
                                            </label>
                                            <select class="select2 form-select" id="select2-multiple-dua" multiple>
                                                <option value="Jakarta">Jakarta</option>
                                                <option value="Tangerang">Tangerang</option>
                                                <option value="Jawa Barat">Jawa Barat</option>
                                                <option value="Jawa Tengah">Jawa Tengah</option>
                                            </select>
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Jabatan</h5>
                                            </label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="Jabatan" required
                                                    name="jabatan" value="" aria-describedby="basic-addon-search1" />
                                            </div>
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>No Wa</h5>
                                            </label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" placeholder="No WA" required
                                                    name="no_wa" value="" aria-describedby="basic-addon-search1" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-label-secondary"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Simpan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card-datatable m-1">
                        <table class=" table-hover   table tables-responsive" style="width:100% !important" id="table">
                            <thead>
                                <tr>
                                    <th>Level</th>
                                    <th>Status</th>
                                    <th>Keterangan</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Admin</td>
                                    <td>Aktif</td>
                                    <td>Lorem ipsum dolor sit amet.</td>
                                    {{-- <td><a href="#" data-bs-toggle="modal" data-bs-target="#edit"
                                            class="btn btn-success btn-sm"><i class="fas fa-pen"></i></a>
                                        <a href="" data-bs-toggle="modal" data-bs-target="#hapus"
                                            class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></a>
                                    </td> --}}
                                    <td>
                                        <div class="dropdown">
                                          <button type="button" class="btn btn-sm dropdown-toggle hide-arrow py-0" data-bs-toggle="dropdown">
                                            <i data-feather="more-vertical"></i>
                                          </button>
                                          <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="#" data-bs-toggle="modal"
                                            data-bs-target="#edit">
                                              <i data-feather="edit-2" class="me-50"></i>
                                              <span>Edit</span>
                                            </a>
                                            <a class="dropdown-item" href="#"  data-bs-toggle="modal"
                                            data-bs-target="#hapus">
                                              <i data-feather="trash" class="me-50"></i>
                                              <span>Delete</span>
                                            </a>
                                          </div>
                                        </div>
                                      </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="hapus" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog  modal-lg" role="document">
            <form method="POST" enctype="multipart/form-data" class="modal-content" accept="">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalFullTitle">Hapus Kontak</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="p-2 text-center">
                        <h4>Apakah Anda Yakin Ingin Menghapus Data Ini!</h4>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Hapus</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="edit" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog  modal-lg" role="document">
          <form method="POST" enctype="multipart/form-data" class="modal-content" accept="">
              @csrf
              <div class="modal-header">
                  <h5 class="modal-title" id="modalFullTitle">Edit Kontak</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"
                      aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="containers">
                      <div class="mb-1">
                          <label for="" style="margin-bottom: 5px !important;">
                              <h5>Nama</h5>
                          </label>
                          <div class="input-group">
                              <input type="text" class="form-control" placeholder="Nama" required
                                  name="nama" aria-describedby="basic-addon-search1" value="Admin">
                          </div>
                      </div>
                      <div class="mb-1">
                          <label for="" style="margin-bottom: 5px !important;">
                            <h5>Level Siaga</h5>
                          </label>
                          <select class="select2 form-select" id="select2-multiple-tiga" multiple>
                              <option value="Siaga 1">Siaga 1</option>
                              <option value="Siaga 2">Siaga 2</option>
                              <option value="Siaga 3" selected>Siaga 3</option>
                              <option value="Siaga 4" selected>Siaga 4</option>
                          </select>
                      </div>
                      <div class="mb-1">
                          <label for="" style="margin-bottom: 5px !important;">
                            <h5>Lokasi Alat</h5>
                          </label>
                          <select class="select2 form-select" id="select2-multiple-lima" multiple>
                              <option value="Jakarta">Jakarta</option>
                              <option value="Tangerang" selected>Tangerang</option>
                              <option value="Jawa Barat" selected>Jawa Barat</option>
                              <option value="Jawa Tengah">Jawa Tengah</option>
                          </select>
                      </div>
                      <div class="mb-1">
                          <label for="" style="margin-bottom: 5px !important;">
                              <h5>Jabatan</h5>
                          </label>
                          <div class="input-group">
                              <input type="text" class="form-control" placeholder="Jabatan" required
                                  name="jabatan" value="" aria-describedby="basic-addon-search1" value="Admin">
                          </div>
                      </div>
                      <div class="mb-1">
                          <label for="" style="margin-bottom: 5px !important;">
                              <h5>No Wa</h5>
                          </label>
                          <div class="input-group">
                              <input type="number" class="form-control" placeholder="No WA" required
                                  name="no_wa" value="" aria-describedby="basic-addon-search1" value="08528763761278">
                          </div>
                      </div>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-label-secondary"
                      data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Simpan</button>
              </div>
          </form>
      </div>
  </div>
@endsection


@section('vendor-script')
    {{-- vendor files --}}
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>

@endsection

@section('page-script')
    {{-- Page js files --}}
    <script src="{{ asset(mix('js/scripts/tables/table-datatables-advanced.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/components/components-modals.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
    <script>
        $(document).ready(function() {
            $("#table").DataTable();
        });
    </script>
@endsection