@extends('layouts.app-admin')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid pt-0" id="kt_content">
        <div class="d-flex flex-column-fluid">
            <div class="container">
                <div class="card shadow mb-4">
                    <div class="card-header p-2">
                        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                            <div class="col-6 d-flex align-items-center flex-wrap mr-2">
                                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                                    Videos
                                </h5>
                            </div>
                            <div class="col-6 d-flex justify-content-end">
                                <a href="{{url()->previous()}}" class="btn btn-primary btn-rounded h-25">
                                    <i class="fas fa-arrow-circle-left fa-sm text-white-50"></i>
                                    {{ __('all.go_back') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body card-body-table">
                        <div class="table-responsive">
                            <table class="table table-bordered table-custom" id="dataTableVideos" width="100%" cellspacing="0">
                                <thead class="thead-custom">
                                    <tr class="tr-custom" align="center">
                                        <th class="th-custom th-table-index">Ubicación</th>
                                        <th class="th-custom th-table-index">Video</th>
                                    </tr>
                                </thead>
                                <tbody class="tbody-custom">
                                    @if($videos->count())
                                                                                @foreach($videos as $video)
                                            <tr class="tr-custom">
                                                <td class="td-custom">
                                                    <span class="text-dark-75 font-weight-bolder d-block font-size-lg">
                                                        @switch($i)
                                                            @case(1)
                                                                Enmarcar
                                                                @break
                                                            @case(2)
                                                                Instrucciones generales
                                                                @break
                                                            @case(3)
                                                                Memoriza: Contraseña
                                                                @break
                                                            @case(4)
                                                                Memoriza: Figura
                                                                @break
                                                            @case(5)
                                                                Rapidez Mental: Instrucciones
                                                                @break
                                                            @case(6)
                                                                Rapidez Mental: Ejercicio
                                                                @break
                                                            @case(7)
                                                                Cálculo Mental: Instrucciones
                                                                @break
                                                            @case(8)
                                                                Cálculo Mental: Ejercicio
                                                                @break
                                                            @case(9)
                                                                Juego de Palabras: Instrucciones
                                                                @break
                                                            @case(10)
                                                                Juego de Palabras: Ejercicio
                                                                @break
                                                            @case(11)
                                                                Memoriza: Contraseña (Ejercicio)
                                                                @break
                                                        @endswitch
                                                    </span>
                                                </td>
                                                <td class="td-custom" style="text-align: center;">
                                                    <div class="d-flex justify-content-center">
                                                        <video class="video-box" src="{{Storage::disk('s3')->url('games/videos/' . $video->video)}}" controls></video>

                                                        <!-- <a href="{{Storage::disk('s3')->url('games/videos/video_254691639719142.mp4')}}" class="btn btn-sm btn-default btn-text-primary btn-hover-primary btn-icon mr-2" title="Ver Video" target="_blank"> -->
                                                        <!-- <a href="{{asset('storage/profiles/' . $video->video)}}" class="btn btn-sm btn-default btn-text-primary btn-hover-primary btn-icon mr-2" title="Ver Video" target="_blank"> -->
                                                            <!-- <span class="svg-icon svg-icon-md svg-icon-primary">
                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                        <rect x="0" y="0" width="24" height="24"/>
                                                                        <rect fill="#000000" x="2" y="6" width="13" height="12" rx="2"/>
                                                                        <path d="M22,8.4142119 L22,15.5857848 C22,16.1380695 21.5522847,16.5857848 21,16.5857848 C20.7347833,16.5857848 20.4804293,16.4804278 20.2928929,16.2928912 L16.7071064,12.7071013 C16.3165823,12.3165768 16.3165826,11.6834118 16.7071071,11.2928877 L20.2928936,7.70710477 C20.683418,7.31658067 21.316583,7.31658098 21.7071071,7.70710546 C21.8946433,7.89464181 22,8.14899558 22,8.4142119 Z" fill="#000000" opacity="0.3"/>
                                                                    </g>
                                                                </svg>
                                                            </span>
                                                        </a> -->
                                                    </div>
                                                </td>
                                            </tr>
                                                                                    @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Delete -->
{{--    <div class="modal fade" id="modalDeleteUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">--}}
{{--        <div class="modal-dialog" role="document">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header"> --}}
{{--                    <h5 class="modal-title" id="exampleModalLabel">Eliminar Usuario</h5>--}}
{{--                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">--}}
{{--                    <span aria-hidden="true">×</span>--}}
{{--                    </button>--}}
{{--                </div>--}}
{{--                <div class="modal-body text-center">--}}
{{--                    Esta seguro que desea eliminar el Usuario <b><span id="user_name"></span></b>?--}}
{{--                </div>--}}
{{--                <div class="modal-footer">--}}
{{--                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>--}}
{{--                    <form method="POST" action="{{route('admin-users-delete')}}">--}}
{{--                    @csrf--}}
{{--                    <input type="hidden" id="user_id" name="user_id">--}}
{{--                    <button class="btn btn-primary">Eliminar</button>--}}
{{--                    </form>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <!-- END | Modal Delete -->
@endsection