@extends('layouts.app')

@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 1 - ' . config('app.name'))

@push('styles')
    <style>
        .wizard-container { max-width: 900px; margin: 0 auto; padding: 2rem; }
        .wizard-card { background: white; border-radius: 16px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 2rem; }
        .wizard-header { text-align: center; margin-bottom: 2.5rem; }
        .wizard-title { font-size: 2rem; font-weight: 800; color: #1a202c; margin-bottom: 0.5rem; }
        .wizard-subtitle { color: #4a5568; font-size: 1.1rem; }
        .steps-indicator { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
        .step-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
        .step-dot.active { background: #eeb425; color: white; }
        .step-dot.inactive { background: #e2e8f0; color: #a0aec0; }
        .step-dot.completed { background: #38a169; color: white; }
        .step-line { width: 60px; height: 3px; align-self: center; border-radius: 2px; }
        .step-line.active { background: #eeb425; }
        .step-line.inactive { background: #e2e8f0; }
        .platform-card { border: 3px solid #e2e8f0; border-radius: 16px; padding: 2rem; cursor: pointer; transition: all 0.3s; text-align: center; }
        .platform-card:hover { border-color: #eeb425; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(238,180,37,0.15); }
        .platform-card.selected { border-color: #eeb425; background: #fffbeb; }
        .platform-icon { font-size: 3rem; margin-bottom: 1rem; }
        .platform-name { font-size: 1.25rem; font-weight: 700; color: #2d3748; margin-bottom: 0.5rem; }
        .platform-desc { color: #4a5568; font-size: 0.9rem; line-height: 1.5; }
        .platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .btn-wizard { background: linear-gradient(135deg, #eeb425, #d4a52a); color: #1a202c; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(238,180,37,0.3); }
        .btn-wizard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(238,180,37,0.4); }
        .btn-wizard:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .radio-input { display: none; }
        .step-label { font-size: 0.85rem; color: #718096; text-align: center; margin-top: 0.5rem; }
    </style>
@endpush

@section('content')
    <div class="wizard-container">
        <div class="wizard-header">
            <h1 class="wizard-title">📻 {{ __('radio.wizard.title') }}</h1>
            <p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 1 {{ __('radio.wizard.of') }} 5 - {{ __('radio.wizard.step1_subtitle') }}</p>
        </div>

        <div class="steps-indicator">
            <div class="step-dot active">1</div>
            <div class="step-line inactive"></div>
            <div class="step-dot inactive">2</div>
            <div class="step-line inactive"></div>
            <div class="step-dot inactive">3</div>
            <div class="step-line inactive"></div>
            <div class="step-dot inactive">4</div>
            <div class="step-line inactive"></div>
            <div class="step-dot inactive">5</div>
        </div>
        <div style="display: flex; justify-content: center; gap: 3.5rem; margin-top: -1.5rem; margin-bottom: 1rem; font-size: 0.75rem; color: #718096;">
            <span style="color: #eeb425; font-weight: 600;">{{ __('radio.wizard.step1_label') }}</span>
            <span>{{ __('radio.wizard.step2_label') }}</span>
            <span>{{ __('radio.wizard.step3_label') }}</span>
            <span>{{ __('radio.wizard.step4_label') }}</span>
            <span>{{ __('radio.wizard.step5_label') }}</span>
        </div>

        <div class="wizard-card">
            <form id="platformForm" action="{{ route('admin.radio.wizard.process-step-1') }}" method="POST">
                @csrf

                <div class="platform-grid">
                    @php $platforms = ['shoutcast', 'icecast', 'azurecast', 'other']; @endphp
                    @php $icons = ['shoutcast' => '📡', 'icecast' => '🎵', 'azurecast' => '☁️', 'other' => '🔗']; @endphp

                    @foreach($platforms as $p)
                        <label class="platform-card" id="card-{{ $p }}" onclick="selectPlatform('{{ $p }}')">
                            <input type="radio" name="platform" value="{{ $p }}" class="radio-input" {{ $selectedPlatform === $p ? 'checked' : '' }} required>
                            <div class="platform-icon">{{ $icons[$p] }}</div>
                            <div class="platform-name">{{ __("radio.wizard.platform_{$p}") }}</div>
                            <div class="platform-desc">{{ __("radio.wizard.platform_{$p}_desc") }}</div>
                        </label>
                    @endforeach
                </div>

                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <a href="{{ route('admin.radio.setup') }}" class="btn-wizard" style="background: #e2e8f0; color: #4a5568; box-shadow: none; text-decoration: none; font-size: 0.95rem;">
                        ← {{ __('radio.wizard.back_to_setup') }}
                    </a>
                    <button type="submit" class="btn-wizard" id="continueBtn" disabled>
                        {{ __('radio.wizard.next_step') }} →
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function selectPlatform(value) {
            document.querySelectorAll('.platform-card').forEach(c => c.classList.remove('selected'));
            document.getElementById('card-' + value).classList.add('selected');
            document.querySelector('input[name="platform"][value="' + value + '"]').checked = true;
            document.getElementById('continueBtn').disabled = false;
        }
    </script>
@endsection