@extends('layouts.app')

@section('scripts')
<script src="{{ mix('js/hotspots.js') }}"></script>
<script type="text/javascript">
    let BULLET_IMG_URL = "{{ !empty($icon) ? env('MEDIA_URL') . $icon->url : url('images/hotspot-generic.png') }}";
    let VIDEO_STEREO = {{ $video->type }};
</script>
@endsection

@section('content')

<div class="row mb-2">
    <div class="col text-left">
        <a href="{{ url('modules/show/' . $module->id) }}" class="go-back"><small><- Back</small></a>
    </div>
</div>
<div class="row">
    <div class="col-lg-9">
        <h1 class="mb-3"><b>{{ __('Module') }}:</b> {{ $module->name }}</h1>
        <h2 class="mb-3"><small>{{ __('Video details') }}</small></h2>
    </div>
</div>
<div class="row">
    <div class="col">
        <div class="video-wrapper" id="video-wrapper">
            <div class="video-inner" id="position-container"></div>
            <video id="my-video" class="video-js" preload="auto" data-setup='{"fluid": true}' crossOrigin="anonymous" playsInline webkit-playsinline>
                {{-- <source src="https://s3.amazonaws.com/visyon.test.media/gpb/00_Video+Intro.mp4"> --}}
                <source src="{{ env('MEDIA_URL') . $video->hls }}" type="application/x-mpegURL">

                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p>
            </video>
        </div>
        <div class="row mt-2">
            <div class="col">
                <div id="control-bar"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <button type="button" data-module="{{ $module->id }}" data-video="{{ $video->id }}" class="d-none btn btn-modify-hotspots btn-action mr-2"><i class="fas fa-play"></i></button>
                <button type="button" data-module="{{ $module->id }}" data-video="{{ $video->id }}" class="d-none btn btn-save-hotspots btn-action mr-2">{{ __('Save') }}</button>
            </div>
            <div class="col-lg-8">
                <p class="hotspot-video-text d-none">{{ __('Drag and move the hotspots to position them in the video') }}</p>
            </div>
        </div>
    </div>
