@extends('layout.layout')

@section('content')
    @include('components.alert')
    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="{{ $mode === 'create' ? 'Add Student' : 'Edit Student' }}"
                    description="{{ $mode === 'create' ? 'Create a new student profile and complete the required details.' : 'Update the student profile and keep the academic details up to date.' }}"
                />

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Student Details</h6>
                            <p class="mb-0 ui-muted">Fill in the student information below and save your changes when you are ready.</p>
                        </div>
                    </div>

                    <div class="p-3 p-md-4">
                        <form class="form" action="{{ $mode === 'create' ? route('students.store') : route('students.update', $student->id) }}"
                            method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
                            @csrf
                            @method($mode === 'create' ? 'POST' : 'PUT')

                            <div class="tab-content" id="studentTabsContent">
                                @include('dashboard.academics.student.tabs.basic_info')
                            </div>

                            <div class="d-flex flex-wrap gap-2 justify-content-end mt-4">
                                <a href="{{ route('students.index') }}" class="asset-btn asset-btn--secondary">Cancel</a>
                                @if ($mode === 'create')
                                    <button type="submit" class="asset-btn asset-btn--primary">Submit</button>
                                @else
                                    <button type="submit" class="asset-btn asset-btn--primary">Update</button>
                                @endif
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .select2-container {
            display: block !important;
        }

        span {
            display: block !important;
        }

        .nav-pills .nav-link {
            padding: 10px !important;
            border-radius: 15px !important;
        }

        .custom-nav-link {
            background-color: #f2f2f2 !important;
            color: #303030 !important;
            margin-top: 5px !important;
            font-weight: 500 !important;
        }

        .custom-nav-link.active {
            background-color: #8a8a8a !important;
            color: #fff !important;
            margin-top: 5px !important;
            font-weight: 500 !important;
        }

        @media (min-width: 768px) {
            .col-md-1 {
                flex: 0 0 auto !important;
                width: 2% !important;
            }
        }


        .select2-container--default .select2-selection--single {
            height: 44px !important;
            width: 100% !important;
        }

        .iti {
            position: relative;
            display: block !important;
        }

        .iti__country {
            padding: 5px;
            display: flex;
            align-content: center;
            align-items: center;
        }

        .iti__country-list {
            white-space: wrap !important;
            width: 275px !important;
        }

        #mobile,
        #another_mobile {}
    </style>
@endpush

@push('scripts')
    <script>
        var $locale = '{{ app()->getLocale() }}';

        $(document).ready(function() {

            $('#student_photo').on('change', function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#studentImageShow').removeClass('d-none').attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
  
            const mobileInput = document.querySelector("#mobile");
            const mobileCountryCodeInput = document.querySelector("#mobile_country_code");
            const mobileDialCodeInput = document.querySelector("#mobile_dial_code");

            const mobileIti = intlTelInput(mobileInput, {
                initialCountry: mobileCountryCodeInput.value ? mobileCountryCodeInput.value.toLowerCase() :
                    "eg",
                separateDialCode: true,
                formatOnDisplay: false,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
            });

            const anotherMobileInput = document.querySelector("#another_mobile");
            const anotherMobileCountryCodeInput = document.querySelector("#another_mobile_country_code");
            const anotherMobileDialCodeInput = document.querySelector("#another_mobile_dial_code");

            const anotherMobileIti = intlTelInput(anotherMobileInput, {
                initialCountry: anotherMobileCountryCodeInput.value ? anotherMobileCountryCodeInput.value
                    .toLowerCase() : "eg",
                separateDialCode: true,
                formatOnDisplay: false,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
            });

            function getCleanNumber(iti) {
                let fullNumber = iti.getNumber(intlTelInputUtils.numberFormat.E164); // +14844760143
                return fullNumber.replace(/\D/g, '');
            }


            function updateFields(input, countryCodeInput, dialCodeInput, iti) {
                if (input.value.trim()) {
                    countryCodeInput.value = iti.getSelectedCountryData().iso2.toUpperCase();
                    dialCodeInput.value = '+' + iti.getSelectedCountryData().dialCode;
                } else {
                    countryCodeInput.value = '';
                    dialCodeInput.value = '';
                }
            }


            mobileInput.addEventListener('input', function() {
                updateFields(mobileInput, mobileCountryCodeInput, mobileDialCodeInput, mobileIti);
            });

            anotherMobileInput.addEventListener('input', function() {
                updateFields(anotherMobileInput, anotherMobileCountryCodeInput, anotherMobileDialCodeInput,
                    anotherMobileIti);
            });

            const form = document.querySelector('form');
            form.addEventListener('submit', function() {
                updateFields(mobileInput, mobileCountryCodeInput, mobileDialCodeInput, mobileIti);
                updateFields(anotherMobileInput, anotherMobileCountryCodeInput, anotherMobileDialCodeInput,
                    anotherMobileIti);
            });

            if (mobileInput.value && mobileCountryCodeInput.value) {
                mobileIti.setNumber(mobileInput.value);
            }

            if (anotherMobileInput.value && anotherMobileCountryCodeInput.value) {
                anotherMobileIti.setNumber(anotherMobileInput.value);
            }
        });
    </script>
@endpush