@extends('Shared._layout')

@section('vendor-styles')
@endsection

@section('styles')
@endsection

@section('breadcrumbs')
    <!--begin::Item-->
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('admin.time_consultation') }}" class="text-muted text-hover-primary">Waktu Konsultasi</a>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-200 w-5px h-2px"></span>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    <li class="breadcrumb-item text-dark">Tambah Waktu Konsultasi</li>
    <!--end::Item-->
@endsection

@section('contents')
	<div class="card card-flush">
									<!--begin::Card header-->
									<div class="card-header align-items-center py-5 gap-2 gap-md-5">
										<!--begin::Card title-->
										<div class="card-title">
											<!--begin::Search-->
											<div class="d-flex align-items-center position-relative my-1">
												<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
												<span class="svg-icon svg-icon-1 position-absolute ms-4">
													<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
														<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
														<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
													</svg>
												</span>
												<!--end::Svg Icon-->
												<input type="text" data-time-consultation-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Search Product" />
											</div>
											<!--end::Search-->
										</div>
										<!--end::Card title-->
										<!--begin::Card toolbar-->
										<div class="card-toolbar flex-row-fluid justify-content-end gap-5">
											<!--begin::Add product-->
											<a href="{{ url('admin/time_consultation/add')}}" class="btn btn-primary">Add Waktu Konsultasi</a>
											<!--end::Add product-->
										</div>
										<!--end::Card toolbar-->
									</div>
									<!--end::Card header-->
									<!--begin::Card body-->
									<div class="card-body pt-0">
										<!--begin::Table-->
										<table class="table align-middle table-row-dashed fs-6 gy-5" id="datatables">
											<!--begin::Table head-->
											<thead>
												<!--begin::Table row-->
												<tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
													<th class="min-w-10px">
														No.
													</th>
													<th class="min-w-150px">Hari</th>
													<th class="min-w-200px">Waktu Konsultasi</th>
													<th class="text-end min-w-70px">Actions</th>
												</tr>
												<!--end::Table row-->
											</thead>
											<!--end::Table head-->
											<tbody class="text-gray-600 fw-semibold">
                							</tbody>
										</table>
										<!--end::Table-->
									</div>
									<!--end::Card body-->
	</div>
	<!--end::Products-->

	
@endsection

@section('scripts')
@if (session('success'))
    <script>
      Swal.fire({
		icon: 'success',
        title: "{{ session('success') }}"
	  });
    </script>
@endif
@if (session('failed'))
    <script>
      Swal.fire({
		icon: 'error',
        title: "{{ session('failed') }}"
	  });
    </script>
@endif

<script>
        $(document).ready(function () {
            const dataTable = $('#datatables').DataTable({
                searchDelay: 500,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.api.data-timeconsultation.datatables') }}',
                    type: 'post',
                    data: function (d) {}
                },
                columns: [
                    {data: 'no'},
                    {data: 'day'},
                    {data: 'time'},
                    {data: 'action'},
                ],
                columnDefs: [
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                    },
                    {
                        targets: 3,
                        render: function (data, type, row) {
                            return `<div class="btn-group">
                                        <a href="{{ url('admin/time_consultation/edit') }}/${row.id}" class="btn btn-sm btn-warning">Edit</a>
                                        <a href="{{ url('admin/time_consultation/delete') }}/${row.id}" class="btn btn-sm btn-danger">Delete</a>
                                    </div>`
                        }
                    }
                ],
            });
            const dataTable_tbody = $('#datatables tbody');
            const dataTable_data = row => dataTable.row(row).data();

            dataTable.on('order.dt search.dt', function () {
                let i = 1;

                dataTable.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
                    this.data(i++);
                });
            }).draw();

            let filterSearch = $('input[data-time-consultation-filter = "search"]');
            filterSearch.on('keyup', (event) => {
                dataTable.search(event.target.value).draw()
            })

            

        })
    </script>
@endsection