@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-9">
        <h1 class="mb-3">{{ __('Module details') }} <span><a href="{{ route('module_edit', $module->id) }}" class="btn btn-secondary icon-edit"><i></i>{{ __('Edit') }}</a></span></h1>
    </div>
</div>
<div class="row">
    <div class="col-md-9">
        <div class="box-details-wrapper h-100">
            <div class="box-details">
                <p>
                    <span>Name</span>
                    {{ $module->name }}
                </p>
                <p>
                    <span>Description</span>
                    {{ $module->description ? $module->description : '-' }}
                </p>
                <p>
                    <span>Georgia Standards of Excellence</span>
                    {{ $module->short ? $module->short : '-' }}
                </p>
                <p>
                    <span>Funding Partner</span>
                    {{ $module->partner ? $module->partner : '-' }}
                </p>
                <p>
                    <span>Topics</span>
                    @foreach (explode(',', $module->get_params('topics', 'name')) as $item)
                    <i>{{ $item }}</i>
                    @endforeach
                </p>
                <p>
                    <span>Subtopics</span>
                    @foreach (explode(',', $module->get_params('subtopics', 'name')) as $item)
                    <i>{{ $item }}</i>
                    @endforeach
                </p>
                <p>
                    <span>Formats</span>
                    @foreach (explode(',', $module->get_params('formats', 'name')) as $item)
                    <i>{{ $item }}</i>
                    @endforeach
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box-details-wrapper h-100">
            <div class="box-details">
                <p>
                    <span>Icon</span>
                    <img style="max-width:100%" class="mb-2" src="{{ env('MEDIA_URL') . $module->icon }}">
                </p>
                <p>
                    <span>Icon large</span>
                    <img style="max-width:100%" class="mb-2" src="{{ env('MEDIA_URL') . $module->icon_large }}">
                </p>
                @if ($module->background)
                <p>
                    <span>Background</span>
                    <img style="max-width:100%" class="mb-2" src="{{ env('MEDIA_URL') . $module->background }}">
                </p>
                @elseif (!$module->background && $module->videos->count() > 1)
                <p class="alert alert-warning">
                    <span>Background</span>
                    For more than 1 video, the background is needed and all the videos need thumb. Edit the module, add the background and the missing thumbs.
                    <a class="d-block mt-2" href="{{ route('module_edit', $module->id) }}">{{ __('Edit module') }}</a>
                </p>
                @endif
                <p>
                    <span>Featured</span>
                    {{ $module->featured > 0 ? 'Yes' : 'No' }}
                </p>
            </div>
        </div>
    </div>
</div>

@if ($module->type === 'videos')

<div class="row mt-4">
    <div class="col">
        <h2 class="mb-3">{{ __('Media details') }} <span><a href="{{ route('module_video_create', $module->id) }}" class="btn btn-secondary icon-edit"><i></i>{{ __('Add video') }}</a></span></h2>
    </div>
</div>

<table class="table table-striped table-responsive-sm">
    <thead>
        <tr>
            <th scope="col">{{ __('Order') }}</th>
            <th scope="col">{{ __('Thumb') }}</th>
            <th scope="col">{{ __('Name') }}</th>
            <th scope="col" class="text-center">{{ __('Mp4') }}</th>
            <th scope="col" class="text-center">{{ __('Hls') }}</th>
            <th scope="col" class="text-center">{{ __('Actions') }}</th>
        </tr>
    </thead>
    <tbody>
        @foreach($module->videos as $video)
        @if (!empty($video->url))
        @php
        $array = explode('/', $video->url);
        $video_name = end($array);
        @endphp
        @endif
        <tr>
            <td scope="row" class="pt-4">
                <select class="order-video form-control" id="{{ $video->id }}">
                    <option></option>
                    @for ($i = 1; $i <= $order_total; $i++) <option value="{{ $i }}" {{ (int) $video->order === $i ? 'selected' : ''}}>{{ $i }}</option> @endfor
                </select>
            </td>
            <td scope="row" class="pt-4">
                <img class="video-thumb" src="{{ !empty($video->image) ? env('MEDIA_URL') . $video->image : env('MEDIA_URL') . $module->icon }}">
            </td>
            <td scope="row" class="pt-4">
                @if (empty($video->hls))
                {{ $video_name }}
                @else
                <a href="{{ url('modules/show/' . $module->id . '/videos/show/' . $video->id) }}">{{ $video_name }}</a><br>
                <small>{{ __('Click link to edit or add hotspots') }}</small>
                @endif
            </td>
            <td scope="row" class="pt-4 text-center">
                <a class="video-icon" target="_blank" href="{{ env('MEDIA_URL') . $video->url }}"><i class="fas fa-video"></i></a>
            </td>
            <td scope="row" class="pt-4 text-center">
                @if (empty($video->hls))
                <i class="fas fa-spin fa-spinner"></i> {{ __('Converting to hls') }}
                <script>
                    setInterval(() => {
                        window.axios.get(APP_URL + '/check-video-hls/{{ $video->id }}').then((response) => {
                            if(response && response.data && response.data.response && response.data.response === "Ok"){
                                window.location.reload();
                            }
                        });
                    }, 3000);
                </script>
                @else
                <a class="video-icon" target="_blank" href="{{ env('MEDIA_URL') . $video->hls }}"><i class="far fa-file-video"></i></a>
                @endif
            </td>
            <td scope="row" class="pt-4 text-center">
                <a href="{{ route('module_video_edit', [$module->id, $video->id]) }}" class="mr-1"><span class="icon icon-edit"><i></i></span></a>
                <a href="{{ route('module_video_delete', [$module->id, $video->id]) }}" class="confirmation"><span class="icon icon-trash"><i></i></span></a>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<div class="row mt-4">
    <div class="col">
        <div class="video-alert alert d-none"></div>
        <input type="hidden" id="save-order-action" value="{{ route('module_video_order', $module->id) }}">
        <button type="button" id="save-order" class="btn btn-secondary">{{ __('Save order') }}</button>
    </div>
</div>

@endif

@endsection