@extends('layouts.admin')

@section('title', 'Add Course | Admin')

@section('content')

<div class="container py-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-1">Add Course</h1>
            <p class="text-muted mb-0">Create a new course.</p>
        </div>

        <a href="{{ route('admin.courses.index') }}" class="btn btn-outline-secondary">
            Back to Courses
        </a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Please fix the following:</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card border-0 shadow-sm">
        <div class="card-body p-4 p-lg-5">

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

                <div class="row g-4">

                    <div class="col-md-8">
                        <label for="title" class="form-label">Course Title</label>

                        <input
                            type="text"
                            id="title"
                            name="title"
                            value="{{ old('title') }}"
                            class="form-control"
                            required
                        >
                    </div>

                    <div class="col-md-4">
                        <label for="slug" class="form-label">Slug</label>

                        <input
                            type="text"
                            id="slug"
                            name="slug"
                            value="{{ old('slug') }}"
                            class="form-control"
                            placeholder="spoken-english"
                            required
                        >

                        <div class="form-text">
                            Use lowercase letters, numbers and hyphens.
                        </div>
                    </div>

                    <div class="col-12">
                        <label for="short_description" class="form-label">
                            Short Description
                        </label>

                        <textarea
                            id="short_description"
                            name="short_description"
                            rows="3"
                            class="form-control"
                        >{{ old('short_description') }}</textarea>
                    </div>

                    <div class="col-12">
                        <label for="description" class="form-label">
                            Full Description
                        </label>

                        <textarea
                            id="description"
                            name="description"
                            rows="7"
                            class="form-control"
                        >{{ old('description') }}</textarea>
                    </div>

                    <div class="col-md-4">
                        <label for="duration" class="form-label">Duration</label>

                        <input
                            type="text"
                            id="duration"
                            name="duration"
                            value="{{ old('duration') }}"
                            class="form-control"
                            placeholder="8 Weeks"
                        >
                    </div>

                    <div class="col-md-4">
                        <label for="fee" class="form-label">Fee</label>

                        <input
                            type="number"
                            id="fee"
                            name="fee"
                            value="{{ old('fee') }}"
                            class="form-control"
                            min="0"
                            step="0.01"
                        >
                    </div>

                    <div class="col-md-4">
                        <label for="image" class="form-label">Image Path</label>

                        <input
                            type="text"
                            id="image"
                            name="image"
                            value="{{ old('image') }}"
                            class="form-control"
                            placeholder="courses/spoken-english.jpg"
                        >
                    </div>

                    <div class="col-md-4">
                        <label for="status" class="form-label">Status</label>

                        <select
                            id="status"
                            name="status"
                            class="form-select"
                            required
                        >
                            <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>
                                Active
                            </option>

                            <option value="0" {{ old('status') === '0' ? 'selected' : '' }}>
                                Inactive
                            </option>
                        </select>
                    </div>

                    <div class="col-12">
                        <hr>

                        <button type="submit" class="btn btn-primary px-4">
                            Create Course
                        </button>

                        <a
                            href="{{ route('admin.courses.index') }}"
                            class="btn btn-outline-secondary ms-2"
                        >
                            Cancel
                        </a>
                    </div>

                </div>
            </form>

        </div>
    </div>

</div>

@endsection