@extends('admin.layouts.master')

@section('title', 'Create Student')

@push('styles')
    {{-- SweetAlert2 --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <style>
        /* Your Existing Styles ... */
        :root {
            --primary: #4f46e5;
            --border-color: #e2e8f0;
            --bg-light: #f8fafc;
        }

        .form-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
        }

        .form-header {
            background: var(--bg-light);
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .form-section-title {
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 1rem;
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 0.5rem;
        }

        .form-label {
            font-weight: 500;
            color: #334155;
            font-size: 0.9rem;
            margin-bottom: 0.4rem;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            border-color: #cbd5e1;
            padding: 0.6rem 0.85rem;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

        .avatar-upload-box {
            width: 100px;
            height: 100px;
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #f8fafc;
            overflow: hidden;
            position: relative;
        }

        .avatar-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        /* --- Shake Animation --- */
        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translateX(-5px);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translateX(5px);
            }
        }

        .shake-effect {
            animation: shake 0.4s ease-in-out;
        }

        /* Optional: Force the file input error to show because it's custom */
        .text-error {
            color: #dc3545;
            font-size: 0.875em;
            margin-top: 0.25rem;
            display: none;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">

        {{-- Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h2 class="fw-bold text-dark m-0">Add New Student</h2>
                <p class="text-muted small m-0">Create a new student profile manually.</p>
            </div>
            <a href="{{ route('admin.students') }}" class="btn btn-light border">
                <i class="ri-arrow-left-line"></i> Back to List
            </a>
        </div>

        <form id="createStudentForm" enctype="multipart/form-data">
            @csrf

            <div class="row g-4">
                {{-- Left Column --}}
                <div class="col-lg-8">
                    <div class="form-card mb-4">
                        <div class="form-header">
                            <h6 class="m-0 fw-bold text-dark"><i class="ri-id-card-line me-1 text-primary"></i> Personal &
                                Login Information</h6>
                        </div>
                        <div class="p-4">
                            <div class="row g-3">
                                {{-- Name --}}
                                <div class="col-md-6">
                                    <label class="form-label required">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control"
                                        placeholder="e.g. John Doe">
                                    {{-- Replaced .text-error with .invalid-feedback --}}
                                    <div class="invalid-feedback" id="error-name"></div>
                                </div>

                                {{-- Email --}}
                                <div class="col-md-6">
                                    <label class="form-label required">Email Address <span
                                            class="text-danger">*</span></label>
                                    <input type="email" name="email" id="email" class="form-control"
                                        placeholder="john@example.com">
                                    <div class="invalid-feedback" id="error-email"></div>
                                </div>

                                {{-- Phone (Moved Here, Password Removed) --}}
                                <div class="col-md-6">
                                    <label class="form-label required">Phone Number <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="phone" id="phone" class="form-control"
                                        placeholder="+91 98765 43210">
                                    <div class="invalid-feedback" id="error-phone"></div>
                                    <small class="text-muted" style="font-size: 11px;">This will be used as the default
                                        password.</small>
                                </div>

                                {{-- Empty Div to keep grid alignment if needed, or let layout flow --}}
                                <div class="col-md-6"></div>

                                <div class="col-12 mt-4">
                                    <h6 class="form-section-title">Demographics</h6>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Date of Birth</label>
                                    <input type="date" name="dob" class="form-control">
                                    <div class="invalid-feedback" id="error-dob"></div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Gender</label>
                                    <select name="gender" class="form-select">
                                        <option value="">Select Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                        <option value="other">Other</option>
                                    </select>
                                    <div class="invalid-feedback" id="error-gender"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Address --}}
                    <div class="form-card">
                        <div class="form-header">
                            <h6 class="m-0 fw-bold text-dark"><i class="ri-map-pin-line me-1 text-primary"></i> Address
                                Details</h6>
                        </div>
                        <div class="p-4">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">Street Address</label>
                                    <textarea name="address" rows="2" class="form-control" placeholder="House No, Street Name"></textarea>
                                </div>
                                <div class="col-md-6"><label class="form-label">City</label><input type="text"
                                        name="city" class="form-control"></div>
                                <div class="col-md-6"><label class="form-label">State</label><input type="text"
                                        name="state" class="form-control"></div>
                                <div class="col-md-6"><label class="form-label">Country</label><input type="text"
                                        name="country" class="form-control"></div>
                                <div class="col-md-6"><label class="form-label">Zip Code</label><input type="text"
                                        name="zip_code" class="form-control"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right Column --}}
                <div class="col-lg-4">
                    {{-- Avatar --}}
                    <div class="form-card mb-4">
                        <div class="p-4 text-center">
                            <label class="form-label d-block mb-3">Profile Photo</label>
                            <div class="d-flex justify-content-center">
                                <label for="avatarInput" class="avatar-upload-box">
                                    <img id="avatarPreview" src="#" class="avatar-preview">
                                    <div id="avatarPlaceholder" class="text-muted">
                                        <i class="ri-camera-line fs-24"></i>
                                        <div class="small mt-1" style="font-size: 10px;">Upload</div>
                                    </div>
                                </label>
                                <input type="file" id="avatarInput" name="avatar" class="d-none" accept="image/*"
                                    onchange="previewImage(this)">
                            </div>
                            {{-- Custom class for this one since it's not directly under an input with form-control --}}
                            <div class="text-error text-center" id="error-avatar"></div>
                        </div>
                    </div>

                    {{-- IDs --}}
                    <div class="form-card mb-4">
                        <div class="form-header bg-primary bg-opacity-10">
                            <h6 class="m-0 fw-bold text-primary"><i class="ri-anchor-line me-1"></i> Maritime IDs</h6>
                        </div>
                        <div class="p-4">
                            <div class="mb-3">
                                <label class="form-label">INDOS Number</label>
                                <input type="text" name="indos_no" id="indos_no" class="form-control">
                                <div class="invalid-feedback" id="error-indos_no"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">CDC Number</label>
                                <input type="text" name="cdc_no" id="cdc_no" class="form-control">
                                <div class="invalid-feedback" id="error-cdc_no"></div>
                            </div>
                            <div class="mb-3"><label class="form-label">SID Number</label><input type="text"
                                    name="sid_no" class="form-control"></div>
                            <div class="mb-0"><label class="form-label">Passport Number</label><input type="text"
                                    name="passport_no" class="form-control"></div>
                        </div>
                    </div>

                    {{-- Status --}}
                    <div class="form-card">
                        <div class="p-4">
                            <div class="form-check form-switch d-flex align-items-center gap-2">
                                <input class="form-check-input" type="checkbox" name="is_active"
                                    id="flexSwitchCheckChecked" checked value="1">
                                <label class="form-check-label fw-bold text-dark" for="flexSwitchCheckChecked">Active
                                    Account</label>
                            </div>
                        </div>
                    </div>

                    {{-- Submit Buttons --}}
                    <div class="mt-4 d-grid gap-2">
                        <button type="submit" id="submitBtn" class="btn btn-primary py-2 fw-bold">
                            <span id="btnText"><i class="ri-save-line me-1"></i> Create Student</span>
                            <span id="btnLoader" style="display:none;"><span class="spinner-border spinner-border-sm"
                                    role="status"></span> Saving...</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Scripts --}}

