@extends('admin.layout.index')
@section('title', 'Admin Appointments | Waiting Room')
@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.Appointments') }}</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.Appointment Details') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title text-black">{{ __('translations.Appointment Details') }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Appointment Info -->
                            <h5 class="mb-3">{{ __('translations.Appointment Info') }}</h5>
                            <div class="col-lg-4">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="date-box">
                                            <label for="" class="form-label">{{ __('translations.Date') }}</label>
                                            <input type="text" class="form-control" value="9 July, 2024" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="time-box">
                                            <label for="" class="form-label">{{ __('translations.Time Slot') }}</label>
                                            <input type="text" class="form-control" value="10:30 AM - 11:00 AM"
                                                readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="fee-box">
                                            <label for="" class="form-label">{{ __('translations.Fees') }}</label>
                                            <input type="text" class="form-control" value="$200" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="queue-box">
                                            <label for="" class="form-label">{{ __('translations.Queue No') }}</label>
                                            <input type="text" class="form-control" value="3" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="queue-box">
                                            <label for="" class="form-label">{{ __('translations.Status') }}:</label>
                                            <input type="text" class="form-control" value="Completed" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Doctor Info -->
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('translations.Doctor Info') }}</h5>
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Doctor Name') }}: </strong> Dr. Cedric
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Location') }}: </strong> {{ __('translations.Tutorials') }}1901 Thornridge Cir. Shiloh, Hawaii 81063
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Specializations') }}: </strong> {{ __('translations.Neurologist') }}
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Email') }}: </strong> cedric@example.com
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Phone') }}: </strong> +1 234 567 890
                                    </li>
                                </ul>
                            </div>

                            <!-- Patient Info -->
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('translations.Patient Info') }}</h5>
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Patient Name') }}: </strong> John Doe
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Email') }}: </strong> john.doe@example.com
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Location') }}: </strong> {{ __('translations.1401 Thornridge Cir. Shiloh, Hawaii 81095') }}
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Phone') }}: </strong> +1 987 654 321
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('translations.Category') }}: </strong> {{ __('translations.Neurologist') }}
                                    </li>
                                </ul>
                            </div>

                        </div>

                        <div class="row mt-4">
                            <!-- Patient's Appointment History -->
                            <div class="col-md-12">
                                <h5 class="mb-4">{{ __('translations.Patients History') }}</h5>
                                <table id="scroll-horizontal" class="table nowrap align-middle" style="width:100%">
                                    <thead class="table-light">
                                        <tr>
                                            <th>{{ __('translations.Date') }}</th>
                                            <th>{{ __('translations.Doctor') }}</th>
                                            <th>{{ __('translations.Status') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>6 July, 2024</td>
                                            <td>Dr. Cedric</td>
                                            <td><span class="badge bg-success">{{ __('translations.Completed') }}</span></td>
                                        </tr>
                                        <tr>
                                            <td>5 July, 2024</td>
                                            <td>Dr. Cedric</td>
                                            <td><span class="badge bg-danger">{{ __('translations.Cancelled') }}</span></td>
                                        </tr>
                                        <!-- Add more rows as necessary -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Action Buttons -->
                            <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">{{ __('translations.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">Send Notification</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 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">Message</label>--}}
                            {{-- <textarea class="form-control" id="notifyMessage" rows="4"></textarea>--}}
                            {{-- </div>--}}
                        {{-- </div>--}}
                    {{-- <div class="modal-footer">--}}
                        {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>--}}
                        {{-- <button type="button" class="btn btn-primary">Send Notification</button>--}}
                        {{-- </div>--}}
                    {{-- </div>--}}
                {{-- </div>--}}
            {{-- </div>--}}

    </div>
</div>
@endsection

@section('custom-script')
<script>
</script>
@endsection