@extends('layouts.state')

@section('title', 'Create Belt Test')

@section('content')
<div class="mb-9">
    <div class="row g-3 mb-4">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('state.belt-tests.index') }}">Belt Tests</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create</li>
                </ol>
            </nav>
            <h2 class="mb-0">Create Belt Test</h2>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <div class="card">
                <div class="card-header border-bottom border-translucent">
                    <h5 class="mb-0">Belt Test Details</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('state.belt-tests.store') }}">
                        @csrf
                        
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label" for="name">Test Name</label>
                                <input class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" type="text" 
                                       value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="belt_level">Belt Level</label>
                                <select class="form-select @error('belt_level') is-invalid @enderror" 
                                        id="belt_level" name="belt_level" required>
                                    <option value="">Select Belt Level</option>
                                    <option value="White Belt" {{ old('belt_level') == 'White Belt' ? 'selected' : '' }}>White Belt</option>
                                    <option value="Yellow Belt" {{ old('belt_level') == 'Yellow Belt' ? 'selected' : '' }}>Yellow Belt</option>
                                    <option value="Orange Belt" {{ old('belt_level') == 'Orange Belt' ? 'selected' : '' }}>Orange Belt</option>
                                    <option value="Green Belt" {{ old('belt_level') == 'Green Belt' ? 'selected' : '' }}>Green Belt</option>
                                    <option value="Blue Belt" {{ old('belt_level') == 'Blue Belt' ? 'selected' : '' }}>Blue Belt</option>
                                    <option value="Brown Belt" {{ old('belt_level') == 'Brown Belt' ? 'selected' : '' }}>Brown Belt</option>
                                    <option value="Black Belt" {{ old('belt_level') == 'Black Belt' ? 'selected' : '' }}>Black Belt</option>
                                </select>
                                @error('belt_level')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="test_date">Test Date</label>
                                <input class="form-control @error('test_date') is-invalid @enderror" 
                                       id="test_date" name="test_date" type="date" 
                                       value="{{ old('test_date') }}" required>
                                @error('test_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label" for="description">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="3" 
                                          placeholder="Brief description of the belt test">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label" for="requirements">Test Requirements</label>
                                <textarea class="form-control @error('requirements') is-invalid @enderror" 
                                          id="requirements" name="requirements" rows="5" 
                                          placeholder="List the specific requirements and techniques for this belt test">{{ old('requirements') }}</textarea>
                                @error('requirements')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button class="btn btn-primary me-2" type="submit">
                                <span class="fas fa-save me-1"></span>Create Belt Test
                            </button>
                            <a class="btn btn-phoenix-secondary" href="{{ route('state.belt-tests.index') }}">
                                <span class="fas fa-times me-1"></span>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-xl-4">
            <div class="card">
                <div class="card-header border-bottom border-translucent">
                    <h6 class="mb-0">Belt Test Guidelines</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-start mb-3">
                        <span class="fas fa-info-circle text-info me-2 mt-1"></span>
                        <div>
                            <h6 class="mb-1">Test Preparation</h6>
                            <p class="text-body-tertiary fs-9 mb-0">Ensure students have adequate preparation time before scheduling the test.</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start mb-3">
                        <span class="fas fa-users text-success me-2 mt-1"></span>
                        <div>
                            <h6 class="mb-1">Participants</h6>
                            <p class="text-body-tertiary fs-9 mb-0">Students can be added to this test after creation.</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-start">
                        <span class="fas fa-certificate text-warning me-2 mt-1"></span>
                        <div>
                            <h6 class="mb-1">Certification</h6>
                            <p class="text-body-tertiary fs-9 mb-0">Successful participants will receive belt advancement certification.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection