@extends('adminlte::page')

@section('title', 'Tambah Ekstrakurikuler')

@section('content_header')
    <h1>Form Tambah Ekstrakurikuler</h1>
@stop

@section('content') 
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table me-1"></i>
                Tambah data
            </div>
            <div class="card-body">
                <form action="{{ route('ekskul.store') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="name">Judul:</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}">
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="deskripsi">Deskripsi:</label>
                        <input type="text" class="form-control @error('deskripsi') is-invalid @enderror" id="deskripsi" name="deskripsi" value="{{ old('deskripsi') }}">
                        @error('deskripsi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="icon">Icon:</label>
                         <select class="form-select" id="icon" name="icon" required>
                                        <option value="" disabled {{ old('icon') ? '' : 'selected' }}>Pilih...</option>
                                        <option value="fas fa-futbol" {{ old('icon') == 'fas fa-futbol' ? 'selected' : '' }}>fas fa-futbol</option>
                                        <option value="fas fa-basketball-ball" {{ old('icon') == 'fas fa-basketball-ball' ? 'selected' : '' }}>fas fa-basketball-ball</option>
                                        <option value="fas fa-volleyball-ball" {{ old('icon') == 'fas fa-volleyball-ball' ? 'selected' : '' }}>fas fa-volleyball-ball</option>
                                        <option value="fas fa-table-tennis" {{ old('icon') == 'fas fa-table-tennis' ? 'selected' : '' }}>fas fa-table-tennis</option>
                                        <option value="fas fa-first-aid" {{ old('icon') == 'fas fa-first-aid' ? 'selected' : '' }}>fas fa-first-aid</option>
                                        <option value="fas fa-flag" {{ old('icon') == 'fas fa-flag' ? 'selected' : '' }}>fas fa-flag</option>
                                        <option value="fas fa-campground" {{ old('icon') == 'fas fa-campground' ? 'selected' : '' }}>fas fa-campground</option>
                                        <option value="fas fa-users" {{ old('icon') == 'fas fa-users' ? 'selected' : '' }}>fas fa-users</option>
                                        <option value="fas fa-music" {{ old('icon') == 'fas fa-music' ? 'selected' : '' }}>fas fa-music</option>
                                        <option value="fas fa-theater-masks" {{ old('icon') == 'fas fa-theater-masks' ? 'selected' : '' }}>fas fa-theater-masks</option>
                                        <option value="fas fa-drum" {{ old('icon') == 'fas fa-drum' ? 'selected' : '' }}>fas fa-drum</option>
                                    </select>
                        @error('icon')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <button type="submit" class="btn btn-primary mt-4">Simpan</button>
                </form>
            </div>
        </div>
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!"); </script>
@stop