@extends('layouts.master')
@section('title')
    @lang('translation.users')
@endsection

@section('css')
    <style>
        .video-container {
            position: relative;
            display: inline-block;
        }
        .video-container iframe {
            display: block;
        }
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0); /* Transparent */
            cursor: pointer;
        }
    </style>
    <!--Datatable CSS-->
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css"/>
    <!--Datatable Responsive CSS -->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet"
          type="text/css"/>
@endsection

@section('content')

    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.users')
        @endslot
        @slot('title')
            @lang('translation.list')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Datatable Start -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0" style="width:50%;float:left">Video List</h1>
                    <!-- Add Button -->
                    @can('Video Management Add')
                        <a href="{{ url('video/add') }}" class="btn btn-primary btn-sm" style="float:right;">Add
                            Video</a>
                    @endcan
                </div>
                <div class="card-body">
                    <div class="container mt-4">
                        @foreach($videos as $index => $video)
                            @if($index % 3 == 0)
                                <div class="row">
                                    @endif
                                    <div class="col-md-4 mb-4">
                                        <div class="video-wrapper">
                                            <div style="position: relative; display: inline-block;">
                                                {!! $video->embedded_link !!}
                                                <a href="{{ url('/video/show/'.encrypt($video->id)) }}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); cursor: pointer;"></a>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <h5 class="video-title mb-0" style="width: 70%;">{{ Str::limit($video->title, 20) }}
                                                </h5>

                                                <div class="dropdown" style="width: 30%;">
                                                    <button class="btn fs-5 text-dark" type="button" id="dropdownMenuButton{{$index}}" data-bs-toggle="dropdown" aria-expanded="false">
                                                        &#x22EE;
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{$index}}">
{{--                                                        <li><a href="{{ url('/video/show/'.encrypt($video->id)) }}"><i class="ri-eye-fill align-bottom me-2 text-muted"></i>View</a></li>--}}
                                                        <li><a href="{{ url('/video/show/'.encrypt($video->id)) }}" class="dropdown-item edit-item-btn"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>
                                                        @can('Video Management Edit')
                                                        <li><a href="{{ url('/video/edit/'.encrypt($video->id)) }}" class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
                                                        @endcan
                                                        @can('Video Management Delete')
                                                            <li> <a type="button" class="dropdown-item remove-item-btn" onclick="ShowDeleteModal('{{encrypt($video->id)}}')"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
                                                        @endcan
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    @if($index % 3 == 2)
                                </div> <!-- Close row after every third video -->
                            @endif
                        @endforeach
                        @if(count($videos) % 3 != 0)
                    </div> <!-- Close the last row if it's not closed yet -->
                    @endif
                </div>

            </div>
            <!-- Delete Modal -->
            <div id="DeleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body text-center p-5">
                            <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop"
                                       colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                            </lord-icon>
                            <div class="mt-4">
                                <h4 class="mb-3">Confirm your action!</h4>
                                <p class="text-muted mb-4"><strong>Are you sure you want to delete this user?</strong>
                                </p>
                                <div class="hstack gap-2 justify-content-center">
                                    <button type="button" class="btn btn-light"
                                            data-bs-dismiss="modal">Close
                                    </button>
                                    <a id="DeleteModalHref" href="{{ url('https://google.com') }}"
                                       class="btn btn-danger">Confirm</a>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
        </div>
    </div>
    </div>
    </div>
@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Data Table JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/datatables.init.js') }}"></script>
    <!-- Modal JS -->
    <script src="{{ URL::asset('assets/js/pages/modal.init.js') }}"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <!-- Custom JS -->
    <script>
        function ShowDeleteModal(id) {
            $('#DeleteModalHref').attr('href', '/video/delete/' + id);
            $('#DeleteModal').modal('show');
        }
    </script>
    <script>
        var iframes = document.getElementsByTagName('iframe');

        for (var i = 0; i < iframes.length; i++) {
            iframes[i].removeAttribute('width');
            iframes[i].removeAttribute('height');
        }
    </script>
@endsection