@extends('desktop.layouts.app')

@section('content')
<div id="movieTrailer" class="container-fluid">

    <h5>예고편</h5>
    <hr/>

    <form id="fMovieTrailer" method="get" action="{{ route('movie.trailer.index') }}" autocomplete="on" accept-charset="UTF-8">
        <input type="hidden" name="page" value="{{ $page }}"/>
        <div class="row g-2">
            <div class="col-auto">
                <input type="text" name="keyword" class="form-control" value="{{ $keyword }}" placeholder="" autofocus/>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-dark">검색</button>
            </div>
            <div class="col">
                <select name="sort" class="form-select w-auto ms-auto">
                    <option value="1" @if($sort == 1) selected @endif>전체</option>
                    <option value="2" @if($sort == 2) selected @endif>인기순</option>
                    <option value="3" @if($sort == 3) selected @endif>평점 높은순</option>
                </select>
            </div>
        </div>
    </form>
    <br/>

    @if($total > 0)
        <div class="trailer-list row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xxl-5">
            @foreach($list as $row)
                <div class="col">
                    <img src="{{ $row->thumbURL }}"
                         data-key="{{ $row->videoMeta->key ?? '' }}"
                         data-title="{{ $row->title }}"
                         data-bs-toggle="modal"
                         data-bs-target="#trailerModal"
                         class="img-fluid rounded" alt="{{ $row->title }}"
                         onerror="this.src='https://img.youtube.com/vi/awdawd/maxresdefault.jpg'"
                    />
                    <dl>
                        <dt>
                            <a href="#" onclick="return false;">{{ $row->title }}</a>
                        </dt>
                        <dd>
                            <div class="row">
                                <div class="col">
                                    <var data-rate="{{ $row->vote_average ?? 0 }}"></var>
                                    <sub>{{ $row->vote_average ?? 0 }}</sub>
                                </div>
                                <div class="col-auto text-end">
                                    {{ $row->release_date }}
                                    @if($row->release_date)
                                        <small>개봉</small>
                                    @endif
                                </div>
                            </div>
                        </dd>
                    </dl>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center p-5">
            <h6>자료가 존재하지 않습니다.</h6>
        </div>
    @endif

    @if($total > 0)
    <hr/>
    {{ $paginator->onEachSide(5)->links('component.pagination') }}
    @endif

    <!-- 예고편 표시 -->
    <div class="modal fade" id="trailerModal" tabindex="-1" aria-labelledby="trailerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h4 class="modal-title fs-5" id="trailerModalLabel">&nbsp;</h4>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="player"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/desktop/movie/trailer.css') }}"/>
@endpush

@push('scripts')
    <script src="{{ asset('js/movie/index.js') }}" defer></script>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            Youtube.init();
        });
    </script>
@endpush
