@extends('layout', ['page' => 'student'])
@section('title', 'Add Student - ' . config('app.name'))

@section('content')
@if(isset($breadcrumb) && !empty($breadcrumb))
   @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
@endif

<section class="wrap">
    <div class="container">
        <div class="row">
            <div class="box-shadow">
                <div class="col-lg-12 col-md-12">
                    <div class="progress-container">
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" id="progressBar"></div>
                        </div>
                    </div>
                    <div class="candidates-resume-content">
                        <form
                            action="{{ route('user.add_student') }}"
                            method="post"
                            class="resume-info m-4"
                            id="student_registration_form"
                            enctype="multipart/form-data"
                        >
                            @csrf
                            <h3 id="stepTitle">Step 1: Session Details</h3>
                            <p><small>Please fill out the following fields.</small></p>

                            <input type="hidden" name="id" value="{{ $student->id ?? 0 }}">

                            <!-- Step 1: Session Details -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="session_date">Session Date</label>
                                            <input type="date" class="form-control boxss" name="session_date" id="session_date" value="{{ old('session_date', !empty($student->session_date) ? \Carbon\Carbon::parse($student->session_date)->format('Y-m-d') : '') }}" required>
                                            @error('session_date') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="course">Course</label>
                                            <select class="form-control boxss select2_single" name="course_id" required>
                                                <option value="">-- Select Course --</option>
                                                @foreach ($courses as $course)
                                                    <option value="{{ $course->id }}" 
                                                            data-student-course="{{ $course->amount }}" 
                                                            data-franchisee-course="{{ $course->franchisee_amount }}"
                                                            @if(!empty($student->course_id) && $student->course_id == $course->id) selected @endif>
                                                        {{ $course->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('course_id') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary btn-style" onclick="nextStep(0)">Next</button>
                                </div>
                            </div>

                            <!-- Step 2: Personal Details -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Name on Certificate</label>
                                            <input type="text" class="form-control boxss" name="name" value="{{ old('name', $student->name ?? '') }}" required>
                                            @error('name') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Father's Name</label>
                                            <input type="text" class="form-control boxss" name="father_name" value="{{ old('father_name', $student->father_name ?? '') }}" required>
                                            @error('father_name') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="mother_name">Mother's Name</label>
                                            <input class="form-control boxss charector" type="text" name="mother_name" id="mother_name" placeholder="Mother's Name" value="{{ old('mother_name', $student->mother_name ?? '') }}" required>
                                            @error('mother_name')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                     <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="gender">Gender</label>
                                            <select class="form-control boxss select2_single" name="gender" id="gender" required>
                                                <option value="">Select Gender</option>
                                                <option value="male" @if($student?->gender == 'male') selected @endif>Male</option>
                                                <option value="female" @if($student?->gender == 'female') selected @endif>Female</option>
                                                <option value="other" @if($student?->gender == 'other') selected @endif>Other</option>
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('gender')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="dob">Date of Birth</label>
                                            <input class="form-control boxss charector" type="date" name="dob" id="dob" placeholder="DOB" value="{{ old('dob', $student?->dob->format('Y-m-d') ?? '') }}" required>
                                            @error('dob')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="mobile">Contact No.</label>
                                            <input class="form-control boxss charector"  type="number" name="mobile" id="mobile" placeholder="Contact No." value="{{ old('mobile', $student->mobile ?? '') }}" required>
                                            @error('mobile')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2"style="margin-top: 10px;">
                                        <div class="form-group">
                                            <label for="email">Email ID </label>
                                            <input class="form-control boxss"type="email" name="email" id="email" placeholder="Email" value="{{ old('email', $student->email ?? '') }}" required>
                                            @error('email')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-secondary btn-style" onclick="prevStep()">Previous</button>
                                    <button type="button" class="btn btn-primary btn-style" onclick="nextStep(1)">Next</button>
                                </div>
                            </div>

                            <!-- Step 3: Address Details -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="state">State</label>
                                            <select class="form-control boxss select2_single" id="state-dropdown" name="state" required>
                                                <option value="">-- Select State --</option>
                                                @foreach ($states as $state)
                                                <option value="{{$state->id}}" @if(!empty($student) && $student->state == $state->id) selected @endif>
                                                    {{$state->name}}
                                                </option>
                                                @endforeach
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('state')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <select class="form-control boxss select2_single" name="city" id="city-dropdown" required></select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('city')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="pincode">Pincode</label>
                                            <input class="form-control boxss number_only" type="number" name="pincode" id="pincode" placeholder="pincode" value="{{ old('pincode', $student->pincode ?? '') }}" required>
                                            @error('pincode')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <textarea class="form-control boxss charector"  name="address" id="address" placeholder="Address" required>{{ old('address', $student->address ?? '') }}</textarea>

                                            @error('address')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-secondary btn-style" onclick="prevStep()">Previous</button>
                                    <button type="button" class="btn btn-primary btn-style" onclick="nextStep(2)">Next</button>
                                </div>
                            </div>

                             <!-- Step 4: Document Uploads -->
                            <div class="step">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="photo">Passport Photo</label>
                                            <input type="file" name="photo" id="photo" placeholder="photo" value="{{ old('photo', $student?->photo ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$student?->photo) required @endif>

                                            @if($student?->photo)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->photo) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->photo) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('photo')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Signature</label>
                                            <input type="file" name="stud_sign" id="stud_sign" placeholder="signature" value="{{ old('stud_sign', $student?->stud_sign ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$student?->stud_sign) required @endif>

                                            @if($student?->stud_sign)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->stud_sign) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->stud_sign) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('stud_sign')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>10th Marksheet</label>
                                            <input type="file" name="marksheet_10" id="marksheet_10" placeholder="marksheet_10" value="{{ old('marksheet_10', $student?->marksheet_10 ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" @if(!$student?->marksheet_10) required @endif>

                                            @if($student?->marksheet_10)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->marksheet_10) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->marksheet_10) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('marksheet_10')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>12th Marksheet (Optional)</label>
                                            <input type="file" name="marksheet_12" id="marksheet_12" placeholder="marksheet_12" value="{{ old('marksheet_12', $student?->marksheet_12 ?? '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg">

                                            @if($student?->marksheet_12)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $student->marksheet_12) }}" target="_blank">
                                                        <img src="{{ asset('storage/' . $student->marksheet_12) }}" alt="Banner" style="width: 30px; height: 30px; object-fit: cover; border: 1px solid #ccc;">
                                                    </a>
                                                </div>
                                            @endif
                                            @error('marksheet_12')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="stud_caste">Caste Category</label>
                                            <select class="form-control boxss select2_single" name="stud_caste" id="stud_caste" required>
                                                <option value="">Select </option>
                                                <option value="general" @if($student?->stud_caste == 'general') selected @endif>General</option>
                                                <option value="sc" @if($student?->stud_caste == 'sc') selected @endif>SC</option>
                                                <option value="st" @if($student?->stud_caste == 'st') selected @endif>ST</option>
                                                <option value="obc" @if($student?->stud_caste == 'obc') selected @endif>OBC</option>
                                            </select>
                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('stud_caste')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2" id="upload_document">
                                        <div class="form-group">
                                             <label for="documents">Other Documents</label>
                                            <input type="file" class="form-control boxss"name="documents[]" id="documents" multiple placeholder="Upload Document" accept=".jpg,.png,.jpeg">
                                           @if(!empty($student?->documents) && !empty($student->documents))
                                                <div class="mt-2 d-flex">
                                                    @foreach($student->documents as $file)
                                                        <a href="{{ asset('storage/' . $file) }}" target="_blank" class="d-block text-primary">
                                                            <img src="{{ asset('storage/' . $file) }}" alt="Document" style="width: 30px; height: 30px; object-fit: cover; margin-right: 5px; border: 1px solid #ccc;">
                                                        </a>
                                                    @endforeach
                                                </div>
                                            @endif

                                            @error('documents.*')
                                            <span class="text-danger mt-2">{{ $message }}</span><br>
                                            @enderror
                                            <small class="text-muted">Only image and multiple files are allowed (ex Aadhar, PAN Card, Certificates and etc.).</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-secondary" onclick="prevStep()">Previous</button>
                                    <button type="submit" class="btn btn-primary my-4">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('js')
