@extends('Shared._layout_table')

@section('vendor-styles')
@endsection

@section('styles')
@endsection

@section('breadcrumbs')
    <!--begin::Item-->
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('admin.consultation') }}" class="text-muted text-hover-primary">Kelola Konsultasi Penyedia Jasa</a>
    </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-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::Export buttons-->
                                            <div class="btn-group">
                                                <a href="{{ route('admin.api.export-pdf-testimoni') }}" target="_blank" class="btn btn-danger">Export PDF</a>
                                                <a href="{{ route('admin.api.export-excel-testimoni') }}" target="_blank" class="btn btn-success">Export Excel</a>
                                            </div>
                                            <!--begin::Export dropdown-->
											<div class="w-100 mw-150px">
												<!--begin::Select2-->
												<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Status" data-consultation-filter="status">
													<option></option>
													<option value="all">All</option>
													<option value="0">Konsultasi Diajukan</option>
													<option value="scheduled">Scheduled</option>
													<option value="inactive">Inactive</option>
												</select>
												<!--end::Select2-->
											</div>
											<!--begin::Add product-->
											<!-- <a href="{{ url('admin/time_consultation/add')}}" class="btn btn-primary">Add User</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">Nama</th>
													<th class="min-w-200px">Date</th>
													<th class="min-w-200px">Reason</th>
                                                    <th class="min-w-200px">Rating</th>
													<th class="text-end min-w-70px">Testimoni</th>
												</tr>
												<!--end::Table row-->
											</thead>
											<!--end::Table head-->
											<!--begin::Table body-->
											<tbody class="fw-semibold text-gray-600">

											</tbody>
											<!--end::Table body-->
										</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-testimoni.datatables') }}',
                    type: 'post',
                    data: function (d) {}
                },
                columns: [
                    {data: 'no'},
                    {data: 'name'},
                    {data: 'date'},
                    {data: 'reason'},
                    {data: 'rating'},
					{data: 'testimoni'},
                ],
                columnDefs: [
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                    },
					
                ],
            });
            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-consultation-filter = "search"]');
            filterSearch.on('keyup', (event) => {
                dataTable.search(event.target.value).draw()
            })

            let filterStatus = $('select[data-consultation-filter = "status"]');
            filterStatus.on('change', (event) => {
                if (event.target.value === 'all') {
                    event.target.value = ''
                }
                dataTable.column(4).search(event.target.value).draw()
            })

			dataTable_tbody.on('click', 'button.btn-acc', event => {
                event.preventDefault()
                let data = dataTable_data($(event.target).parents('tr'))

                Swal.fire({
                    icon: 'warning',
                    title: 'Apakah ingin menyetujui konsultasi ini?',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    denyButtonText: 'Tidak',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        axios.get('{{ url('admin/consultation/acc/') }}/' + data.id)
                    }
                }).then(result => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil menyetujui konsultasi',
                            timer: 2000,
                            showConfirmButton: false,
                        })
                        dataTable.ajax.reload()
                    }
                })
            })
        })
    </script>
@endsection