@extends('layouts.partner_layout')

@section('content')
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<main>
    <div class="auth-main w-100">
        <div class="container">
            <div class="auth-card p-0">
                <div class="card card-body px-4 py-4 rounded-0 border-0 shadow-sm">
                    <div class="text-center">
                            <h5> Training Centre Registration Form</h5>
                            <p class="text-danger">
                                <i class="fa fa-info-circle"></i> Fields marked with (*) are mandatory. Please ensure all information is accurate before submission.
                            </p>
                        </div>
                       

                    <form id="centerForm" method="POST" autocomplete="off">
                        @csrf
                        <div class="row g-3">

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="centre_name">Training Centre Name <span class="text-danger">*</span></label>
                                <input type="text" name="centre_name" id="centre_name" class="form-control form-input" required>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="year_established">Year Established</label>
                                <input type="number" name="year_established" id="year_established" class="form-control form-input" min="1900" max="2024">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="director_name">Director/Head Name <span class="text-danger">*</span></label>
                                <input type="text" name="director_name" id="director_name" class="form-control form-input" required>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="official_email">Official Email <span class="text-danger">*</span></label>
                                <input type="email" name="official_email" id="official_email" class="form-control form-input" required>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="primary_phone">Mobile Number <span class="text-danger">*</span></label>
                                <input type="tel" name="primary_phone" id="primary_phone" class="form-control form-input" required pattern="[6-9]{1}[0-9]{9}" maxlength="10" title="Enter a valid 10-digit number starting with 6-9">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="alternate_phone">Alternate Phone Number</label>
                                <input type="tel" name="alternate_phone" id="alternate_phone" class="form-control form-input" pattern="[6-9]{1}[0-9]{9}" maxlength="10" title="Enter a valid 10-digit number starting with 6-9">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="website">Website</label>
                                <input type="url" name="website" id="website" class="form-control form-input">
                            </div>

                            <div class="col-12 mt-4">
                                <h5 class="section-title mb-3">Address Information</h5>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="complete-address">Complete Address <span class="text-danger">*</span></label>
                                <textarea id="complete-address" name="complete-address" class="form-control form-input" rows="3" required placeholder="Enter your complete address"></textarea>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="state">State <span class="text-danger">*</span></label>
                                <select id="state" name="state" class="form-control form-input" required>
                                    <option value="">Select State</option>
                                    @foreach ($states as $state)
                                        <option value="{{ $state->state_code }}">{{ $state->state_name_en }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="district">District <span class="text-danger">*</span></label>
                                <input type="hidden" id="hidden_district" value="">
                                <select id="district" name="district" class="form-control form-input" required>
                                    <option value="">Select District</option>
                                </select>
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="address_city">City <span class="text-danger">*</span></label>
                                <input type="text" id="address_city" name="address_city" class="form-control form-input" required placeholder="Enter your city">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="address_pincode">PIN Code <span class="text-danger">*</span></label>
                                <input type="text" id="address_pincode" name="address_pincode" class="form-control form-input" pattern="[0-9]{6}" maxlength="6" required placeholder="6-digit PIN code">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="landmark">Landmark</label>
                                <input type="text" id="landmark" name="landmark" class="form-control form-input" placeholder="Enter Landmark">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="longitude">Longitude <span class="text-danger">*</span></label>
                                <input type="number" id="longitude" name="longitude" class="form-control form-input" required placeholder="Enter Longitude" min="-180" max="180" step="any">
                            </div>

                            <div class="col-md-4 col-sm-6 col-12">
                                <label class="form-label" for="latitude">Latitude <span class="text-danger">*</span></label>
                                <input type="number" id="latitude" name="latitude" class="form-control form-input" required placeholder="Enter Latitude" min="-90" max="90" step="any">
                            </div>

                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary py-3">
                                <i class="fa fa-paper-plane"></i> Submit
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('pages-scripts')
<script>
    $(document).ready(function () {
        initializeFormValidation();
        bindEvents();
    });

    $.validator.addMethod("pattern", function(value, element, param) {
        if (this.optional(element)) {
            return true;
        }
        if (typeof param === "string") {
            param = new RegExp(param);
        }
        return param.test(value);
    }, "Invalid format.");

    function initializeFormValidation() {
        $('#centerForm').validate({
            rules: {
                centre_name: { required: true },
                director_name: { required: true },
                official_email: {
                    required: true,
                    email: true
                },
                primary_phone: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10,
                    pattern: /^[6-9]\d{9}$/  
                },
                alternate_phone: {
                    digits: true,
                    minlength: 10,
                    maxlength: 10,
                    pattern: /^[6-9]\d{9}$/  
                },
                'complete-address': {
                    required: true,
                    minlength: 10
                },
                state: { required: true },
                district: { required: true },
                address_city: {
                    required: true,
                    minlength: 2
                },
                address_pincode: {
                    required: true,
                    digits: true,
                    minlength: 6,
                    maxlength: 6
                },
                longitude: {
                    required: true,
                    number: true,
                    min: -180,
                    max: 180
                },
                latitude: {
                    required: true,
                    number: true,
                    min: -90,
                    max: 90
                }
            },
            messages: {
                centre_name: "Please enter the training centre name",
                director_name: "Please enter the director or head name",
                official_email: "Please enter a valid email address",
                primary_phone: "Enter a valid 10-digit mobile number starting with 6-9",
                alternate_phone: "Enter a valid 10-digit mobile number starting with 6-9",
                'complete-address': "Please enter your complete address (minimum 10 characters)",
                state: "Please select a state",
                district: "Please select a district",
                address_city: "Please enter your city (minimum 2 characters)",
                address_pincode: "Enter a valid 6-digit PIN code",
                longitude: "Enter a valid longitude (-180 to 180)",
                latitude: "Enter a valid latitude (-90 to 90)"
            },
            submitHandler: function (form, event) {
                event.preventDefault();

                Swal.fire({
                    title: 'Are you sure?',
                    text: 'Do you want to create centre registration?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Submit',
                    cancelButtonText: 'Cancel',
                    allowOutsideClick: false,
                    allowEscapeKey: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        submitCenterForm(event);
                    }
                });
            }
        });
    }

    function bindEvents() {
        $('#primary_phone, #alternate_phone, #address_pincode').on('input', function () {
            this.value = this.value.replace(/\D/g, '').slice(0, this.maxLength);
        });
    }

    // Auto-fetch districts
    $(document).on('click', '#state', function () {
        let stateCode = $(this).val();
        getDistrictsByState(stateCode, 'district', '');
    });

    function submitCenterForm(event) {
        event.preventDefault();
        const formElement = document.getElementById('centerForm');
        const formData = new FormData(formElement);

        $.ajax({
            url: "{{ route('center.registration.store') }}",
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                showLoader();
            },
            success: function (response) {
                hideLoader();

                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Registration Successful!',
                        text: response.message + ' Do you want to add another registration?',
                        showCancelButton: true,
                        confirmButtonText: 'Add More',
                        cancelButtonText: 'No',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.reload();
                        } else {
                            window.location.href = "{{ route('centre.created.list') }}";
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Registration Failed',
                        text: response.message || 'An error occurred during registration.',
                        showConfirmButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    });
                }
            },
            error: function (xhr) {
                hideLoader();

                let message = 'An error occurred. Please try again.';

                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessages = [];
                    Object.keys(errors).forEach(function (field) {
                        errors[field].forEach(function (msg) {
                            errorMessages.push(`<b>${field}</b>: ${msg}`);
                        });
                    });
                    message = errorMessages.join('<br>');
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Failed',
                        html: message,
                        showConfirmButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    });
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: message,
                        showConfirmButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: message,
                        showConfirmButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    });
                }
            }
        });
    }

    function showLoader() {
        Swal.fire({
            title: 'Processing...',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading();
            }
        });
    }

    function hideLoader() {
        Swal.close();
    }
</script>
@endsection