@extends('admin.index')

@section('title', 'Add New Language')

@section('content')
    <div class="content-area">
        <!-- Header Section -->
        <div class="flex-column align-items-center " style="margin-bottom: 5%;">
            <h1 class="mb-2" style="font-weight: 700;">Add New Language</h1>
            <p class="text-muted" style="max-width: 600px; margin: 0 auto;float: left;">
                Fill out the form below to add a new language to
                your platform.</p>
        </div>

        <!-- Centered Form Card -->
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <form id="addLanguageForm" action="{{ route('language.store') }}" method="POST">
                            @csrf

                            <div class="form-group mb-3">
                                <label class="form-label">Language Name (English) *</label>
                                <input type="text" name="name" class="form-control" placeholder="e.g., Korean"
                                    required>
                            </div>

                            <div class="form-group mb-3">
                                <label class="form-label">Native Name *</label>
                                <input type="text" name="nativeName" class="form-control" placeholder="e.g., 한국어"
                                    required>
                            </div>

                            <div class="form-group mb-3">
                                <label class="form-label">Language Code *</label>
                                <input type="text" name="code" class="form-control" placeholder="e.g., KR" required>
                            </div>

                            <div class="form-group mb-4">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-control">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i> Save Language
                                </button>
                                <a href="{{ route('language.list') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i> Back to List
                                </a>
                            </div>
                        </form>

                        @if (session('success'))
                            <div class="alert alert-success mt-3">{{ session('success') }}</div>
                        @endif

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