@extends('backend.admin.layouts.master')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
        <div class="toolbar" id="kt_toolbar">
            <!--begin::Container-->
            <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                <!--begin::Page title-->
                <div class="d-flex align-items-center me-3">
                    <!--begin::Title-->
                    <h3 class="d-flex align-items-center text-dark  my-1 fs-3">{{$heading}}</h3>
                    <!--end::Title-->
                    <!--begin::Separator-->
                    <span class="h-20px border-gray-200 border-start mx-4"></span>
                    <!--end::Separator-->
                    <ul class="breadcrumb breadcrumb-separatorless  fs-7 my-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="/admin" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-200 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">{{$heading}}</li>
                        <!--end::Item-->
                    </ul>
                </div>
                <!--end::Page title-->
                <!--begin::Actions-->
                <div class="d-flex align-items-center py-1">
                    <!--begin::Wrapper-->
                    <div class="me-4">
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Actions-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container">
                @include('layouts.message')

                <div>
                    <div class="card mb-5 mb-xl-8">
                        <!--begin::Header-->
                        <div class="card-header border-0 pt-2">
                            <div class="card-title">
                                <h2>  {{$heading}}</h2>
                            </div>

                            <div class="card-toolbar" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="" >
                                <a href="/admin/videos/video-categories" class="btn btn-sm btn-danger btn-active-danger me-2" >
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->

                                    <!--end::Svg Icon-->Back</a>
                                <a href="/admin/videos/{{$parent_id}}/create" class="btn btn-sm btn-primary btn-active-primary" >
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->

                                    <!--end::Svg Icon-->Add New</a>
                            </div>
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        <div class="card-body py-3">
                            <!--begin::Table container-->
                            <div class="table-responsive">
                                <!--begin::Table-->
                                <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                                    <!--begin::Table head-->
                                    <thead>
                                    <tr class="fw-semibold text-muted">
                                        <th class="w-25px">
                                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="1" data-kt-check="true" data-kt-check-target=".widget-9-check">
                                            </div>
                                        </th>
                                        <th class="text-center w-100px">Videos</th>
                                        <th>Name</th>
                                        <th class="text-center w-100px">Status</th>
                                        <th class="text-center w-100px">Featured</th>
                                        <th class="text-center">Action</th>

                                    </tr>
                                    </thead>
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody>
                                    @foreach($records as $key=>$record)

                                        <tr>

                                            <td>
                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                    <input class="form-check-input widget-9-check" type="checkbox" value="1">
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                @if(isset($record->image))
                                                    <img src="/{{get_image($record->image)}}" class="w-100">
                                                @elseif($record->type=='internal')
                                                    <a class="mt-1 btn btn-info btn-sm" data-fslightbox="lightbox-video-tutorials" href="/{{get_image($record->video)}}"><i class="fa fa-eye"></i> View Video</a>
                                                    {{--<a class="mt-1 btn btn-info btn-sm" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#view_video_{{$record->id}}"><i class="fa fa-eye"></i> View Video</a>--}}
                                                @else
                                                    <a class="mt-1 btn btn-info btn-sm" data-fslightbox="lightbox-video-tutorials" href="https://www.youtube.com/embed/{{$record->code}}"><i class="fa fa-eye"></i> View Video</a>
                                                @endif
                                            </td>


                                            <td>{{$record->name}}</td>

                                            <td class="text-left">
                                                <form action="/admin/videos/{{$record->video_category_id}}/video/{{$record->id}}/status" method="post">
                                                    {{csrf_field()}}
                                                    <div class="form-check form-check-solid form-switch fv-row">
                                                        <input class="form-check-input" onchange="javascript:this.form.submit();" type="checkbox" id="status_{{$record->id}}" value="1" @if($record->status) checked @endif name="status" />
                                                        @if ($record->status == 1)
                                                            <label class="form-check-label" for="status_{{$record->id}}"></label>
                                                        @else
                                                            <label class="form-check-label" for="status_{{$record->id}}"></label>
                                                        @endif
                                                    </div>
                                                </form>
                                            </td>
                                            <td class="text-left">
                                                <form action="/admin/videos/{{$record->video_category_id}}/video/{{$record->id}}/featured" method="post">
                                                    {{csrf_field()}}
                                                    <div class="form-check form-check-solid form-switch fv-row">
                                                        <input class="form-check-input" onchange="javascript:this.form.submit();" type="checkbox" id="featured_{{$record->id}}" value="1" @if($record->featured) checked @endif name="featured" />
                                                        @if ($record->featured)
                                                            <label class="form-check-label" for="featured_{{$record->id}}"></label>
                                                        @else
                                                            <label class="form-check-label" for="featured_{{$record->id}}"></label>
                                                        @endif
                                                    </div>
                                                </form>
                                            </td>
                                            <td class="text-center">


                                                {{--<button class="btn btn-primary btn-sm" data-bs-target="#editRecord" data-bs-toggle="modal" wire:click="edit({{$record->id}})"><i class="fa fa-edit"></i></button>--}}
                                                <a href="/admin/videos/{{$record->video_category_id}}/video/{{$record->id}}/edit" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1" >
                                                    <!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
                                                    <span class="svg-icon svg-icon-3" >
                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                                                <path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="black"></path>
                                                                                <path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="black"></path>
                                                                            </svg>
                                                                        </span>
                                                    <!--end::Svg Icon-->
                                                </a>
                                                <a onclick="return confirm('Are you sure to delete this record?')" href="/admin/videos/{{$record->video_category_id}}/video/{{$record->id}}/delete" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm">
                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
                                                    <span class="svg-icon svg-icon-2x svg-icon-danger">
																		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
																			<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="black"></path>
																			<path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="black"></path>
																			<path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="black"></path>
																		</svg>
																	</span>
                                                    <!--end::Svg Icon-->
                                                </a>

                                            </td>


                                        </tr>
                                    @endforeach
                                    {{--@endforeach--}}
                                    </tbody>
                                    <!--end::Table body-->
                                </table>
                                <!--end::Table-->
                            </div>
                            <!--end::Table container-->
                        </div>

                        <!--begin::Body-->
                    </div>
                </div>


            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
@endsection
@section('scripts')
    <script src="/assets/plugins/custom/fslightbox/fslightbox.bundle.js"></script>
@endsection