@extends('admin.layout.index')
@section('title','Waiting Room | Tutorials')
@section('custom-style')
    <style>

        div.dataTables_wrapper div.dataTables_filter {
            display: none;
        }

    </style>
@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 bg-galaxy-transparent">
                        <h4 class="mb-sm-0">{{ __('translations.Tutorials') }}</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.Tutorials') }}</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card" id="customerList">
                        <div class="card-header border-bottom-dashed">

                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h5 class="fs-16 mt-2">{{ __('translations.Tutorials') }}</h5>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="d-flex gap-1 flex-wrap">
                                        <button type="button" class="btn btn-success add-btn" data-bs-toggle="modal"
                                                id="create-btn" data-bs-target="#addTutorial"><i
                                                class="ri-add-line align-bottom me-1"></i>
                                            {{ __('translations.Add Tutorial') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body border-bottom-dashed border-bottom">
                            <form>
                                <div class="row g-3">
                                    <div class="col-xl-7">
                                        <div class="search-box">
                                            <input type="text" class="form-control search" placeholder="{{ __('translations.Search...') }}">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xl-5">
                                        <div class="row g-3">
                                            <div class="col-sm-9">
                                                <div class="">
                                                    <input type="text" class="form-control" id="datepicker-range"
                                                           data-provider="flatpickr" data-date-format="d M, Y"
                                                           data-range-date="true" placeholder="{{ __('translations.Select date') }}">
                                                </div>
                                            </div>
                                            <!--end col-->

                                            <div class="col-sm-3">
                                                <div>
                                                    <button type="button" class="btn btn-primary w-100"
                                                            onclick="SearchData();"><i
                                                            class="ri-equalizer-fill me-2 align-bottom"></i>
                                                        {{ __('translations.Filters') }}
                                                    </button>
                                                </div>
                                            </div>
                                            <!--end col-->
                                        </div>
                                    </div>
                                </div>
                                <!--end row-->
                            </form>
                        </div>
                        <div class="card-body">
                            <div>
                                <div class="table-responsive table-card mb-1">
                                    <table id="scroll-horizontal"
                                           class="table table-bordered dt-responsive table-striped align-middle"
                                           style="width:100%">
                                        <thead>
                                        <tr>
                                            <th scope="col" style="width: 8px;">
                                                <div class="form-check">
                                                    <input class="form-check-input fs-15" type="checkbox" id="checkAll"
                                                           value="option">
                                                </div>
                                            </th>
                                            <th>{{ __('translations.ID') }}</th>
                                            <th>{{ __('translations.Video') }}</th>
                                            <th>{{ __('translations.Title') }}</th>
                                            <th>{{ __('translations.Description') }}</th>
                                            <th>{{ __('translations.Status') }}</th>
                                            <th>{{ __('translations.Action') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input fs-15" type="checkbox"
                                                           name="checkAll" value="option1">
                                                </div>
                                            </th>
                                            <td><a href="#">1</a></td>
                                            <td>
                                                <img src="{{asset('admin-assets/images/video-thumbnail.jpg')}}"
                                                     alt="Thumbnail" class="img-fluid" height="100" width="100"
                                                     data-bs-toggle="modal"
                                                     id="create-btn" data-bs-target="#modalVideo">
                                            </td>
                                            <td>{{ __('translations.Training') }}</td>
                                            <td>{{ __('translations.Lorem ipsum is a dummy content') }}</td>
                                            <td><span class="badge bg-success">{{ __('translations.Enable') }}</span></td>
                                            <td>
                                                <a href="#editUser" data-bs-toggle="modal"
                                                   class="btn btn-primary shadow btn-xs sharp">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="#deleteModalLabel" data-bs-toggle="modal"
                                                   class="btn btn-danger shadow btn-xs sharp">
                                                    <i class="bx bx-trash-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input fs-15" type="checkbox"
                                                           name="checkAll" value="option1">
                                                </div>
                                            </th>
                                            <td><a href="#">2</a></td>
                                            <td>
                                                <img src="{{asset('admin-assets/images/video-thumbnail.jpg')}}"
                                                     alt="Thumbnail" class="img-fluid" height="100" width="100"
                                                     data-bs-toggle="modal"
                                                     id="create-btn" data-bs-target="#modalVideo">
                                            </td>
                                            <td>{{ __('translations.Overview') }}</td>
                                            <td>{{ __('translations.Lorem ipsum is a dummy content') }}</td>
                                            <td><span class="badge bg-danger">{{ __('translations.Disable') }}</span></td>
                                            <td>
                                                <a href="#editUser" data-bs-toggle="modal"
                                                   class="btn btn-primary shadow btn-xs sharp">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="#deleteModalLabel" data-bs-toggle="modal"
                                                   class="btn btn-danger shadow btn-xs sharp">
                                                    <i class="bx bx-trash-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                            <!--end modal -->


                            <!--end modal -->
                        </div>
                    </div>

                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </div>
        <!-- container-fluid -->
    </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>

    <div class="modal fade" id="addTutorial" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header card-header p-3">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('translations.Add Tutorial') }}</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="mb-3">
                            <label for="video-field" class="form-label">{{ __('translations.Video') }}</label>
                            <input type="file" id="video-field" class="form-control" required/>
                        </div>

                        <div class="mb-3">
                            <label for="title-field" class="form-label">{{ __('translations.Title') }}</label>
                            <input type="text" id="title-field" class="form-control" value="" required/>
                        </div>

                        <div class="mb-3">
                            <label for="description-field" class="form-label">{{ __('translations.Description') }}</label>
                            <textarea class="form-control" name="" id="" cols="30" rows="6"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="status" class="form-label">{{ __('translations.Status') }}</label>
                            <select class="form-select">
                                <option selected="">{{ __('translations.Select Status') }}</option>
                                <option value="1">{{ __('translations.Enable') }}</option>
                                <option value="2">{{ __('translations.Disable') }}</option>
                            </select>
                        </div>


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


    <div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header card-header p-3">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('translations.Edit User') }}</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="mb-3">
                            <label for="video-field" class="form-label">{{ __('translations.Video') }}</label>
                            <input type="file" id="video-field" class="form-control" required/>
                        </div>

                        <div class="mb-3">
                            <label for="title-field" class="form-label">{{ __('translations.Title') }}</label>
                            <input type="text" id="title-field" class="form-control" value="" required/>
                        </div>

                        <div class="mb-3">
                            <label for="description-field" class="form-label">{{ __('translations.Description') }}</label>
                            <textarea class="form-control" name="" id="" cols="30" rows="6"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="status" class="form-label">{{ __('translations.Status') }}</label>
                            <select class="form-select">
                                <option selected="">{{ __('translations.Select Status') }}</option>
                                <option value="1">{{ __('translations.Enable') }}</option>
                                <option value="2">{{ __('translations.Disable') }}</option>
                            </select>
                        </div>


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

    <!-- Delete Category Modal -->
    <div class="modal fade" id="deleteModalLabel" tabindex="-1" aria-labelledby="deleteModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">{{ __('translations.Delete Tutorial') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="deleteUser">
                    @csrf
                    <div class="modal-body">
                        {{ __('translations.Are you sure you want to delete this Tutorial? This action cannot be undone.') }}
                    </div>
                    <input type="hidden" name="id" id="deleteUserId">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                        <button type="submit" class="btn btn-danger">{{ __('translations.Delete') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

    </script>
@endsection