@extends('layouts.staff')

@php
    $matchmakingModes = [
        'auto_balance' => 'Auto-Balance',
        'skill_separated' => 'Skill Separated',
        'winner_loser_group' => 'Winner/Loser Group',
        'mixed_doubles' => 'Mixed Doubles',
        'skill_courts' => 'Skill Courts',
        'king_queen' => 'King/Queen',
    ];

    $timeOptions = [];

    for ($hour = 0; $hour < 24; $hour++) {
        foreach ([0, 30] as $minute) {
            $value = sprintf('%02d:%02d', $hour, $minute);
            $timeOptions[$value] = \Carbon\Carbon::createFromFormat('H:i', $value)->format('g:i A');
        }
    }
@endphp

@section('content')
    <div class="row justify-content-center">
        <div class="col-12 col-xl-10">
            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3 mb-4">
                <div>
                    <p class="ck-page-kicker mb-1">Court Kulture</p>
                    <h1 class="h3 ck-heading mb-1">Create Session</h1>
                    <div class="text-secondary small">Set the session details, schedule, and default rotation style.</div>
                </div>
                <a href="{{ route('staff.sessions.index') }}" class="btn btn-outline-secondary align-self-start align-self-sm-center"><span class="ck-btn-icon ck-icon-back" aria-hidden="true"></span>Back to Sessions</a>
            </div>

            <form method="POST" action="{{ route('staff.sessions.store') }}" class="cq-card ck-session-create-card">
                @csrf

                <div class="ck-session-create-hero">
                    <div>
                        <p class="text-uppercase small fw-bold mb-2">New open-play session</p>
                        <h2 class="h4 ck-heading mb-1">Build the rotation before players arrive.</h2>
                        <p class="mb-0">Use simple date and time fields so staff can move quickly on tablets without the browser time picker covering the form.</p>
                    </div>
                </div>

                <div class="p-3 p-md-4">
                    <div class="row g-4">
                        <div class="col-12 col-lg-7">
                            <section class="ck-form-section">
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <span class="ck-line-icon"></span>
                                    <div>
                                        <h3 class="cq-section-title mb-0">Session Details</h3>
                                        <div class="small text-secondary">Name and venue shown to staff and public viewers.</div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="name" class="form-label">Session Name</label>
                                    <input id="name" name="name" type="text" value="{{ old('name') }}" class="form-control form-control-lg @error('name') is-invalid @enderror" required autofocus>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div>
                                    <label for="venue" class="form-label">Venue</label>
                                    <input id="venue" name="venue" type="text" value="{{ old('venue') }}" class="form-control @error('venue') is-invalid @enderror" placeholder="Court Kulture main gym">
                                    @error('venue')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </section>

                            <section class="ck-form-section mt-4">
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <span class="ck-line-icon ck-line-icon-match"></span>
                                    <div>
                                        <h3 class="cq-section-title mb-0">Schedule</h3>
                                        <div class="small text-secondary">Separate date and time controls avoid picker overlap.</div>
                                    </div>
                                </div>

                                <div class="row g-3">
                                    <div class="col-12 col-sm-6">
                                        <label for="starts_at_date" class="form-label">Start Date</label>
                                        <input id="starts_at_date" name="starts_at_date" type="date" value="{{ old('starts_at_date') }}" class="form-control @error('starts_at_date') is-invalid @enderror @error('starts_at') is-invalid @enderror">
                                        @error('starts_at_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <label for="starts_at_time" class="form-label">Start Time</label>
                                        <select id="starts_at_time" name="starts_at_time" class="form-select @error('starts_at_time') is-invalid @enderror @error('starts_at') is-invalid @enderror">
                                            <option value="">Select time</option>
                                            @foreach ($timeOptions as $value => $label)
                                                <option value="{{ $value }}" @selected(old('starts_at_time') === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                        @error('starts_at_time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @error('starts_at')
                                        <div class="col-12">
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        </div>
                                    @enderror

                                    <div class="col-12 col-sm-6">
                                        <label for="ends_at_date" class="form-label">End Date</label>
                                        <input id="ends_at_date" name="ends_at_date" type="date" value="{{ old('ends_at_date') }}" class="form-control @error('ends_at_date') is-invalid @enderror @error('ends_at') is-invalid @enderror">
                                        @error('ends_at_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <label for="ends_at_time" class="form-label">End Time</label>
                                        <select id="ends_at_time" name="ends_at_time" class="form-select @error('ends_at_time') is-invalid @enderror @error('ends_at') is-invalid @enderror">
                                            <option value="">Select time</option>
                                            @foreach ($timeOptions as $value => $label)
                                                <option value="{{ $value }}" @selected(old('ends_at_time') === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                        @error('ends_at_time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @error('ends_at')
                                        <div class="col-12">
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        </div>
                                    @enderror
                                </div>
                            </section>
                        </div>

                        <div class="col-12 col-lg-5">
                            <section class="ck-form-section ck-form-section-muted h-100">
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <span class="ck-line-icon ck-line-icon-court"></span>
                                    <div>
                                        <h3 class="cq-section-title mb-0">Session Defaults</h3>
                                        <div class="small text-secondary">Start active and choose the default match style.</div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select id="status" name="status" class="form-select @error('status') is-invalid @enderror">
                                        @foreach (['draft' => 'Draft', 'active' => 'Active', 'completed' => 'Completed', 'cancelled' => 'Cancelled'] as $value => $label)
                                            <option value="{{ $value }}" @selected(old('status', 'active') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="matchmaking_mode" class="form-label">Default Matchmaking</label>
                                    <select id="matchmaking_mode" name="matchmaking_mode" class="form-select @error('matchmaking_mode') is-invalid @enderror">
                                        @foreach ($matchmakingModes as $value => $label)
                                            <option value="{{ $value }}" @selected(old('matchmaking_mode', 'auto_balance') === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    @error('matchmaking_mode')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="ck-submit-panel">
                                    <div class="small text-secondary mb-3">You can add courts and players after the session is created.</div>
                                    <button type="submit" class="btn btn-cq btn-cq-active btn-lg w-100"><span class="ck-btn-icon ck-icon-plus" aria-hidden="true"></span>Create Session</button>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection