@extends('layout')

@push('head')
    <link rel="stylesheet" href="{{asset('css/generic.css')}}">
    <link rel="stylesheet" href="{{asset('css/order.css')}}">
    <script src="{{asset('js/order.js')}}" defer></script>
@endpush

@section('body')
    <h1>Ordering tickets for {{ $showing->movie->movie_name }}</h1>
    <hr/>
    <div id="showing">
        <div class="details">
            <span>Cinema: <a
                    href="/cinema/{{$showing->room->cinema->cinema_id}}">{{$showing->room->cinema->cinema_name}}</a></span><br/>
            <span>Room: {{$showing->room->room_name}}</span><br/>
            <span>Showing: {{$showing->showing_start}} - {{$showing->showing_end()}}</span><br/>
        </div>
    </div>
    <hr/>
    @component('components.seat-chooser', ['room_id' => $showing->room->room_id, 'showing_id' => $showing->showing_id])
    @endcomponent
    <hr/>
    <div id="summary">
        <h2>Summary</h2>
        <hr/>
        <div id="summary-dyn">
            No seats selected.
        </div>
        <hr/>
        <div id="summary-total">Total: €0.00</div>
    </div>
    <button id="order-button" class="button" disabled=true>Order</button>

@endsection