@extends('mobile.layouts.app')

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

    <h5>영화 DB</h5>
    <hr/>

    <form id="fMovieSearch" method="get" action="{{ route('movie.search.index') }}" autocomplete="on" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded">
        <input type="hidden" name="page" value="{{ $params->page }}"/>
        <div class="row mb-3">
            <div class="col-12 col-sm mb-2 mb-sm-0">
                <label class="form-label">영화명</label>
                <input type="text" name="keyword" class="form-control" value="{{ $params->keyword }}" maxlength="100"/>
            </div>
            <div class="col-12 col-sm mb-sm-0">
                <label class="form-label">감독명</label>
                <input type="text" name="director" class="form-control" value="{{ $params->director }}" maxlength="30"/>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-12 col-sm mb-2 mb-sm-0">
                <label class="form-label">제작연도</label>
                <div class="row g-2">
                    <div class="col">
                        <select name="s_year" class="form-select">
                            <option value="">전체</option>
                            @foreach(range(1923, 2123, 1) as $year)
                                <option value="{{ $year }}" @if($params->sYear == $year) selected @endif>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto align-self-center">
                        ~
                    </div>
                    <div class="col">
                        <select name="e_year" class="form-select">
                            <option value="">전체</option>
                            @foreach(range(1923, 2123, 1) as $year)
                                <option value="{{ $year }}" @if($params->eYear == $year) selected @endif>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm">
                <label class="form-label">개봉일자</label>
                <div class="row g-2">
                    <div class="col">
                        <input type="text" name="s_open_dt" class="form-control date-picker" value="{{ $params->sOpenDt }}"/>
                    </div>
                    <div class="col-auto align-self-center">
                        ~
                    </div>
                    <div class="col">
                        <input type="text" name="e_open_dt" class="form-control date-picker" value="{{ $params->eOpenDt }}"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <label class="col-form-label">장르</label>
            <div class="col">
                @foreach(MAP_MOVIE_GENRE as $genre)
                    <div class="form-check form-check-inline">
                        <input type="checkbox" name="genre[]" id="genre_{{ $loop->index }}" class="form-check-input" value="{{ $genre }}" @if(in_array($genre, $params->genre)) checked @endif/>
                        <label for="genre_{{ $loop->index }}" class="form-check-label">{{ $genre }}</label>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-form-label">유형</label>
            <div class="col">
                @foreach(MAP_MOVIE_TYPE as $type)
                    <div class="form-check form-check-inline">
                        <input type="checkbox" name="type[]" id="type_{{ $loop->index }}" class="form-check-input" value="{{ $type }}" @if(in_array($type, $params->type)) checked @endif/>
                        <label for="type_{{ $loop->index }}" class="form-check-label">{{ $type }}</label>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="row g-2 justify-content-center mb-3">
            <div class="col col-sm-auto">
                <button type="submit" class="btn btn-dark w-100">검색</button>
            </div>
            <div class="col col-sm-auto">
                <button type="reset" class="btn btn-default w-100">초기화</button>
            </div>
        </div>
    </form>
    <hr/>

    @if($movies->rows > 0)
    <div class="search-list row row-cols-2 row-cols-sm-3 row-cols-lg-4 row-cols-xxl-5">
        @foreach($movies->list as $row)
            <div class="col">
                <a href="{{ $row->viewURL }}" class="poster-img" target="_self" title="{{ $row->movie_nm }}">
                    @isset($row->main_img)
                        <div class="ratio ratio-2x3">
                            <img src="{{ $row->main_img }}" class="img-fluid rounded" width="100%" alt="{{ $row->movie_nm }}" onerror="this.src='/images/default/no_image.png'" />
                        </div>
                    @else
                        <img src="/images/default/no_image.png" class="img-fluid rounded" width="100%" alt="{{ $row->movie_nm }}" />
                    @endisset
                </a>
                <dl>
                    <dt>
                        <a href="{{ $row->viewURL }}" target="_self">
                            {{ $row->movie_nm }}
                        </a>
                    </dt>
                    <dd>
                        <div class="row">
                            <div class="col">
                                <var data-rate="{{ $row->rate ?? 0 }}"></var>
                                <sub>{{ $row->rate ?? 0 }}</sub>
                            </div>
                            <div class="col text-end">
                                {{ $row->open_dt }}
                                @if($row->prdt_stat_nm)
                                    <small>({{ $row->prdt_stat_nm }}) </small>
                                @endif
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        @endforeach
    </div>
    @else
    <div class="text-center p-5">
        <h6>자료가 존재하지 않습니다.</h6>
    </div>
    @endif

    <hr/>
    {{ $movies->list->onEachSide($params->pageCount)->links('component.pagination') }}
</div>
@endsection

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

@push('scripts')
    <script src="{{ asset('js/movie/index.js') }}" defer></script>
@endpush
