@extends('layouts.app')

@section('title', 'Buchung erstellen - Schritt 2')

@section('content')
<div class="container-xxl mt-4">
    <h1>Buchung erstellen</h1>
    <h4>Schritt 2: Buchungsdetails & Termin</h4>

    <form method="POST" action="{{ route('booking.create.step2') }}">
        @csrf

        <div class="card mb-3">
            <div class="card-header"><h5>Buchungsdetails</h5></div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="purpose" class="form-label">Mietzweck</label>
                    <input type="text" class="form-control" id="purpose" name="purpose" maxlength="255">
                    @error('purpose') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
                <div class="mb-3">
                    <label for="societyId" class="form-label">Verein</label>
                    <select class="form-select" id="societyId" name="societyId">
                        <option value="">Kein Verein</option>
                        @foreach($societies as $society)
                            <option value="{{ $society->id }}">{{ $society->label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="remarks" class="form-label">Bemerkungen</label>
                    <textarea class="form-control" id="remarks" name="remarks" rows="3"></textarea>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header"><h5>Termin</h5></div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="roomId" class="form-label">Raum</label>
                    <select class="form-select" id="roomId" name="roomId" required>
                        @foreach($rooms as $room)
                            <option value="{{ $room->id }}">{{ $room->label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="label" class="form-label">Terminbezeichnung</label>
                    <input type="text" class="form-control" id="label" name="label" required>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="startTimestamp" class="form-label">Start</label>
                        <input type="datetime-local" class="form-control" id="startTimestamp" name="startTimestamp" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="endTimestamp" class="form-label">Ende</label>
                        <input type="datetime-local" class="form-control" id="endTimestamp" name="endTimestamp" required>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Buchung erstellen</button>
        <a href="{{ route('booking.create.step1') }}" class="btn btn-secondary">Zurueck</a>
    </form>
</div>
@endsection