@extends('doctorpanel.layout.app')
@section('title', 'History & Logs | Waiting Room')

@section('content')
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('doctorpanel.dashboard') }}">{{ __('translations.Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.History & Logs') }}</a></li>
        </ol>
    </div>


    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card p-3">
                <form id="filterForm">
                    <div class="row g-3">

                        <!--end col-->
                        <div class="col-xxl-2 col-sm-6">
                            <div>
                                <input type="time" id="filterTime" class="form-control" placeholder="{{ __('translations.Select time') }}">
                            </div>
                        </div>

                        <div class="col-xxl-3 col-sm-6">
                            <div>
                                <input type="date" id="filterDate" class="form-control" placeholder="{{ __('translations.Select Date') }}">
                            </div>
                        </div>
                        <!--end col-->

                        <!--end col-->
                        <!--end col-->
                        <div class="col-xxl-3 col-sm-4">
                            <div>
                                <select name="status" class="form-select form-select-lg"
                                    aria-label=".form-select-lg example" id="filterType">
                                    <option value="" selected>{{ __('translations.Type') }}</option>
                                    <option value="User">{{ __('translations.User') }}</option>
                                    <option value="Doctor">{{ __('translations.Doctor') }}</option>
                                    <option value="Clinic">{{ __('translations.Clinic') }}</option>
                                    {{-- <option value="Admin">Admin</option> --}}
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        <!--end col-->
                        <div class="col-xxl-2 col-sm-4">
                            <div>
                                <button type="button" class="btn btn-primary w-100" onclick="SearchData();"><i
                                        class="ri-equalizer-fill me-1 align-bottom"></i>
                                    {{ __('translations.Filters') }}
                                </button>
                            </div>
                        </div>
                        <div class="col-xxl-2 col-sm-4">
                            <div>
                                <a href="{{ url('dashboard/history') }}" class="btn btn-primary w-100"><i
                                        class="ri-equalizer-fill me-1 align-bottom"></i>
                                    {{ __('translations.Clear Filters') }}
                                </a>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('translations.All History & Logs') }}</h4>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="appointmentTable" class="display" style="min-width: 845px">
                            <thead>
                                <tr>
                                    <th>{{ __('translations.ID') }}</th>
                                    <th>{{ __('translations.Type') }}</th>
                                    <th>{{ __('translations.Date') }}</th>
                                    <th>{{ __('translations.Time') }}</th>
                                    <th>{{ __('translations.Description') }}</th>
                                    {{-- <th>Action</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                {{-- <tr>
                                    <td>1</td>
                                    <td>Clinic ABC has moved Patient appointment to In Progress.</td>
                                    <td><span class="badge bg-danger">Clinic</span></td>
                                    <td>18-02-2024</td>
                                    <td><a href="#" class="btn btn-danger shadow btn-xs sharp me-1"
                                            data-bs-toggle="modal" data-bs-target="#deleteModal"
                                            onclick="deleteRecord('1001')" title="Delete"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr> --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Delete Modal -->
    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Delete doctor') }}</h1>
                    <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 doctor?') }}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="submitDelForm" type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--Delete Modal -->
    <div class="modal fade" id="clear-all-logs-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ __('translations.Delete doctor') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="deleteAllLogs">
                    @csrf
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete all logs?') }}
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button id="deleteAllLogForm" type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')
    <script>
        async function getDoctorLogs(e) {
            e.preventDefault();
            try {
                const response = await fetch(`{{ route('doctorpanel.delete.all.log') }}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Doctor Logs:', data);
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
                return data;
            } catch (error) {
                console.error('Error fetching doctor logs:', error);
            }
        }

        document.querySelector('#deleteAllLogs').addEventListener('submit', getDoctorLogs);

        // Data Table
        $(document).ready(function() {
            let table = $('#appointmentTable').DataTable({
                "processing": true,
                "serverSide": true,
                "paging": true,
                "bPaginate": true,
                "pageLength": 10,
                "bLengthChange": false,
                "lengthMenu": [
                    [5, 10, 20, 50],
                    ['5', '10', '20', '50']
                ],
                "ajax": {
                    "url": "{{ route('get.doctor.clinic.logs') }}",
                    "type": "POST",
                    data: function(d) {
                        d._token = '{{ csrf_token() }}'; // CSRF token
                        d.date = $('#filterDate').val();
                        d.time = $('#filterTime').val();
                        d.type = $('#filterType').val();
                    }
                },
                'columns': [
                    // {data: 'checkbox', orderable: false},
                    {
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'type',
                        name: 'type',
                        orderable: false
                    },
                    {
                        data: 'date',
                        name: 'date',
                        orderable: false
                    },
                    {
                        data: 'time',
                        name: 'time',
                        orderable: false
                    },
                    {
                        data: 'message',
                        name: 'message',
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ],
                language: {
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                }
            });
        });

        // Search button to trigger filtering
        function SearchData() {
            $('#appointmentTable').DataTable().ajax.reload(); // Refresh DataTable with new filters
        }

        function deleteLogRecord(id) {
            $('#deleteUserId').val(id);
        }
        $("#deleteUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteModal');
            let formData = new FormData($("#deleteUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctorpanel.delete.log') }}",
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html(
                        '<div class="spinner-border" role="status" style="height: 14px;width: 14px;accent-color: ;"> <span class="visually-hidden">Loading...</span> </div>'
                    );
                    $('.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