@extends('_backend.app')

@section('content')

    <div id="page-title">
        <h1 class="page-header text-overflow">Videa</h1>

        <div class="searchbox">
            <a href="{{ action('Backend\VideoController@create') }}" class="btn btn-default btn-labeled fa fa-plus"
               style="float: right; margin-right: 25px;">
                Přidat
            </a>
        </div>
    </div>

    <ol class="breadcrumb">
        <li><a href="{{ action('Backend\DashboardController@index') }}">Get Fit Online</a></li>
        <li class="active">Videa</li>
    </ol>

    <div id="page-content">
        <div class="panel panel-bordered">
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>Kód</th>
                            <th>Jméno</th>
                            <th>Náročnost</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($videos as $video)
                            <tr>
                                <td>
                                    {{ $video->code }}
                                </td>
                                <td>
                                    {{ $video->name }}
                                </td>
                                <td>
                                    {{ config('data.exercise.difficulty')[$video->type] }}
                                </td>
                                <td class="text-right">
                                    <div class="btn-group">
                                        <a href="" class="btn btn-default btn-sm vimeo" data-code="{{ $video->code }}">
                                            <i class="fa fa-youtube-play"></i>
                                        </a>

                                        <a href="{{ action('Backend\VideoController@edit', $video) }}" class="btn btn-default btn-sm">
                                            <i class="fa fa-pencil"></i>
                                        </a>

                                        <a href="{{ action('Backend\VideoController@destroy', $video) }}" class="btn btn-danger delete btn-sm">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <script>
            $(function () {
                $(document).on('click', '.vimeo', function (e) {
                    e.preventDefault();

                    var code = $(this).data('code');
                    var video = '<iframe src="https://player.vimeo.com/video/' + code + '?color=00ffb6&title=0&byline=0&portrait=0&autoplay=true" width="868" height="523" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
                    var modal = $('#vimeo-modal');
                    var body = modal.find('.modal-body');

                    body.html(video);
                    modal.modal('show');

                    modal.on('hidden.bs.modal', function () {
                        body.html('');
                    });
                });
            });
        </script>

        <div class="modal fade" id="vimeo-modal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body"></div>
                </div>
            </div>
        </div>
@endsection