@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')) }}">
@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">Data Level Pengguna / Administrator</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" action="{{ url("level/add_level") }}">
              @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 Level*</h5></label>
                  <div class="input-group">
                    <input
                      type="text"
                      class="form-control @error('level')
                          is-invalid
                      @enderror"
                      placeholder="Nama Level"
                       name="level"
                    required

                    />
                  </div>
                  @error('level')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
              </div>
            </form>
          </div>
        </div>
        @if (session()->get("success"))
            <div class="alert alert-success m-2 p-1">{{ session()->get("success") }}</div>
        @endif
        @if (session()->get("error"))
        <div class="alert alert-danger m-2 p-1">{{ session()->get("error") }}</div>
        @endif
        @if ($errors->any())
        <div class="alert m-2 p-1 alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
        <div class="card-datatable m-1">
            <div class="table-responsive">
                <table class=" table-hover table-striped  table tables-responsive" style="width:100% !important" id="table_services">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Level</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                </table>
            </div>
        </div>
      </div>
    </div>
  </div>
</section>

@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>
   $(document).ready(function() {
    $("#table_services").DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('level/ambil_data') }}",
                columns: [{
                        data: "DT_RowIndex",
                        name: "DT_RowIndex",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'level',
                        name: 'level',
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });
  </script>
@endsection