@extends('layouts.app')

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

@section('content')
<div class="container py-5">

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h2 class="fw-bold text-success mb-1">🏢 Add New Center</h2>
            <p class="text-muted mb-0">Register a new training center for the Nyota Programme.</p>
        </div>
        <a href="{{ route('centers.index') }}" class="btn btn-outline-success rounded-pill">
            <i class="bi bi-arrow-left"></i> Back to Centers
        </a>
    </div>

    <!-- Form Card -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-5">

            <form action="{{ route('centers.store') }}" method="POST">
                @csrf

                <!-- Center Name -->
                <div class="mb-4">
                    <label for="name" class="form-label fw-semibold">Center Name</label>
                    <input type="text" name="name" id="name"
                        class="form-control form-control-lg border-success rounded-pill @error('name') is-invalid @enderror"
                        value="{{ old('name') }}" placeholder="Enter center name" required>
                    <small class="text-muted">This is the official name of the training center.</small>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Sub County -->
                <div class="mb-4">
                    <label for="sub_county_id" class="form-label fw-semibold">Sub-County</label>
                    <select name="sub_county_id" id="sub_county_id"
                        class="form-select form-select-lg border-success rounded-pill @error('sub_county_id') is-invalid @enderror" required>
                        <option value="">-- Select Sub-County --</option>
                        @foreach($subCounties as $subCounty)
                            <option value="{{ $subCounty->id }}" {{ old('sub_county_id') == $subCounty->id ? 'selected' : '' }}>
                                {{ $subCounty->name }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Select the sub-county where this center is located.</small>
                    @error('sub_county_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Status -->
                <div class="mb-4">
                    <label for="status" class="form-label fw-semibold">Status</label>
                    <select name="status" id="status"
                        class="form-select form-select-lg border-success rounded-pill @error('status') is-invalid @enderror" required>
                        <option value="active" {{ old('status')=='active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status')=='inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                    <small class="text-muted">Set the current operational status of the center.</small>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-success btn-lg rounded-pill px-5">
                        <i class="bi bi-plus-circle me-2"></i> Add Center
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

<!-- Optional Custom Styles -->
<style>
body { background-color: #f7faf7; }
.card { border-radius: 16px; }
</style>
@endsection