@extends('admin.layout.index')
@section('title', 'Waiting Room | User Management')
@section('custom-style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection
@section('content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">{{ __('translations.User Management') }}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('translations.Admin') }}</a></li>
                                <li class="breadcrumb-item active">{{ __('translations.All Users') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header border-bottom-dashed">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm">
                                    <div>
                                        <h5 class="card-title mb-0">{{ __('translations.Manage Users') }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body border-bottom-dashed border-bottom">
                            <form>
                                <div class="row g-3">
                                    <!-- Search Input -->
                                    <div class="col-xl-3">
                                        <div class="search-box">
                                            <input type="text" id="userSearch" class="form-control search"
                                                placeholder="{{ __('translations.Search for user name, email, or role...') }}">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="date" class="form-control" id="datepicker-range"
                                            data-provider="flatpickr" data-date-format="d M, Y" placeholder="{{ __('translations.Select date') }}">
                                    </div>
                                    <!-- Clinic Filter -->
                                    {{-- <div class="col-xl-2">
                                        <select class="form-control" id="clinicFilter">
                                            <option value="">Clinics</option>
                                            <option value="clinic1">Sunrise Clinic</option>
                                            <option value="clinic2">HealthCare Plus</option>
                                            <option value="clinic3">Smile Dental Clinic</option>
                                            <!-- Add more clinics as needed -->
                                        </select>
                                    </div>
                                    <!-- Type Filter -->
                                    <div class="col-xl-2">
                                        <select class="form-control" id="userRole">
                                            <option value="">Type</option>
                                            <option value="doctor">Doctor</option>
                                            <option value="patient">Patient</option>
                                        </select>
                                    </div> --}}
                                    <div class="col-xl-2">
                                        <button type="button" id="clearFiltersButton" class="btn btn-primary w-100">
                                            <i class="ri-equalizer-fill me-2 align-bottom"></i>
                                            {{ __('translations.Clear Filters') }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Table Section -->
                        <div class="card-body">
                            <table id="clinicTable" class="table nowrap align-middle" style="width:100%">
                                <thead class="text-muted table-light">
                                    <tr class="text-uppercase">
                                        <th>{{ __('translations.No.') }}</th>
                                        <th>{{ __('translations.User Name') }}</th>
                                        <th>{{ __('translations.Email') }}</th>
                                        <th>{{ __('translations.Type') }}</th>
                                        <th>{{ __('translations.Registration Date') }}</th>
                                        {{-- <th>Clinic</th> --}}
                                        {{-- <th>Status</th> --}}
                                        <th>{{ __('translations.Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>

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


                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Suspend User Modal -->
    <div class="modal fade" id="suspendUserModal" tabindex="-1" aria-labelledby="suspendUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="suspendUserModalLabel">{{ __('translations.Suspend User') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{ __('translations.Are you sure you want to suspend this user?') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                    <button type="button" class="btn btn-warning">{{ __('translations.Suspend') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete User Modal -->
    <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteUserModalLabel">{{ __('translations.Delete User') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="deleteUser">
                    @csrf
                    <input type="hidden" name="id" id="deleteUserId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete this user? This action cannot be undone.') }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit" id="submitDelForm" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        // Delete
        function deleteRecord(id) {
            $('#deleteUserId').val(id);
        }

        $(document).ready(function() {

            flatpickr("#datepicker-range", {
                dateFormat: "d-m-Y",
                maxDate: "today"
            });

            let table = $('#clinicTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "ordering": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('admin-users') }}",
                    "type": "GET",
                    "data": function(d) {
                        // "_token": "{{ csrf_token() }}",
                        d.search = $('#userSearch').val();
                        d.date = $('#datepicker-range').val();
                    }
                },
                'columns': [{
                        data: null, // This column will not have any data, just an index
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return meta.row + 1 + (meta.settings
                                ._iDisplayStart); // Calculate serial number
                        },
                    },
                    {
                        data: 'username',
                        orderable: false
                    },
                    {
                        data: 'email',
                        orderable: false
                    },
                    {
                        data: 'type',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false
                    },
                    // {
                    // data: 'status',
                    // orderable: false
                    // },
                    {
                        data: 'action',
                        orderable: false
                    },
                ]
            });

            // Global search via DataTables' built-in method
            $('#globalSearch').on('keyup', function() {
                // table.search(this.value).reload();
                table.search(this.value).draw();
            });

            // Live Search for #userSearch input
            $('#userSearch').on('keyup', function() {
                table.ajax.reload(); // Reload the table with the updated search query
            });

            // Date filter
            $('#datepicker-range').on('change', function() {
                table.ajax.reload();
            });

            // Clear filters functionality
            $('#clearFiltersButton').on('click', function() {
                $('#userSearch').val(''); // Clear search input
                $('#datepicker-range').val('').trigger('change'); // Clear date filter
                table.ajax.reload(); // Reload the table without filters
            });
            // Handle status toggle


            $("#deleteUser").on('submit', function(e) {
                e.preventDefault();
                const btn = $("#submitDelForm");
                const modal = $('#deleteClinicModal');
                let formData = new FormData($("#deleteUser")[0]);
                $.ajax({
                    type: "POST",
                    url: "{{ route('deleteUser') }}",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formData,
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        $('.error-message').html('');
                    },
                    success: function(res) {
                        if (res.success === true) {
                            btn.prop('disabled', false);
                            btn.html('Delete');
                            modal.modal('hide');
                            notyf.success({
                                message: res.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);
                        } else {
                            btn.prop('disabled', false);
                            btn.html('Delete');
                            modal.modal('hide');
                            notyf.error({
                                message: res.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(e) {
                        btn.prop('disabled', false);
                        btn.html('Delete');
                    }
                });
            });

        });
    </script>
@endsection