@extends('voyager::master')

@section('page_title', "Vidéo envoyée")

@section('page_header')
    <h1 class="page-title">Vidéo envoyée</h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content read container-fluid">
        <div class="row">
            <div class="card bg-gradient-secondary shadow videoCard" style="width: 80vw;">
                <video class="card-img-top videoCard__img" controls muted autoplay loop>
                    <source src="{{$dataTypeContent->getUrl()}}"
                            type="video/{{ $dataTypeContent->getFileExtension() }}">
                </video>
                <div class="card-header">
                    <div class="videoCard__body__mainInfos">
                        <h3 class="card-title text-uppercase">{{\Carbon\Carbon::parse($dataTypeContent->created_at)->formatLocalized('Le %e %B %Y à %Ih%M')}}</h3>
                        <h4 class="card-title">{{$dataTypeContent->getFormatedDuration()}}</h4>
                    </div>
                </div>
                <div class="card-header card-header--buttons">
                    <h2 class="card-title">{{$dataTypeContent->name}}</h2>
                    <div class="videoCard__buttons">
                        @can('edit', $dataTypeContent)
                            <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}"
                               class="btn btn-icon btn-3 btn-primary">
                                <span class="btn-inner--icon"><i class="ni ni-app"></i></span>

                                <span class="btn-inner--text">{{ __('voyager::generic.edit') }}</span>
                            </a>
                        @endcan
                        @can('delete', $dataTypeContent)
                            <a href="javascript:;" title="{{ __('voyager::generic.delete') }}"
                               class="btn btn-icon btn-3 btn-danger delete"
                               data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">

                                <span class="btn-inner--icon"><i class="ni ni-fat-remove"></i></span>

                                <span class="btn-inner--text">{{ __('voyager::generic.delete') }}</span>
                            </a>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-uppercase text-muted mb-0">Diffusée sur</h5>
                    <div class="videoCard__charlis">
                        @forelse($dataTypeContent->charlis as $charli)
                            <div class="videoCard__charlis__charli">@svg('device_type_' . $charli->device_type, 'icon-lg')<span>{{ $charli->name }}</span></div>
                        @empty
                            <p>Aucun appareil !</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>


        <a href="{{ route('voyager.'.$dataType->slug.'.index') }}"
           class="btn btn-icon btn-3 btn-warning btn--marginTop">
            <span class="btn-inner--icon"><i class="ni ni-bullet-list-67"></i></span>
            <span class="btn-inner--text">{{ __('voyager::generic.return_to_list') }}</span>
        </a>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('voyager::generic.delete_question') }}
                        ?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('voyager.'.$dataType->slug.'.index') }}" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="Supprimer">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                            data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('javascript')
    @if ($isModelTranslatable)
        <script>
            $(document).ready(function () {
                $('.side-body').multilingual();
            });
        </script>
        <script src="{{ voyager_asset('js/multilingual.js') }}"></script>
    @endif
    <script>
        var deleteFormAction;
        $('.delete').on('click', function (e) {
            var form = $('#delete_form')[0];

            if (!deleteFormAction) {
                // Save form action initial value
                deleteFormAction = form.action;
            }

            form.action = deleteFormAction.match(/\/[0-9]+$/)
                ? deleteFormAction.replace(/([0-9]+$)/, $(this).data('id'))
                : deleteFormAction + '/' + $(this).data('id');

            $('#delete_modal').modal('show');
        });
    </script>
@stop