@extends('layouts.master')

@section('title', 'Edit Course')
@section('meta-tag')
    <meta name="description" content="Edit course details in the Admin Backoffice">
@endsection

@section('content')
    <div class="container">
        <h2>Edit Course</h2>

        <!-- Form to Edit Course -->
        <form id="course-update-form">
            @csrf
            @method('PUT')

            <input type="hidden" name="id" id="course-id" value="{{ $course->id }}">

            <div class="mb-3">
                <label for="program_id" class="form-label">Program</label>
                <select name="program_id" id="program_id" class="form-control @error('program_id') is-invalid @enderror">
                    <option value="">Select Program</option>
                    @foreach ($programs as $program)
                        <option value="{{ $program->id }}" {{ old('program_id', $course->program_id) == $program->id ? 'selected' : '' }}>
                            {{ $program->name }}
                        </option>
                    @endforeach
                </select>
                @error('program_id')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="level_id" class="form-label">Level</label>
                <select name="level_id" id="level_id" class="form-control @error('level_id') is-invalid @enderror">
                    <option value="">Select Level</option>
                    @foreach ($levels as $level)
                        <option value="{{ $level->id }}" {{ old('level_id', $course->level_id) == $level->id ? 'selected' : '' }}>
                            {{ $level->name }}
                        </option>
                    @endforeach
                </select>
                @error('level_id')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="center" class="form-label">Center</label>
                <select name="center" id="center" class="form-control @error('center') is-invalid @enderror">
                    <option value="1" {{ old('center', $course->center) == 1 ? 'selected' : '' }}>Offline</option>
                    <option value="0" {{ old('center', $course->center) == 0 ? 'selected' : '' }}>Online</option>
                </select>
                @error('center')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="start_date" class="form-label">Start Date</label>
                <input type="date" name="start_date" id="start_date" value="{{ old('start_date', $course->start_date) }}" class="form-control @error('start_date') is-invalid @enderror">
                @error('start_date')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="end_date" class="form-label">End Date</label>
                <input type="date" name="end_date" id="end_date" value="{{ old('end_date', $course->end_date) }}" class="form-control @error('end_date') is-invalid @enderror">
                @error('end_date')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn btn-primary">Update Course</button>
            <a href="{{ route('admin.course.index') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#course-update-form').on('submit', function(e) {
                e.preventDefault();

                // Clear previous error messages
                $('.invalid-feedback').remove();
                $('.form-control').removeClass('is-invalid');

                var formData = new FormData(this);

                $.ajax({
                    url: "{{ route('admin.course.update', $course->id) }}",
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        // SweetAlert Success
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                        }).then(() => {
                            window.location.href = "{{ route('admin.course.index') }}";
                        });
                    },
                    error: function(response) {
                        var errors = response.responseJSON.errors;
                        for (var field in errors) {
                            $('#' + field).addClass('is-invalid');
                            $('#' + field).after('<div class="invalid-feedback">' + errors[field][0] + '</div>');
                        }

                        // SweetAlert Error
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'There are some errors in the form!',
                        });
                    }
                });
            });
        });
    </script>
@endpush