@extends('layouts.admin')

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

@section('content')
<div class="container-fluid p-0">

    <!--title-->
    <div class="mb-3 d-flex align-items-center justify-content-between">

        <div>
            <h1 class="h3 mb-0">Add Course</h1>
            <p class="mb-0">You can create course from here</p>
        </div>

        <a href="{{ url()->previous() }}" class="btn btn-primary">
            Back
        </a>

    </div>
    <!--title-->

    <!--content-->
    <div class="row">

        <!--1-->
        <div class="col-12 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <form method="post" id="submit_Course">

                        <div class="row">
                            <div class="col-12 col-xl-12">

                                <!--1 card-->
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-3">Course Details</h4>
                                        <div class="list-card-cont">
                                            <div class="row">

                                                <div class="mb-4 col-md-6">
                                                    <label class="form-label">Course Name <span class="text-danger">*</span></label>
                                                    <input id="course_name" type="text" name="course_name" class="form-control">
                                                    <label style="color:red" id="course_name_error"></label>
                                                </div>

                                                <div class="mb-4 col-md-6">
                                                    <label class="form-label">Course Code <span class="text-danger">*</span></label>
                                                    <input id="code" type="text" name="code" class="form-control">
                                                    <label style="color:red" id="code_error"></label>
                                                </div>
                                                <div class="mb-4 col-md-6">
                                                    <label class="form-label">Course Duration <span class="text-danger">*</span></label>
                                                    <input id="duration" type="text" name="duration" class="form-control">
                                                    <label style="color:red" id="duration_error"></label>
                                                </div>

                                                <div class="mb-4 col-md-6">
                                                    <label class="form-label">Status</label>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" role="switch"
                                                            id="status" name="status" value="1" checked>
                                                        <label class="form-check-label" for="status">Active</label>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--1 card-->

                            </div>
                        </div>
                        <!--fields row-->

                        <div class="col-12 text-end mt-3">
                            <button type="submit" class="btn btn-primary">Save Course</button>
                            <button type="button" class="btn btn-secondary me-2" onclick="window.location.href='{{ route('admin.courses.index') }}'">Cancel</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <!--1-->

    </div>
    <!--content-->

</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {

        $('#submit_Course').on('submit', function(e) {
            e.preventDefault();

        // Clear previous errors
            $('#course_name_error').text('');
            $('#code_error').text('');

            let course_name = $('input[name="course_name"]').val().trim();
            let code = $('input[name="code"]').val().trim();
            let status = $('input[name="status"]').is(':checked') ? 1 : 0;

        // Basic validation before sending request

// Required
            if (course_name === '') {
                $('#course_name_error').text('Course name is required');
                return;
            }

// Length
            if (course_name.length > 255) {
                $('#course_name_error').text('Course name must not exceed 255 characters');
                return;
            }

// Pattern (letters & spaces only)
            if (!/^[A-Za-z\s]+$/.test(course_name)) {
                $('#course_name_error').text('Only alphabets and spaces are allowed');
                return;
            }

// Required
            if (code === '') {
                $('#code_error').text('Course code is required');
                return;
            }

// Length
            if (code.length > 50) {
                $('#code_error').text('Course code must not exceed 50 characters');
                return;
            }

// Pattern (letters, numbers, hyphen & underscore only)
            if (!/^[A-Za-z0-9\-_]+$/.test(code)) {
                $('#code_error').text('Only letters, numbers, hyphen and underscore are allowed');
                return;
            }

            $.ajax({
            url: "{{ route('admin.courses.store') }}",  // your store route
            method: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                course_name: course_name,
                code: code,
                status: status
            },
            beforeSend: function() {
                Swal.fire({
                    title: 'Please wait...',
                    text: 'Submitting data...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
            },
            success: function(response) {
                Swal.close();

                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Course added successfully!',
                        confirmButtonText: 'OK',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ route('admin.courses.index') }}";
                        }
                    });
                } else {
                // Handle unexpected success responses
                    Swal.fire({
                        icon: 'success',
                        title: 'Added successfully!',
                        text: 'Redirecting...',
                        confirmButtonText: 'OK',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ route('admin.courses.index') }}";
                        }
                    });
                }
            },
            error: function(xhr) {
                Swal.close();

                if (xhr.status === 422) {
                    // Laravel validation errors
                    let errors = xhr.responseJSON.errors;
                    if (errors.course_name) {
                        $('#course_name_error').text(errors.course_name[0]);
                    }
                    if (errors.code) {
                        $('#code_error').text(errors.code[0]);
                    }
                } else {
                    Swal.fire('Error', 'Something went wrong while submitting.', 'error');
                }
            }
        });
        });

    });
</script>
@endpush