@extends('manage.layout')

@section('content')
    <h1>Showing - {{ $showing->showing_start }}</h1>
    <form method="POST" action="{{ route('manage.showing', ['id' => $showing->showing_id]) }}" class="form">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="movie_id">Movie</label>
            <select name="movie_id" id="movie_id">
                @foreach($movies as $movie)
                    <option value="{{ $movie->movie_id }}" {{ $movie->movie_id == $showing->movie_id ? 'selected' : '' }}>{{ $movie->movie_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="showing_start">Showing Start</label>
            <input type="datetime-local" name="showing_start" id="showing_start" value="{{ $showing->showing_start }}">
        </div>
        <div class="form-group">
            <label for="room_id">Cinema</label>
            <select name="cinema_id" id="cinema_id">
                @foreach($cinemas as $cinema)
                    <option value="{{ $cinema->cinema_id }}" {{ $cinema->cinema_id == $showing->room->cinema_id ? 'selected' : '' }}>{{ $cinema->cinema_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="room_id">Room</label>
            <select name="room_id" id="room_id">
                @foreach($showing->room->cinema->rooms as $room)
                    <option value="{{ $room->room_id }}" {{ $room->room_id == $showing->room_id ? 'selected' : '' }}>{{ $room->room_name }}</option>
                @endforeach
            </select>
            <script>
                // select the current room
                document.getElementById('cinema_id').addEventListener('change', function() {
                    var cinema_id = this.value;
                    var room_id = document.getElementById('room_id');
                    var rooms = @json($rooms);
                    var options = '';
                    for (var i = 0; i < rooms.length; i++) {
                        if (rooms[i].cinema_id == cinema_id) {
                            options += '<option value="' + rooms[i].room_id + '">' + rooms[i].room_name + '</option>';
                        }
                    }
                    room_id.innerHTML = options;
                });
            </script>
        </div>
        <script>
            document.getElementById('cinema_id').addEventListener('change', function() {
                var cinema_id = this.value;
                var room_id = document.getElementById('room_id');
                room_id.innerHTML = '';
                fetch('/api/cinemas/' + cinema_id + '/rooms')
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(rooms) {
                        rooms.forEach(function(room) {
                            var option = document.createElement('option');
                            option.value = room.room_id;
                            option.innerHTML = room.room_name;
                            if (room.room_id == {{ $showing->room_id }}) {
                                option.selected = true;
                            }
                            room_id.appendChild(option);
                        });
                        room_id.disabled = false;
                    });
            });
        </script>
        <div class="form-group">
            <button type="submit" class="button">Update Showing</button>
        </div>

    </form>
    <form method="POST" action="{{ route('manage.showing', ['id' => $showing->showing_id]) }}">
        @csrf
        @method('DELETE')
        <button type="submit" class="button">Delete Showing</button>
    </form>
@endsection