@extends('Shared._layout')

@section('vendor-styles')
@endsection

@section('styles')
@endsection

@section('breadcrumbs')
    <!--begin::Item-->
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('admin.user') }}" class="text-muted text-hover-primary">Kelola User</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-user-filter="search"
                           class="form-control form-control-solid w-250px ps-14" placeholder="Search User"/>
                </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-user') }}" target="_blank" class="btn btn-danger">Export PDF</a>
                    <a href="{{ route('admin.api.export-excel-user') }}" class="btn btn-success">Export Excel</a>
                </div>
                <!--begin::Export dropdown-->

                <!--end::Export buttons-->
                <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-user-filter="status">
                        <option></option>
                        <option value="all">Semua</option>
                        <option value="1">Aktif User</option>
                        <option value="0">Nonaktif User</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">Email</th>
                    <th class="min-w-200px">Nama Perusahaan</th>
                    <th class="min-w-200px">Role</th>
                    <th class="min-w-150px">Status</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')
    <script>
        $(document).ready(function () {
            const dataTable = $('#datatables').DataTable({
                searchDelay: 500,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.api.data-user.datatables') }}',
                    type: 'post',
                    data: function (d) {}
                },
                columns: [
                    {data: 'no'},
                    {data: 'email'},
                    {data: 'company_name'},
                    {data: 'role'},
                    {data: 'status'},
                    {data: 'action'},
                ],
                columnDefs: [
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                    },
                    {
                        targets: 4,
                        render: function ( data, type, row ) {
                            let text
                            if (data == '0') {
                                text = "<button class='btn btn-danger btn-nonaktif'> Nonaktif User</button>"
                            } else {
                                text = "<button class='btn btn-success btn-aktif'> Aktif User</button>"
                            }
                            return text
                        }
                    },
                    {
                        targets: 5,
                        render: function (data, type, row) {
                            return `<div class="btn-group">
                                        <a href="{{ url('admin/user/edit') }}/${row.id}" class="btn btn-sm btn-info">Edit</a>
                                        <button class='btn btn-sm btn-danger btn-delete-user'>Delete</button>
                                        <a href="{{ url('admin/user/ganti_pass') }}/${row.id}" class="btn btn-sm btn-warning">Ganti Password</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-user-filter = "search"]');
            filterSearch.on('keyup', (event) => {
                dataTable.search(event.target.value).draw()
            })

            let filterStatus = $('select[data-user-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-aktif', event => {
                event.preventDefault()
                let data = dataTable_data($(event.target).parents('tr'))

                Swal.fire({
                    icon: 'warning',
                    title: 'Apakah ingin nonaktifkan user?',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    denyButtonText: 'Tidak',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        axios.get('{{ url('admin/user/nonaktif/') }}/' + data.id)
                    }
                }).then(result => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil nonaktifkan user',
                            timer: 2000,
                            showConfirmButton: false,
                        })
                        dataTable.ajax.reload()
                    }
                })
            })

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

                Swal.fire({
                    icon: 'warning',
                    title: 'Apakah ingin aktifkan user?',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    denyButtonText: 'Tidak',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        axios.get('{{ url('admin/user/aktif/') }}/' + data.id)
                    }
                }).then(result => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil aktifkan user',
                            timer: 2000,
                            showConfirmButton: false,
                        })
                        dataTable.ajax.reload()
                    }
                })
            })

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

                Swal.fire({
                    icon: 'warning',
                    title: 'Apakah ingin menghapus user?',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    denyButtonText: 'Tidak',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        axios.get('{{ url('admin/user/delete/') }}/' + data.id)
                    }
                }).then(result => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil hapus user',
                            timer: 2000,
                            showConfirmButton: false,
                        })
                        dataTable.ajax.reload()
                    }
                })
            })

        })
    </script>
@endsection