@extends('layouts.training_centre_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" button="" backButton="true" />

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                @if ($batchDetails)
                    <form action="" id="assessment_form">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 col-12 mb-3">
                                <label for="batch_id" class="form-label">Batch <span class="text-danger">*</span></label>
                                <select name="batch_id" id="batch_id" class="form-input" required>
                                    <option value="">Select Batch</option>
                                    @foreach($batchDetails as $batch)
                                        <option value="{{ $batch->id }}">{{ $batch->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="assessment_name" class="form-label">Assessment Name <span class="text-danger">*</span></label>
                                <input type="text" name="assessment_name" id="assessment_name" class="form-input" placeholder="Enter assessment name" required />
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="assessment_date" class="form-label">Assessment Date <span class="text-danger">*</span></label>
                                <input type="date" name="assessment_date" id="assessment_date" class="form-input" required />
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="assessor" class="form-label">Assessor <span class="text-danger">*</span></label>
                                <input type="text" name="assessor" id="assessor" class="form-input" placeholder="Enter assessor name" required />
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="assessment_start_time" class="form-label">Assessment Start Time <span class="text-danger">*</span></label>
                                <input type="time" name="assessment_start_time" id="assessment_start_time" class="form-input" required />
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="assessment_end_time" class="form-label">Assessment End Time <span class="text-danger">*</span></label>
                                <input type="time" name="assessment_end_time" id="assessment_end_time" class="form-input" required />
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <label for="assessment_status" class="form-label">Assessment Status <span class="text-danger">*</span></label>
                                <select name="assessment_status" id="assessment_status" class="form-input" required>
                                    <option value="">Select Status</option>
                                    <option value="SCHEDULED">Scheduled</option>
                                </select>
                            </div>

                            <div class="col-12 mb-3">
                                <label for="assessment_description" class="form-label">Assessment Description</label>
                                <textarea name="assessment_description" id="assessment_description" rows="4" class="form-input" placeholder="Enter assessment description, instructions, or notes..."></textarea>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-outline">
                                Reset
                            </button>
                            <button type="submit" class="btn btn-primary">
                                Create Assessment
                            </button>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Reset form functionality
        document.querySelector('.btn-outline').addEventListener('click', function() {
            document.querySelector('form').reset();
        });

        // Validate end time is after start time
        const startTime = document.getElementById('assessment_start_time');
        const endTime = document.getElementById('assessment_end_time');

        function validateTimes() {
            if (startTime.value && endTime.value) {
                if (endTime.value <= startTime.value) {
                    endTime.setCustomValidity('End time must be after start time');
                } else {
                    endTime.setCustomValidity('');
                }
            }
        }

        startTime.addEventListener('change', validateTimes());
        endTime.addEventListener('change', validateTimes());
    });

    $(document).ready(function () {
        $('#assessment_form').validate({
            rules: {
                batch_id: "required",
                assessment_name: "required",
                assessment_date: "required",
                assessor: "required",
                assessment_start_time: "required",
                assessment_end_time: "required",
                assessment_status: "required",
                assessment_description: "required"
            },
            submitHandler: function (form) {
                let formData = new FormData(form);
                $.ajax({
                    url: "{{ route('training-centre.assessments.store') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            Swal.fire({
                                title: "Success",
                                text: response.message,
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                window.location.href = response.redirect_url;
                            })
                        }
                        else {
                            Swal.fire({
                                title: "Error!",
                                text: response.message || "Something went wrong. Please try again.",
                                icon: "error"
                            });
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorMessages = Object.values(errors).flat().join("<br>");
                            Swal.fire({
                                title: "Validation Error",
                                html: errorMessages,
                                icon: "error"
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                                icon: "error"
                            });
                        }
                    }
                })
            }
        })
    });

</script>
@endsection