@extends('layouts.app')

@section('title', 'Go Live')

@section('extra_styles')
<style>
    .lc-wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px 60px; }
    .lc-wrap h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .lc-sub { font-size: 13px; opacity: .6; margin: 0 0 26px; line-height: 1.6; }
    .lc-field { margin-bottom: 18px; }
    .lc-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
    .lc-field input[type=text], .lc-field textarea {
        width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
        border-radius: 11px; padding: 11px 13px; color: inherit; font-size: 14px; font-family: inherit;
    }
    .lc-field input:focus, .lc-field textarea:focus { outline: none; border-color: #ef4444; }
    .lc-field textarea { min-height: 88px; resize: vertical; }
    .lc-err { font-size: 12px; color: #f87171; margin-top: 6px; }

    .lc-vis { display: grid; gap: 10px; }
    .lc-vis label {
        display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; cursor: pointer;
        border: 1px solid rgba(255,255,255,.14); border-radius: 12px; transition: border-color .15s ease, background .15s ease;
    }
    .lc-vis label:hover { background: rgba(255,255,255,.04); }
    .lc-vis input { margin-top: 3px; accent-color: #ef4444; }
    .lc-vis .t { font-size: 14px; font-weight: 600; }
    .lc-vis .d { font-size: 12px; opacity: .6; margin-top: 2px; line-height: 1.5; }
    .lc-vis input:checked + div .t { color: #ef4444; }
</style>
@endsection

@section('content')
<div class="lc-wrap">
    <h1><i class="bi bi-broadcast" style="color:#ef4444;"></i> Go Live</h1>
    <p class="lc-sub">Stream straight from your phone's camera. You'll get a link to share the moment you start.</p>

    <form method="POST" action="{{ route('live.store') }}">
        @csrf

        <div class="lc-field">
            <label for="title">Title</label>
            <input type="text" id="title" name="title" value="{{ old('title') }}" maxlength="120" required
                   placeholder="What are you streaming?" autofocus>
            @error('title')<div class="lc-err">{{ $message }}</div>@enderror
        </div>

        <div class="lc-field">
            <label for="description">Description <span style="opacity:.5;font-weight:400;">(optional)</span></label>
            <textarea id="description" name="description" maxlength="2000" placeholder="Tell viewers what to expect">{{ old('description') }}</textarea>
            @error('description')<div class="lc-err">{{ $message }}</div>@enderror
        </div>

        <div class="lc-field">
            <label>Who can find it</label>
            <div class="lc-vis">
                <label>
                    <input type="radio" name="visibility" value="public" {{ old('visibility', 'public') === 'public' ? 'checked' : '' }}>
                    <div>
                        <div class="t">Public</div>
                        <div class="d">Listed on the Live page — anyone can discover and watch it.</div>
                    </div>
                </label>
                <label>
                    <input type="radio" name="visibility" value="unlisted" {{ old('visibility') === 'unlisted' ? 'checked' : '' }}>
                    <div>
                        <div class="t">Unlisted</div>
                        <div class="d">Not listed anywhere. Only people you send the link to can watch.</div>
                    </div>
                </label>
                {{-- Mirror the upload-modal's Private wording: only the owner
                     sees it. Useful for test runs and private rehearsals. --}}
                <label>
                    <input type="radio" name="visibility" value="private" {{ old('visibility') === 'private' ? 'checked' : '' }}>
                    <div>
                        <div class="t">Private</div>
                        <div class="d">Only you can see this stream. Perfect for testing without an audience.</div>
                    </div>
                </label>
            </div>
            @error('visibility')<div class="lc-err">{{ $message }}</div>@enderror
        </div>

        <button type="submit" class="action-btn action-btn-primary" style="width:100%;justify-content:center;height:46px;">
            <i class="bi bi-camera-video"></i> <span>Set up camera</span>
        </button>
    </form>
</div>
@endsection