@extends('mobile.layouts.app')

@section('content')

<div id="banners" class="swiper">
    <div class="swiper-wrapper">
        @foreach($nowPlaying->list as $row)
            <div class="swiper-slide" style=" background-image: linear-gradient(to right, rgb(19,19,19), rgba(255, 255, 255, 0)), url('{{ $row->backdropURL }}');">
                <div class="swiper-cover">
                    <div class="row">
                        <div class="col-2">
                            <img src="{{ $row->posterURL }}" class="rounded" alt="{{ $row->title }}"/>
                        </div>
                        <div class="col-10">
                            <div class="title">{{ $row->title }}</div>
                            <div class="subtitle">{{ $row->original_title }}</div>
                            <div class="text">
                                <p>
                                    {{ $row->overview }}
                                </p>
                                개봉일 : {{ $row->releaseDate }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="swiper-button-next p-1"></div>
    <div class="swiper-button-prev p-1"></div>
    <div class="swiper-pagination"></div>
</div>

<br/>

{{-- 인기 영화 --}}
<div id="trending" class="container">
    <h5 class="mb-3">인기 영화</h5>
    @if($trending->total > 0)
        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5">
            @foreach($trending->list as $row)
                <div class="col">
                    <div class="card h-100">
                    <a href="#" class="btn btn-link btn-trending-modal d-flex flex-column h-100 p-0" data-bs-toggle="modal" data-bs-target="#trendingModal" data-title="{{ $row->title }}" data-original="{{ $row->original_title }}" data-src="{{ $row->posterURL }}" data-background="{{ $row->backdropURL }}" data-overview="{{ $row->overview }}" data-release-date="{{ $row->release_date }}">
                        {{-- 영화 포스터 --}}
                        <div class="ratio ratio-2x3">
                            <img src="{{ $row->posterURL }}" class="rounded" alt="{{ $row->original_title }}" />
                        </div>

                        {{-- 영화 정보 --}}
                        <div class="card-body">
                            <div class="d-inline-flex gap-1 mb-2">
                                <var class="d-inline-block" data-rate="{{ $row->voteAverage }}"></var>
                                <span class="d-inline-block">{{ $row->voteAverage }}</span>
                            </div>
                            <p>{{ $row->title }}</p>
                       </div>
                    </a>
                </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="row">
            <div class="col text-center">
                인기 영화가 없습니다.
            </div>
        </div>
    @endif
</div>

<!-- 인기 영화 정보 -->
<div class="modal fade" id="trendingModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="trendingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h1 class="modal-title fs-5" id="trendingModalLabel">-</h1>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="row">
                    <div class="col-sm-3">
                        <img src="" id="moviePosterSrc" class="img-fluid"/>
                    </div>
                    <div class="col pt-3 pt-sm-0">
                        <dl>
                            <dt></dt>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- 공지, 평점·후기 --}}
<div class="container">
    <div class="row justify-content-center">

        <!-- 공지사항 -->
        <div id="notice" class="col-12 col-md-6">
            <div class="row">
                <div class="col">
                    <h5>공지사항</h5>
                </div>
                <div class="col text-end">
                    <a href="{{ route('board.list', 'notice') }}">전체보기</a>
                </div>
            </div>
            <hr/>
            <table class="table table-borderless">
                <colgroup>
                    <col style="width:50px;" />
                    <col />
                    <col />
                </colgroup>
                @if($notice->total > 0)
                    @foreach($notice->list as $row)
                        <tr>
                            <td>
                                <img src="/images/icon/notice.gif" alt="[공지]"/>
                            </td>
                            <td>
                                <a href="{{ $row->viewURL }}">{{ $row->subject }}</a>
                            </td>
                            <td class="text-end">
                                <small>{{ $row->createdAt }}</small>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="3" class="text-center text-white">
                            공지 글이 없습니다.
                        </td>
                    </tr>
                @endif
            </table>
        </div>

        <!-- 평점·후기 -->
        <div id="review" class="col-12 col-md-6 pt-2 pt-md-0">
            <div class="row">
                <div class="col">
                    <h5>평점·후기</h5>
                </div>
                <div class="col text-end">
                    <a href="{{ route('movie.review.index') }}">전체보기</a>
                </div>
            </div>
            <hr/>
            <table class="table table-borderless">
                <colgroup>
                    <col />
                    <col />
                    <col />
                </colgroup>
                @if($review->total > 0)
                    @foreach($review->list as $row)
                        <tr>
                            <td>{{ $row->num }}</td>
                            <td>
                                <span>[{{ $row->movie_nm }}]</span>
                                <a href="{{ $row->viewURL }}">{{ $row->content }}</a>
                            </td>
                            <td class="text-end">
                                <small>{{ $row->createdAt }}</small>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="3" class="text-center text-white">
                            공지 글이 없습니다.
                        </td>
                    </tr>
                @endif
            </table>
        </div>
    </div>
</div>

@endsection

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

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