<?php
if (Auth('admin')->User()->dashboard_style == 'light') {
    $text = 'dark';
} else {
    $text = 'light';
}
?>
@extends('layouts.app')
@section('content')
    @include('admin.topmenu')
    @include('admin.sidebar')
    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="page-header">
                    <h4 class="page-title text-{{ $text }}">Create Giveaway</h4>
                    <ul class="breadcrumbs">
                        <li class="nav-home"><a href="{{ route('admin.dashboard') }}"><i class="flaticon-home"></i></a></li>
                        <li class="separator"><i class="flaticon-right-arrow"></i></li>
                        <li class="nav-item"><a href="{{ route('admin.giveaways.index') }}">Giveaways</a></li>
                        <li class="separator"><i class="flaticon-right-arrow"></i></li>
                        <li class="nav-item"><span class="text-{{ $text }}">Create</span></li>
                    </ul>
                </div>

                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('admin.giveaways.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        {{-- Left Column --}}
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-{{ $text }}">Giveaway Details</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Title <span class="text-danger">*</span></label>
                                        <input type="text" name="title" class="form-control" value="{{ old('title') }}" placeholder="e.g. Win a Tesla Model 3" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea name="description" id="giveaway-description" class="form-control" rows="6" placeholder="Detailed giveaway description...">{{ old('description') }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label>Image</label>
                                        <input type="file" name="image" class="form-control-file" accept="image/*">
                                        <small class="form-text text-muted">Recommended: 1200x630px, JPG/PNG/WebP, max 2MB</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Right Column --}}
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-{{ $text }}">Prize & Settings</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label>Prize Type <span class="text-danger">*</span></label>
                                        <select name="prize_type" id="prize_type" class="form-control" required>
                                            <option value="car" {{ old('prize_type') == 'car' ? 'selected' : '' }}>Car</option>
                                            <option value="cash" {{ old('prize_type', 'cash') == 'cash' ? 'selected' : '' }}>Cash</option>
                                            <option value="investment_credit" {{ old('prize_type') == 'investment_credit' ? 'selected' : '' }}>Investment Credit</option>
                                            <option value="other" {{ old('prize_type') == 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Prize Value ($) <span class="text-danger">*</span></label>
                                        <input type="number" name="prize_value" class="form-control" value="{{ old('prize_value') }}" step="0.01" min="0" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Prize Description</label>
                                        <input type="text" name="prize_description" class="form-control" value="{{ old('prize_description') }}" placeholder="e.g. 2024 Tesla Model 3 Long Range">
                                    </div>
                                    <div class="form-group" id="car_select_group" style="{{ old('prize_type') == 'car' ? '' : 'display:none' }}">
                                        <label>Select Car</label>
                                        <select name="car_id" class="form-control">
                                            <option value="">— Select —</option>
                                            @foreach($cars as $car)
                                                <option value="{{ $car->id }}" {{ old('car_id') == $car->id ? 'selected' : '' }}>
                                                    {{ $car->name }} (${{ number_format($car->price, 2) }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Entry Requirement <span class="text-danger">*</span></label>
                                        <select name="entry_requirement" class="form-control" required>
                                            <option value="anyone" {{ old('entry_requirement', 'anyone') == 'anyone' ? 'selected' : '' }}>Anyone</option>
                                            <option value="vip_only" {{ old('entry_requirement') == 'vip_only' ? 'selected' : '' }}>VIP Members Only</option>
                                            <option value="purchase_required" {{ old('entry_requirement') == 'purchase_required' ? 'selected' : '' }}>Car Purchase Required</option>
                                            <option value="vip_and_purchase" {{ old('entry_requirement') == 'vip_and_purchase' ? 'selected' : '' }}>VIP + Car Purchase</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Max Entries</label>
                                        <input type="number" name="max_entries" class="form-control" value="{{ old('max_entries') }}" min="1" placeholder="Leave empty for unlimited">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Start Date <span class="text-danger">*</span></label>
                                                <input type="datetime-local" name="starts_at" class="form-control" value="{{ old('starts_at') }}" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>End Date <span class="text-danger">*</span></label>
                                                <input type="datetime-local" name="ends_at" class="form-control" value="{{ old('ends_at') }}" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Status <span class="text-danger">*</span></label>
                                        <select name="status" class="form-control" required>
                                            <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                                            <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="featured" value="1" class="custom-control-input" id="featured" {{ old('featured') ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="featured">Featured Giveaway</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block btn-lg">
                                <i class="fas fa-save"></i> Create Giveaway
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('prize_type').addEventListener('change', function() {
            document.getElementById('car_select_group').style.display = this.value === 'car' ? '' : 'none';
        });
    </script>
@endsection
