@extends('admin.layout.index')
@section('title', 'Waiting Room | Clinics')
@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.Clinics') }}</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 Clinics') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
			
			<div class="row">
				<div class="col-xl-3 col-md-6">
					<!-- card -->
					<div class="card card-animate">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div class="flex-grow-1">
									<p class="text-uppercase fw-medium text-muted mb-0">Total Clinics</p>
								</div>
								<div class="flex-shrink-0">
									<h5 class="text-success fs-14 mb-0">
										<i class="ri-arrow-right-up-line fs-13 align-middle"></i> +89.24 %
									</h5>
								</div>
							</div>
							<div class="d-flex align-items-end justify-content-between mt-4">
								<div>
									<h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="559">0</span>k</h4>
									
								</div>
								<div class="avatar-sm flex-shrink-0">
									<span class="avatar-title bg-light rounded fs-3">
										<i data-feather="file-text" class="text-success icon-dual-success"></i>
									</span>
								</div>
							</div>
						</div><!-- end card body -->
					</div><!-- end card -->
				</div><!-- end col -->

				<div class="col-xl-3 col-md-6">
					<!-- card -->
					<div class="card card-animate">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div class="flex-grow-1">
									<p class="text-uppercase fw-medium text-muted mb-0">Approved Clinics</p>
								</div>
								<div class="flex-shrink-0">
									<h5 class="text-danger fs-14 mb-0">
										<i class="ri-arrow-right-down-line fs-13 align-middle"></i> +8.09 %
									</h5>
								</div>
							</div>
							<div class="d-flex align-items-end justify-content-between mt-4">
								<div>
									<h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="409.66">0</span>k</h4>
									
								</div>
								<div class="avatar-sm flex-shrink-0">
									<span class="avatar-title bg-light rounded fs-3">
										<i data-feather="check-square" class="text-success icon-dual-success"></i>
									</span>
								</div>
							</div>
						</div><!-- end card body -->
					</div><!-- end card -->
				</div><!-- end col -->

				<div class="col-xl-3 col-md-6">
					<!-- card -->
					<div class="card card-animate">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div class="flex-grow-1">
									<p class="text-uppercase fw-medium text-muted mb-0">Rejected Clinics</p>
								</div>
								<div class="flex-shrink-0">
									<h5 class="text-danger fs-14 mb-0">
										<i class="ri-arrow-right-down-line fs-13 align-middle"></i> +9.01 %
									</h5>
								</div>
							</div>
							<div class="d-flex align-items-end justify-content-between mt-4">
								<div>
									<h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="136.98">0</span>k</h4>
									
								</div>
								<div class="avatar-sm flex-shrink-0">
									<span class="avatar-title bg-light rounded fs-3">
										<i data-feather="x-octagon" class="text-success icon-dual-success"></i>
										
									</span>
								</div>
							</div>
						</div><!-- end card body -->
					</div><!-- end card -->
				</div><!-- end col -->

				<div class="col-xl-3 col-md-6">
					<!-- card -->
					<div class="card card-animate">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div class="flex-grow-1">
									<p class="text-uppercase fw-medium text-muted mb-0">Pending Clinics</p>
								</div>
								<div class="flex-shrink-0">
									<h5 class="text-success fs-14 mb-0">
										<i class="ri-arrow-right-up-line fs-13 align-middle"></i> +7.55 %
									</h5>
								</div>
							</div>
							<div class="d-flex align-items-end justify-content-between mt-4">
								<div>
									<h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="84.20">0</span>k</h4>
								
								</div>
								<div class="avatar-sm flex-shrink-0">
									<span class="avatar-title bg-light rounded fs-3">
										<i data-feather="clock" class="text-success icon-dual-success"></i>
									</span>
								</div>
							</div>
						</div><!-- end card body -->
					</div><!-- end card -->
				</div><!-- end col -->
			</div> <!-- end row-->


            <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.Clinic Management') }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body border-bottom-dashed border-bottom">
                            <form>
                                <div class="row g-3">
                                    <!-- <div class="col-xl-5">
                                                                                                        <div class="search-box">
                                                                                                            <input type="text" class="form-control search"
                                                                                                                placeholder="Search for clinic name, status, or something...">
                                                                                                            <i class="ri-search-line search-icon"></i>
                                                                                                        </div>
                                                                                                    </div> -->
                                    <!-- <div class="col-xl-5">
                                                                                                    </div> -->
                                    <!--end col-->
                                    <div class="col-xl-7">
                                        <div class="row g-3">
                                            <div class="col-sm-4">
                                                <input type="date" class="form-control" id="datepicker-range"
                                                    data-provider="flatpickr" data-date-format="d M, Y"
                                                    placeholder="{{ __('translations.Select date') }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <select class="form-control" id="clinicStatus">
                                                    <option value="">{{ __('translations.Status') }}</option>
                                                    <option value="approved">{{ __('translations.Delete') }}</option>
                                                    <option value="pending">{{ __('translations.Pending') }}</option>
                                                    <option value="rejected">{{ __('translations.Rejected') }}</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-4">
                                                <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>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <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.Clinic Name') }}</th>
                                            <th>{{ __('translations.Registration Date') }}</th>
                                            <!-- <th>Doctors</th> -->
                                            <th>{{ __('translations.Status') }}</th>
                                            <th>{{ __('translations.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>

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

    <!-- Delete Clinic Modal -->
    <div class="modal fade" id="deleteClinicModal" tabindex="-1" aria-labelledby="deleteClinicModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteClinicModalLabel">{{ __('translations.Delete Clinic') }}</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 clinic? 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>

    <!-- Approve Clinic Modal -->
    <div class="modal fade" id="approveClinicModal" tabindex="-1" aria-labelledby="deleteClinicModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="approveClinic">{{ __('translations.Approve Clinic') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="approveUser">
                    @csrf
                    <input type="hidden" name="id" id="approveUserId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to Approve this clinic?') }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit" id="submitApproveForm"
                            class="btn btn-success">{{ __('translations.Approve') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Reject Clinic Modal -->
    <div class="modal fade" id="rejectClinicModal" tabindex="-1" aria-labelledby="deleteClinicModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rejectClinic">{{ __('translations.Reject Clinic') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="rejectUser">
                    @csrf
                    <input type="hidden" name="id" id="rejectUserId">
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to Reject this clinic?') }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit" id="submitRejectForm"
                            class="btn btn-warning">{{ __('translations.Reject') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

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

    <script>
        $(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('getAllClinics') }}",
                    "type": "GET",
                    "data": function(d) {
                        // "_token": "{{ csrf_token() }}",
                        d.status = $('#clinicStatus').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: 'name',
                        orderable: false
                    },
                    // {
                    //     data: 'email',
                    //     orderable: false
                    // },
                    {
                        data: 'created_at',
                        orderable: false
                    },
                    {
                        data: 'status',
                        orderable: false
                    },
                    {
                        data: 'action',
                        orderable: false
                    },
                ]
            });

            // Status filter
            $('#clinicStatus').on('change', function() {
                table.ajax.reload();
            });

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

            // Clear filters functionality
            $('#clearFiltersButton').on('click', function() {
                // Clear the filter inputs
                $('#clinicStatus').val('').trigger('change'); // Reset status filter
                $('#datepicker-range').val('').trigger('change'); // Reset date filter

                // Reload the table with default state (without filters)
                table.ajax.reload();
            });
            // Handle status toggle
            $('#usersTable').on('change', '.status-toggle', function() {
                let userId = $(this).data('user-id');
                let status = this.checked ? 1 : 0;

                $.ajax({
                    url: "{{ route('barber.status') }}",
                    method: 'POST',
                    data: {
                        id: userId,
                        status: status,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // if (response.success) {
                        //     alert('Status updated successfully');
                        // } else {
                        //     alert('Failed to update status');
                        //     this.checked = !status; // Revert the checkbox state
                        // }
                        if (response.success === true) {
                            notyf.success({
                                message: response.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);

                        } else {
                            notyf.error({
                                message: response.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status.');
                        this.checked = !status; // Revert the checkbox state
                    }.bind(this)
                });
            });

        });


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

        // Approve
        function approveRecord(id) {
            // console.log(id);
            $('#approveUserId').val(id);
        }

        function rejectRecord(id) {
            // console.log(id);
            $('#rejectUserId').val(id);
        }

        $("#rejectUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitRejectForm");
            const modal = $('#rejectClinicModal');
            let formData = new FormData($("#rejectUser")[0]);
            formData.append('status', 'Rejected');
            $.ajax({
                type: "POST",
                url: "{{ route('clinic.status') }}",
                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');
                }
            });
        });

        $("#approveUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitApproveForm");
            const modal = $('#approveClinicModal');
            let formData = new FormData($("#approveUser")[0]);
            formData.append('status', 'Approved'); // Approve status ko manually add kar diya

            $.ajax({
                type: "POST",
                url: "{{ route('clinic.status') }}",
                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('Approve');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    } else {
                        btn.prop('disabled', false);
                        btn.html('Approve');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Approve');
                }
            });
        });

        $("#deleteUser").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitDelForm");
            const modal = $('#deleteClinicModal');
            let formData = new FormData($("#deleteUser")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('clinic.delete') }}",
                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