@extends('layouts.training_centre_layout')

@section('content')

    <x-page-header title="{{ $pageTitle }}" :backButton="true" />

    @php
        $addDetails =
            '<button type="button" class="btn btn-primary btn-sm" id="openTrainersModal">Add Details</button>';
    @endphp
    <!-- [ Page Header ] start -->
    <x-page-header  :button="$addDetails" />

    <!-- [ Page Header ] end -->
    <div class="row">
        <div class="col-12">
            <!-- List -->
            <x-centre.trainers-card  :trainers="$trainers"  />
        </div>
    </div>

    {{-- Modal --}}
    <x-centre.add-trainers-detail-modal  :trainers="$trainers" :qualifications="$qualifications"   />
@endsection

@section('pages-scripts')

<script>
$(document).ready(function () {

    // Open trainer modal
    $(document).on('click', '#openTrainersModal', function() {
        $('#trainerModal').modal('show');
    });

    // ----------------------------
    // Client-side validation
    // ----------------------------
    function validateField(input) {
        let value = input.val();
        let isValid = true;

        input.removeClass('is-invalid');
        input.next('.text-danger').remove();

        // Required validation
        if (input.prop('required') && (!value || value.trim() === '')) {
            isValid = false;
            input.addClass('is-invalid');
            input.after('<small class="text-danger d-block mt-1">This field is required.</small>');
        }

        // Number validation
        if (input.attr('type') === 'number' && value !== '') {
            if (isNaN(value) || parseInt(value) < parseInt(input.attr('min') || 0)) {
                isValid = false;
                input.addClass('is-invalid');
                input.after('<small class="text-danger d-block mt-1">Enter a valid number.</small>');
            }
        }

        // Email validation
        if (input.attr('type') === 'email' && value !== '') {
            let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(value)) {
                isValid = false;
                input.addClass('is-invalid');
                input.after('<small class="text-danger d-block mt-1">Enter a valid email address.</small>');
            }
        }

        // Date validation
        if (input.attr('type') === 'date' && value !== '') {
            let date = new Date(value);
            if (isNaN(date.getTime())) {
                isValid = false;
                input.addClass('is-invalid');
                input.after('<small class="text-danger d-block mt-1">Enter a valid date.</small>');
            }
        }

        // File validation
        if (input.attr('type') === 'file' && value !== '') {
            let accept = input.attr('accept');
            if (accept) {
                let allowed = accept.split(',');
                let fileExt = value.split('.').pop().toLowerCase();
                let valid = allowed.some(a => a.includes(fileExt) || a === 'image/*' || a === 'application/pdf');
                if (!valid) {
                    isValid = false;
                    input.addClass('is-invalid');
                    input.after('<small class="text-danger d-block mt-1">Invalid file type.</small>');
                }
            }
        }

        return isValid;
    }

    // Validate fields on input/change
    $('#trainer_form input').on('input change', function() {
        validateField($(this));
    });

    // ----------------------------
    // Form submit with confirmation
    // ----------------------------
    $(document).on('submit', '#trainer_form', function (e) {
        e.preventDefault();

        let allValid = true;

        // Validate all inputs
        $('#trainer_form input').each(function() {
            if (!validateField($(this))) allValid = false;
        });

        if (!allValid) {
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: 'Please fix the errors highlighted in the form.',
                confirmButtonText: 'Ok'
            });
            return;
        }

        // Confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: "Do you want to save this trainer's details?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, save it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                let formData = new FormData($('#trainer_form')[0]);

                $.ajax({
                    url: $('#trainer_form').attr('action'),
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        Swal.fire({
                            icon: response.success ? 'success' : 'error',
                            title: response.success ? 'Success!' : 'Error!',
                            text: response.message || (response.success ? 'Trainer added successfully.' : 'Something went wrong.'),
                            confirmButtonText: 'Ok'
                        }).then(() => {
                            if (response.success) {
                                $('#trainerModal').modal('hide');
                                location.reload();
                            }
                        });
                    },
                    error: function (xhr) {
                        if(xhr.status === 422) {
                            // Server validation errors
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function (key, value) {
                                let inputField = $('[name="'+key+'"]');
                                inputField.addClass('is-invalid');
                                inputField.next('.text-danger').remove();
                                inputField.after('<small class="text-danger d-block mt-1">'+value[0]+'</small>');
                            });

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please correct the highlighted errors.',
                                confirmButtonText: 'Ok'
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message || 'Something went wrong.',
                                confirmButtonText: 'Ok'
                            });
                        }
                    }
                });

            }
        });

    });

});
</script>
@endsection