@extends('layout.app')
@section('title', ' Waiting Room | Tutorials')

@section('custom-css')
    <style>
    </style>
@endsection

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

    <div class="row">
        <div class="col-xxl-4 col-lg-6">
            <div class="card overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <img src="{{asset('assets/images/video-thumbnail.jpg')}}" alt=""
                         class="object-fit-cover" height="255px" data-bs-toggle="modal"
                         id="create-btn" data-bs-target="#modalVideo">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a href="#" class="text-reset">{{ __('translations.Training') }}</a>
                    </h5>
                    <p class="text-muted mb-2">{{ __('translations.To ensure smooth adoption and effective use of the Clinic Management
                        System, we provide comprehensive training for clinic staff, administrators, and doctors. Our
                        training program is designed to enhance user proficiency, streamline workflows, and maximize the
                        system’s capabilities for efficient clinic management.') }}</p>
                </div>
            </div>
        </div>
        <!--end col-->
        <div class="col-xxl-4 col-lg-6">
            <div class="card overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <img src="{{asset('assets/images/auth-one-bg.jpg')}}" alt=""
                         class="object-fit-cover" height="255px" data-bs-toggle="modal"
                         id="create-btn" data-bs-target="#modalVideo">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a href="#" class="text-reset">{{ __('translations.Overview') }}</a>
                    </h5>
                    <p class="text-muted mb-2">{{ __('translations.The Clinic Management System provides a centralized platform for managing
                        clinic operations, streamlining appointment scheduling, and improving patient care. It enables
                        clinics to efficiently handle patient registrations, doctor assignments, and appointment
                        tracking while ensuring smooth communication between staff and patients.') }}</p>
                </div>
            </div>
        </div>
        <!--end col-->
        <div class="col-xxl-4 col-lg-6">
            <div class="card overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <img src="{{asset('assets/images/video-thumbnail.jpg')}}" alt=""
                         class="object-fit-cover" height="255px" data-bs-toggle="modal"
                         id="create-btn" data-bs-target="#modalVideo">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a href="#" class="text-reset">{{ __('translations.Training') }}</a>
                    </h5>
                    <p class="text-muted mb-2">{{ __('translations.To ensure smooth adoption and effective use of the Clinic Management
                        System, we provide comprehensive training for clinic staff, administrators, and doctors. Our
                        training program is designed to enhance user proficiency, streamline workflows, and maximize the
                        system’s capabilities for efficient clinic management.') }}</p>
                </div>
            </div>
        </div>
        <!--end col-->
    </div>
    <!--end row-->

    <div class="row">
        <div class="col-xxl-4 col-lg-6">
            <div class="card overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <img src="{{asset('assets/images/auth-one-bg.jpg')}}" alt=""
                         class="object-fit-cover" height="255px" data-bs-toggle="modal"
                         id="create-btn" data-bs-target="#modalVideo">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a href="#" class="text-reset">{{ __('translations.Overview') }}</a>
                    </h5>
                    <p class="text-muted mb-2">{{ __('translations.The Clinic Management System provides a centralized platform for managing
                        clinic operations, streamlining appointment scheduling, and improving patient care. It enables
                        clinics to efficiently handle patient registrations, doctor assignments, and appointment
                        tracking while ensuring smooth communication between staff and patients.') }}</p>
                </div>
            </div>
        </div>
        <!--end col-->
        <div class="col-xxl-4 col-lg-6">
            <div class="card overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <img src="{{asset('assets/images/video-thumbnail.jpg')}}" alt=""
                         class="object-fit-cover" height="255px" data-bs-toggle="modal"
                         id="create-btn" data-bs-target="#modalVideo">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a href="#" class="text-reset">{{ __('translations.Training') }}</a>
                    </h5>
                    <p class="text-muted mb-2">{{ __('translations.To ensure smooth adoption and effective use of the Clinic Management
                        System, we provide comprehensive training for clinic staff, administrators, and doctors. Our
                        training program is designed to enhance user proficiency, streamline workflows, and maximize the
                        system’s capabilities for efficient clinic management.') }}</p>
                </div>
            </div>
        </div>
        <!--end col-->
        <div class="col-xxl-4 col-lg-6">
            <div class="card overflow-hidden">
                <div class="position-relative overflow-hidden">
                    <img src="{{asset('assets/images/auth-one-bg.jpg')}}" alt=""
                         class="object-fit-cover" height="255px" data-bs-toggle="modal"
                         id="create-btn" data-bs-target="#modalVideo">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a href="#" class="text-reset">{{ __('translations.Overview') }}</a>
                    </h5>
                    <p class="text-muted mb-2">{{ __('translations.The Clinic Management System provides a centralized platform for managing
                        clinic operations, streamlining appointment scheduling, and improving patient care. It enables
                        clinics to efficiently handle patient registrations, doctor assignments, and appointment
                        tracking while ensuring smooth communication between staff and patients.') }}</p>
                </div>
            </div>
        </div>
        <!--end col-->
    </div>
    <!--end row-->

    <div class="row g-0 text-center text-sm-start align-items-center mb-4">
        <div class="col-sm-6">
            <div>
                <p class="mb-sm-0 text-muted">{{ __('translations.Showing') }} <span class="fw-semibold">1</span> to <span
                        class="fw-semibold">6</span> of <span class="fw-semibold text-decoration-underline">33</span>
                    {{ __('translations.entries') }}</p>
            </div>
        </div>
        <!-- end col -->
        <div class="col-sm-6">
            <ul class="pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
                <li class="page-item disabled">
                    <a href="#" class="page-link">{{ __('translations.Previous') }}</a>
                </li>
                <li class="page-item active">
                    <a href="#" class="page-link">1</a>
                </li>
                <li class="page-item ">
                    <a href="#" class="page-link">2</a>
                </li>
                <li class="page-item">
                    <a href="#" class="page-link">3</a>
                </li>
                <li class="page-item">
                    <a href="#" class="page-link">4</a>
                </li>
                <li class="page-item">
                    <a href="#" class="page-link">5</a>
                </li>
                <li class="page-item">
                    <a href="#" class="page-link">{{ __('translations.Next') }}</a>
                </li>
            </ul>
        </div><!-- end col -->
    </div>


    <div class="modal fade" id="modalVideo" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header card-header p-3">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('translations.Video Modal') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            id="close-modal"></button>
                </div>
                <form class="tablelist-form" autocomplete="off">
                    <div class="modal-body">
                        <input type="hidden" id="id-field"/>

                        <div class="card">
                            <div class="card-body">
                                <iframe width="100%" height="450"
                                        src="https://www.youtube.com/embed/74DWwSxsVSs?si=SQPg-jY0C6CX-awf"
                                        frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowfullscreen></iframe>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <div class="hstack gap-2 justify-content-end">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                            <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

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