@endsection
@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Image Preview Logic
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#avatarPreview').attr('src', e.target.result).show();
                    $('#avatarPlaceholder').hide();
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $(document).ready(function() {

            /**
             * Helper: Show Error on specific field
             * Applies Red Border (Bootstrap), Shake Animation, and Error Text
             */
            function showError(selector, message) {
                let input = $(selector);

                // If input doesn't exist (e.g. wrong name), stop
                if (input.length === 0) return;

                let errorDiv = $('#error-' + input.attr('name'));

                // 1. Add Bootstrap 'is-invalid' class (Red border & icon)
                input.addClass('is-invalid');

                // 2. Add Shake Animation
                input.addClass('shake-effect');

                // 3. Set Validation Message
                if (message && errorDiv.length) {
                    errorDiv.text(message);
                }

                // 4. Remove Shake class after animation (400ms) so it can replay
                setTimeout(function() {
                    input.removeClass('shake-effect');
                }, 400);
            }

            // Remove validation error immediately when user types/changes input
            $(document).on('input change', '.form-control, .form-select', function() {
                $(this).removeClass('is-invalid');
                let name = $(this).attr('name');
                $('#error-' + name).text(''); // Clear text
            });

            // Regex for Phone Validation
            function isValidPhone(phone) {
                const regex = /^(\+?\d{1,3}[- ]?)?\d{10}$/;
                return regex.test(phone);
            }

            // --- Form Submission ---
            $('#createStudentForm').on('submit', function(e) {
                e.preventDefault();

                // 1. Reset Previous Errors
                $('.form-control, .form-select').removeClass('is-invalid');
                $('.text-error').hide(); // Custom errors (avatar)
                $('.invalid-feedback').text(''); // Bootstrap errors

                let hasError = false;
                let firstErrorField = null; // To store the first field to focus on

                // 2. FRONTEND VALIDATION

                // Validate Name
                let name = $('#name');
                if (name.val().trim() === '') {
                    showError(name, 'Full Name is required');
                    if (!firstErrorField) firstErrorField = name;
                    hasError = true;
                }

                // Validate Email
                let email = $('#email');
                let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (email.val().trim() === '') {
                    showError(email, 'Email is required');
                    if (!firstErrorField) firstErrorField = email;
                    hasError = true;
                } else if (!emailRegex.test(email.val().trim())) {
                    showError(email, 'Enter a valid email address');
                    if (!firstErrorField) firstErrorField = email;
                    hasError = true;
                }

                // Validate Phone (Now Mandatory & Validated)
                let phone = $('#phone');
                if (phone.val().trim() === '') {
                    showError(phone, 'Phone number is required');
                    if (!firstErrorField) firstErrorField = phone;
                    hasError = true;
                } else if (!isValidPhone(phone.val().trim())) {
                    showError(phone, 'Invalid phone number format');
                    if (!firstErrorField) firstErrorField = phone;
                    hasError = true;
                }

                // If Frontend Validation Fails
                if (hasError) {
                    if (firstErrorField) {
                        firstErrorField.focus();
                        // Smooth scroll to the error
                        firstErrorField[0].scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }
                    return; // Stop Ajax
                }

                // 3. AJAX SUBMISSION
                let formData = new FormData(this);
                let submitBtn = $('#submitBtn');

                // UI Loading State
                submitBtn.prop('disabled', true);
                $('#btnText').hide();
                $('#btnLoader').show();

                $.ajax({
                    url: "{{ route('admin.students.store') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        // Reset UI
                        submitBtn.prop('disabled', false);
                        $('#btnText').show();
                        $('#btnLoader').hide();

                        // Success Alert
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            if (response.redirect) {
                                window.location.href = response.redirect;
                            } else {
                                // Optional: Reset form if staying on page
                                $('#createStudentForm')[0].reset();
                                $('#avatarPreview').hide();
                                $('#avatarPlaceholder').show();
                            }
                        });
                    },
                    error: function(xhr) {
                        // Reset UI
                        submitBtn.prop('disabled', false);
                        $('#btnText').show();
                        $('#btnLoader').hide();

                        // 4. BACKEND VALIDATION HANDLING
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let firstBackendError = null;

                            // Loop through Laravel Errors
                            $.each(errors, function(key, value) {
                                // 'value' is an array of messages, we take the first one [0]
                                let errorMessage = value[0];

                                // Handle Avatar specially (it's not a standard .form-control)
                                if (key === 'avatar') {
                                    $('#error-avatar').text(errorMessage).show();
                                    // We don't focus file inputs usually, but we could scroll to it
                                } else {
                                    // Select input by name attribute
                                    let inputSelector = '[name="' + key + '"]';
                                    let inputField = $(inputSelector);

                                    if (inputField.length > 0) {
                                        showError(inputField, errorMessage);

                                        // Capture the first error field we find
                                        if (!firstBackendError) {
                                            firstBackendError = inputField;
                                        }
                                    }
                                }
                            });

                            // Focus on the first invalid field from Backend
                            if (firstBackendError) {
                                firstBackendError.focus();
                                firstBackendError[0].scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'center'
                                });
                            }

                            // Optional Toast
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000
                            });
                            Toast.fire({
                                icon: 'error',
                                title: 'Please check the form errors.'
                            });

                        } else {
                            // General Server Error (500, etc)
                            Swal.fire('Error', 'Something went wrong. Please try again.',
                                'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush