@extends('doctorpanel.layout.app')
@section('title', 'Appointment Details | Waiting Room')

@section('content')

    <style>
        .badge-secondary {
            background-color: #b4b0b0 !important;
        }

        .badge-light-info {
            background-color: #f8c61bbd !important;
        }
    </style>


    <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="{{ route('doctorpanel.appointments') }}">{{ __('translations.Appointments') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Appointment Details') }}</a></li>
        </ol>
    </div>
    @php
        $startTime = \Carbon\Carbon::createFromFormat('H:i', $booking->start_time)->format('g:i A');
        $endTime = \Carbon\Carbon::createFromFormat('H:i', $booking->end_time)->format('g:i A');
    @endphp
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('translations.Appointment Details') }}</h4>
                    <a href="{{ url('dashboard/appointments') }}" class="btn btn-primary text-end">{{ __('translations.Back') }}</a>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Appointment Info -->
                        <div class="col-md-6">
                            <h5>{{ __('translations.Appointment Info') }}</h5>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <strong>{{__('translations.Date')}}: </strong> {{ Carbon\Carbon::parse($booking->date)->format('j F, Y') }}
                                </li>

                                <li class="list-group-item">
                                    <strong>{{ __('translations.Time Slot') }}: </strong> {{ $startTime }} - {{ $endTime }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Fees') }}: </strong> {{ $booking->total_amount }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('Queue No') }}: </strong> {{ $booking->ticket }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Status') }}: </strong>
                                    <span
                                        class="badge badge-{{ $booking->status == 'completed' ? 'success' : 'warning' }}">{{ ucfirst($booking->status) }}</span>
                                </li>
                            </ul>
                        </div>

                        <!-- Doctor Info -->
                        <div class="col-md-6">
                            <h5>{{ __('translations.Doctor Info') }}</h5>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Doctor Name') }}: </strong> {{ $booking->Doctor->name }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Location') }}: </strong> {{ $booking->Doctor->location }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Specializations') }}: </strong>
                                    {{ $booking->Doctor->specialities->pluck('name')->implode(', ') }}
                                </li>

                                <li class="list-group-item">
                                    <strong>{{ __('translations.Email') }}: </strong> {{ $booking->Doctor->email }}
                                </li>
                                <!-- <li class="list-group-item">
                                                                        <strong>Phone: </strong> {{ $booking->Doctor->phone }}
                                                                    </li> -->
                            </ul>
                        </div>

                        <!-- Patient Info -->
                        <div class="col-md-12 mt-4">
                            <h5>{{ __('translations.Patient Info') }}</h5>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Patient Name') }}: </strong>
                                    {{ $booking->getUser->first_name . ' ' . $booking->getUser->last_name }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Email') }}: </strong> {{ $booking->getUser->email }}
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('translations.Phone') }}: </strong>
                                    {{ $booking->getUser->country_code . $booking->getUser->phone }}
                                </li>
                                <!-- <li class="list-group-item">
                                                                        <strong>Category: </strong> Neurologist
                                                                    </li> -->
                            </ul>
                        </div>

                    </div>
                    <div class="row mt-4">
                        <!-- Doctor's Appointment History -->
                        <div class="col-md-6">
                            <h5>{{ __('translations.Doctor Appointment History') }}</h5>
                            @if ($appointmentHistory->isEmpty())
                                <p>{{ __('translations.No past appointments found for this patient with the same doctor.') }}</p>
                            @else
                                @foreach ($appointmentHistory as $history)
                                    @php
                                        // Set the badge class based on the appointment status
                                        $badgeClass = match ($history->status) {
                                            'completed' => 'success',
                                            'cancel' => 'danger',
                                            'absent' => 'secondary',
                                            'pending' => 'warning',
                                            'in_progress' => 'light-info',
                                            default => 'secondary', // Fallback class for unexpected status
                                        };
                                    @endphp
                                    <ul class="list-group mb-4">
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Date') }}: </strong>
                                            {{ Carbon\Carbon::parse($history->date)->format('j F, Y') }}
                                        </li>
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Patient') }}: </strong>
                                            {{ $history->getUser->first_name . ' ' . $history->getUser->last_name }}
                                        </li>
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Status') }}: </strong>
                                            <span
                                                class="badge badge-{{ $badgeClass }}">{{ ucfirst($history->status === 'cancel' ? 'cancelled' : $history->status) }}
                                            </span>
                                        </li>
                                    </ul>
                                @endforeach
                                {{-- <nav aria-label="Page navigation example">
                                                <ul class="pagination float-end">
                                                    <!-- Previous Page Link -->
                                                    @if ($appointmentHistory->onFirstPage())
                                                    <li class="page-item disabled"><span class="page-link">Previous</span></li>
                                                    @else
                                                    <li class="page-item"><a class="page-link"
                                                            href="{{ $appointmentHistory->previousPageUrl() }}">Previous</a></li>
                                                    @endif

                                                    <!-- Pagination Elements -->
                                                    @foreach ($appointmentHistory->getUrlRange(1, $appointmentHistory->lastPage()) as $page => $url)
                                                    <li class="page-item {{ $page == $appointmentHistory->currentPage() ? 'active' : '' }}">
                                                        <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                                    </li>
                                                    @endforeach

                                                    <!-- Next Page Link -->
                                                    @if ($appointmentHistory->hasMorePages())
                                                    <li class="page-item"><a class="page-link"
                                                            href="{{ $appointmentHistory->nextPageUrl() }}">Next</a></li>
                                                    @else
                                                    <li class="page-item disabled"><span class="page-link">Next</span></li>
                                                    @endif
                                                </ul>
                                            </nav> --}}

                            @endif
                        </div>

                        <!-- Patient's Appointment History -->
                        <div class="col-md-6">
                            <h5>{{ __('translations.Patient Appointment History') }}</h5>
                            @if ($appointmentUserHistory->isEmpty())
                                <p class="mt-5 text-center">{{ __('translations.No Patient Appointment History found.') }}</p>
                            @else
                                @foreach ($appointmentUserHistory as $uHistory)
                                    @php
                                        // Set the badge class based on the appointment status
                                        $badgeClass = match ($uHistory->status) {
                                            'completed' => 'success',
                                            'cancel' => 'danger',
                                            'absent' => 'secondary',
                                            'pending' => 'warning',
                                            'in_progress' => 'light-info',
                                            default => 'secondary', // Fallback class for unexpected status
                                        };
                                    @endphp
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Date') }}: </strong>
                                            {{ Carbon\Carbon::parse($uHistory->date)->format('j F, Y') }}
                                        </li>
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Doctor') }}: </strong> {{ $uHistory->Doctor->name }}
                                        </li>
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Specializations') }}: </strong>
                                            {{ $uHistory->Doctor->specialities->pluck('name')->join(', ') }}

                                        </li>
                                        <li class="list-group-item">
                                            <strong>{{ __('translations.Status') }}: </strong>
                                            <span
                                                class="badge badge-{{ $badgeClass }}">{{ ucfirst($uHistory->status) }}</span>
                                        </li>
                                    </ul>
                                @endforeach
                            @endif
                            {{-- <nav aria-label="Page navigation example">
                            <ul class="pagination float-end">
                                <!-- Previous Page Link -->
                                @if ($appointmentUserHistory->onFirstPage())
                                <li class="page-item disabled"><span class="page-link">Previous</span></li>
                                @else
                                <li class="page-item"><a class="page-link"
                                        href="{{ $appointmentUserHistory->previousPageUrl() }}">Previous</a></li>
                                @endif

                                <!-- Pagination Elements -->
                                @foreach ($appointmentUserHistory->getUrlRange(1, $appointmentUserHistory->lastPage()) as $page => $url)
                                <li
                                    class="page-item {{ $page == $appointmentUserHistory->currentPage() ? 'active' : '' }}">
                                    <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                </li>
                                @endforeach

                                <!-- Next Page Link -->
                                @if ($appointmentUserHistory->hasMorePages())
                                <li class="page-item"><a class="page-link"
                                        href="{{ $appointmentUserHistory->nextPageUrl() }}">Next</a></li>
                                @else
                                <li class="page-item disabled"><span class="page-link">Next</span></li>
                                @endif
                            </ul>
                        </nav> --}}
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="row">
                        <div class="col-md-12 mt-4">
                            <div class="d-flex">
                                <!-- <button class="btn btn-warning me-2" data-bs-toggle="modal"
                                                                        data-bs-target="#rescheduleModal">Reschedule
                                                                    </button>
                                                                    <button class="btn btn-danger me-2" data-bs-toggle="modal"
                                                                        data-bs-target="#cancelModal">Cancel Appointment
                                                                    </button> -->
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#notifyModal">
                                    {{ __('translations.Send Notification') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Reschedule Modal -->
    <div class="modal fade" id="rescheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="cancelModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cancelModalLabel">{{ __('translations.Reschedule Appointment') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" for="">{{ __('translations.Select Date') }}</label>
                        <input class="form-control" type="date" value="date">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="">{{ __('translations.Select Time') }}</label>
                        <input class="form-control" type="time" value="time">
                    </div>
                </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.Reschedule') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!--Cancel Modal -->
    <div class="modal fade" id="cancelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="cancelModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cancelModalLabel">{{ __('translations.Cancel Appointment') }}</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 cancel this appointment?') }}
                </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-danger">{{ __('translations.Confirm Cancellation') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Notification Modal -->
    <div class="modal fade" id="notifyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="notifyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notifyModalLabel">{{ __('translations.Send Notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelAllAppointments">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="user_id" id="user_id" value="{{ $booking->user_id }}">
                        <input type="hidden" name="booking_id" id="booking_id" value="{{ $booking->id }}">
                        <input type="hidden" name="service_provider_id" id="service_provider_id"
                            value="{{ $booking->service_provider_id }}">
                        <!-- <div class="mb-3">
                                                            <label for="notifyType" class="form-label">Select Type</label>
                                                            <select class="form-select" id="notifyType">
                                                                <option value="1">User</option>
                                                                <option value="2">Doctor</option>
                                                            </select>
                                                        </div> -->
                        <div class="mb-3">
                            <label for="notifyMessage" class="form-label">{{ __('translations.Message') }}</label>
                            <textarea class="form-control" name="notification_message" id="notifyMessage" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('translations.Send Notification') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')

    <script>
        // Cancel
        function cancelAppointments(id) {
            $('#doctorId').val(id);
        }


        $("#cancelAllAppointments").on('submit', function(e) {
            e.preventDefault();
            const btn = $("#submitCancelForm");
            const modal = $('#cancelModal');
            let formData = new FormData($("#cancelAllAppointments")[0]);
            $.ajax({
                type: "POST",
                url: "{{ route('doctorpanel.sendNotificationToPatient') }}",
                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('Yes, Cancel');
                        modal.modal('hide');
                        notyf.success({
                            message: res.message,
                            duration: 3000
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);

                    } else {
                        btn.prop('disabled', false);
                        btn.html('Yes, Cancel');
                        modal.modal('hide');
                        notyf.error({
                            message: res.message,
                            duration: 3000
                        });
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false);
                    btn.html('Yes, Cancel');
                }
            });
        });
    </script>
@endsection