<script>
    let currentStep = 0;
    const steps = document.querySelectorAll(".step");
     const progressBar = document.getElementById("progressBar");

    function showStep(index) {
        let state = document.getElementById("state-dropdown");
        steps.forEach((step, i) => {
            step.style.display = i === index ? "block" : "none";
            if (state.value) {

            }
        });
        progressBar.style.width = `${((index + 1) / steps.length) * 100}%`;

        // Update step title dynamically
        const stepTitles = [
            "Step 1: Session Details",
            "Step 2: Personal Details",
            "Step 3: Address Details",
            "Step 4: Documents Details",
        ];
        document.getElementById('stepTitle').textContent = stepTitles[index];
    }

    function validateStep(stepIndex) {
        const currentFields = steps[stepIndex].querySelectorAll("input, select");
        let isValid = true;

        for (let i = 0; i < currentFields.length; i++) {
            const field = currentFields[i];
            const fieldName = field.getAttribute("name");
            const fieldValue = field.value.trim();

            // Check if the field is required and empty
            if (field.hasAttribute("required") && !fieldValue) {
                toastr.error(`${fieldName.replace("_", " ")} is required.`);
                field.focus();
                isValid = false;
                break;
            }

            if (!field.checkValidity()) {
                isValid = false;
                field.reportValidity();
                field.focus();
                break;
            }

            // Custom validations
            switch (fieldName) {
                case "course_id":
                    let userBalance = {{ auth()->user()->balance ?? 0 }};
                    let treatAs = "{{ request()->cookie('treatAs') }}";
                    let selectedOption = document.querySelector(`select[name="course_id"] option:checked`);

                    if (selectedOption) {
                        let courseAmount = treatAs == "student" 
                            ? selectedOption.getAttribute("data-student-course") 
                            : selectedOption.getAttribute("data-franchisee-course");

                        courseAmount = parseFloat(courseAmount) || 0;

                        if (userBalance < courseAmount) {
                            toastr.error("Insufficient balance to enroll in this course.");
                            field.focus();
                            isValid = false;
                        }
                    }
                    break;
                case "session_date":
                case "dob":
                    if (fieldValue && isNaN(Date.parse(fieldValue))) {
                        toastr.error(`Invalid date format in ${fieldName.replace("_", " ")}`);
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;

                case "name":
                case "father_name":
                case "mother_name":
                    if (fieldValue.length < 3 || fieldValue.length > 255) {
                        toastr.error(`${fieldName.replace("_", " ")} must be between 3 and 255 characters`);
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;

                case "mobile":
                    if (!/^[6-9]\d{9}$/.test(fieldValue)) {
                        toastr.error("Mobile number must start with 6-9 and be 10 digits long.");
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;

                case "pincode":
                    if (!/^\d{6}$/.test(fieldValue)) {
                        toastr.error("Pincode must be exactly 6 digits.");
                        field.focus();
                        isValid = false;
                        break;
                    }
                    break;
            }
        }

        return isValid;
    }

    function nextStep(stepIndex) {
        if (validateStep(stepIndex)) {
            if (currentStep < steps.length - 1) {
                currentStep++;
                showStep(currentStep);
            }
        }
    }

    function prevStep() {
        if (currentStep > 0) {
            currentStep--;
            showStep(currentStep);
        }
    }

    showStep(currentStep);
    $(document).ready(function () {
        function loadCities(idState, selectedCity = '') {
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ url('api/fetch-cities') }}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city-dropdown').html('<option value="">-- Select City --</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city-dropdown").append('<option value="' + value.id + '"' + (value.id == selectedCity ? ' selected' : '') + '>' + value.name + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error here
                }
            });
        }

        // Trigger city loading on state change
        $('#state-dropdown').on('change', function () {
            let idState = this.value;
            loadCities(idState);
        });

        // if a state is already selected
        @if(!empty($student) && $student->state)
        loadCities("{{ $student->state }}", "{{ $student->city ?? '' }}");
        @endif
    });
</script>
@endpush