</div>
<div class="row mt-5">
    <div class="col-lg-9">
        <div class="row">
            <div class="col">
                <h2 class="mb-3"><small>{{ __('List of hotspots') }}</small></h2>
            </div>
            <div class="col text-right">
                <button type="button" data-toggle="modal" id="hotspot-btn-modal" data-target="#hotspot-modal" class="btn btn-secondary d-none">{{ __('Add hotspot') }}</button>
            </div>
        </div>
        <table class="table table-striped table-responsive-sm">
            <thead>
                <tr>
                    <th scope="col">{{ __('Num.') }}</th>
                    <th scope="col">{{ __('Title') }}</th>
                    <th scope="col">{{ __('Type') }}</th>
                    <th scope="col">{{ __('Full length') }}</th>
                    <th scope="col">{{ __('Start time') }}</th>
                    <th scope="col">{{ __('Duration') }}</th>
                    <th scope="col">{{ __('Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $x = 1;
                @endphp
                @foreach($video->hotspots as $hotspot)
                <tr>
                    <td scope="row" class="pt-4 text-center">{{ $x }}</td>
                    <td scope="row" class="pt-4">{{ $hotspot->name }}</td>
                    <td scope="row" class="pt-4">{{ $hotspot->type }}</td>
                    <td scope="row" class="pt-4">{{ $hotspot->full_time ? 'Yes' : 'No' }}</td>
                    <td scope="row" class="pt-4">{{ $hotspot->position ? $hotspot->position : '-' }}</td>
                    <td scope="row" class="pt-4">{{ $hotspot->duration ? $hotspot->duration : '-' }}</td>
                    <td scope="row" class="pt-4 hotspot-actions">
                        <button data-id="{{ $hotspot->id }}" type="button" class="btn-edit-hotspot mr-1"><span class="icon icon-edit"><i></i></span></button>
                        <a href="{{ route('module_hotspot_delete', [ $module->id, $video->id, $hotspot->id ]) }}" class="confirmation"><span class="icon icon-trash"><i></i></span></a>
                    </td>
                </tr>
                @php
                    $x++;
                @endphp
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="col-lg-3">
        <h2 class="mb-3"><small>{{ __('Custom hotspot icon') }}</small></h2>
        <form method="POST" id="update-hotspot-form" action="{{ route('module_hotspot_icon', [$module->id, $video->id]) }}" enctype="multipart/form-data" novalidate="novalidate">
            @csrf

            <input type="hidden" id="module_id" value="{{ $module->id }}">
            <input type="hidden" id="video_id" value="{{ $video->id }}">

            <div class="form-group">
                <div class="hotspot-preview-wrapper">
                    <img id="hotspot-preview" style="max-width:100%" class="mb-2" src="{{ !empty($icon) ? env('MEDIA_URL') . $icon->url : url('images/hotspot-generic.png') }}" alt="">
                </div>
                <div class="custom-file" id="error-hotspot">
                    <label class="upload-label mt-1" for="hotspot">
                        {{ __('Select') }} <i class="fas fa-upload"></i>
                    </label>
                    <input type="file" class="form-control-file image-file-input image-loading mt-3" data-target="#hotspot-preview" id="hotspot" name="hotspot" accept="image/x-png,image/jpeg" data-max-size="2097152" hidden required>
                    <div class="help-block d-block"><b>{{ __('Format:') }}</b> {{ __('png, jpg, jpeg') }}<br> <b>{{ __('Dimensions:') }}</b> 96x96</div>
                    @if ($errors->has('hotspot'))
                    <span class="invalid-feedback">
                        <small>{{ $errors->first('hotspot') }}</small>
                    </span>
                    @else
                    <div class="invalid-feedback" id="hotspot-warning">
                        <small>{{ __('The hotspot image is required.') }}</small>
                    </div>
                    @endif
                </div>
            </div>
            <button type="submit" class="btn btn-action btn-upload-hotspot">
                {{ __('Save') }}
            </button>
        </form>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="hotspot-modal" tabindex="-1" role="dialog" aria-labelledby="hotspot-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" id="add-hotspot-form" enctype="multipart/form-data" action="{{ route('module_hotspot_store', [$module->id, $video->id]) }}" novalidate="novalidate">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="hotspot-modal-label">Add new hotspot</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name" class="form-label">{{ __('Name') }}*</label>
                        <input type="text" name="name" class="form-control" id="name" required>
                        <div class="invalid-feedback">{{ __('The name field is required.') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="type" class="form-label">{{ __('Type') }}*</label>
                        <select class="form-control hotspot-type-select" id="type" name="type" required>
                            <option></option>
                            <option value="Text">{{ __('Text') }}</option>
                            <option value="Audio">{{ __('Audio') }}</option>
                            <option value="Video">{{ __('Video') }}</option>
                            <option value="Image">{{ __('Image') }}</option>
                        </select>
                        <div class="invalid-feedback">{{ __('The type field is required.') }}</div>
                    </div>
                    <div class="form-group text-type d-none">
                        <label for="content" class="form-label">{{ __('Text') }}*</label>
                        <input type="text" name="text" class="form-control">
                        <div class="invalid-feedback">{{ __('The text field is required.') }}</div>
                    </div>
                    <div class="form-group image-group hotspot-type d-none">
                        <label for="content" class="form-label">{{ __('Content') }}*</label>
                        <div class="custom-file">
                            <span id="content-url" class="d-block my-2"></span>
                            <label class="upload-label mt-1" for="content">
                                Select <i class="fas fa-upload"></i>
                            </label>
                            <input type="file" name="content" id="content" class="form-control-file videofile mt-2" hidden>
                            <div class="help-block d-block"></div>
                        </div>
                        <div class="invalid-feedback">{{ __('The content field is required.') }}</div>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="fulltime" name="fulltime">
                        <label class="form-check-label" for="fulltime">{{ __('Full length hotspot') }}</label>
                    </div>
                    <div class="form-row mt-3 no-full-time">
                        <div class="form-group col-lg-6">
                            <div class="position-wrapper">
                                <label for="position" class="form-label">{{ __('Initial hotspot in timeline') }}</label>
                                <div class="position-wrap">
                                    <input type="text" autocomplete="false" name="position" class="form-control" id="position" placeholder="00:00:00" data-mask="00:00:00">
                                </div>
                                <div class="invalid-feedback">{{ __('The start time field is required.') }}</div>
                            </div>
                        </div>
                        <div class="form-group col-lg-6">
                            <div class="duration-wrapper">
                                <label for="duration" class="form-label">{{ __('Total hotspot duration') }}</label>
                                <div class="duration-wrap">
                                    <input type="text" autocomplete="false" name="duration" class="form-control" id="duration" placeholder="00:00:00" data-mask="00:00:00">
                                </div>
                                <div class="invalid-feedback">{{ __('The duration field is required.') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-action btn-action-modal">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    let hotspots = '