@extends('backend.layouts.app')
@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
@endpush
@section('content')
    <div class="card page-container" id="page-container">
        <div class="card-body p-lg-25 content-wrap">
            <div class="toolbar" id="kt_toolbar">
                <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                    <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                        data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                        class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                        <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">{{ TranslationManager::translate($page_name) }}</h1>
                        <span class="h-20px border-gray-200 border-start mx-4"></span>
                        <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.index') }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Home') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">{{ TranslationManager::translate('Students') }}</li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-dark">{{ TranslationManager::translate($page_name) }}</li>
                        </ul>
                    </div>
                    <div class="d-flex align-items-center py-1">
                        <a href="{{ route('admin.students.index') }}" class="btn btn-sm btn-primary">{{ TranslationManager::translate('Back') }}</a>
                    </div>
                </div>
            </div>
            <!--begin::Layout-->
            <div class="flex-column flex-lg-row">
                <form action="{{ $action }}" class="form" method="POST" id="kt_careers_form"
                    enctype='multipart/form-data'>
                    @csrf
                    @if ($method == 'PUT')
                        @method('put')
                    @endif

                    <div class="row">
                        <div class="col-md-6 fv-row mb-5" dir="rtl">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Name By Arabic', 'ar') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->getTranslation('name', 'ar') }}"
                                placeholder="{{ TranslationManager::translate('Name By Arabic', 'ar') }}" name="name[ar]" />
                        </div>

                        <div class="col-md-6 fv-row mb-5" dir="ltr">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Name By English', 'en') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->getTranslation('name', 'en') }}"
                                placeholder="{{ TranslationManager::translate('Name By English', 'en') }}" name="name[en]" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('Job') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->job }}"
                                placeholder="{{ TranslationManager::translate('Job') }}" name="job" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Birth Date') }}</label>
                            <input type="date" class="form-control form-control-solid" value="{{ $user->birth_date }}"
                                placeholder="{{ TranslationManager::translate('Birth Date') }}" name="birth_date" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Scientific Degree') }}</label>
                            <select class="form-select form-select-solid" data-control="select2"
                                data-hide-search="false" name="scientific_degree_id">
                                <option value="" selected disabled>{{ TranslationManager::translate('Choose Scientific Degree') }}</option>
                                @foreach ($scientific_degrees as $scientific_degree)
                                    <option value="{{ $scientific_degree->id }}"
                                        {{ ($scientific_degree->id == $user->scientific_degree_id) ? 'selected' : '' }}>
                                        {{ $scientific_degree->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Specialization') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->specialization }}"
                                placeholder="{{ TranslationManager::translate('Specialization') }}" name="specialization" />
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Accrediting Authority') }}</label>
                            <select class="form-select form-select-solid" data-control="select2"
                                data-hide-search="false" name="accrediting_authority_id">
                                <option value="" selected disabled>{{ TranslationManager::translate('Choose Accrediting Authority') }}</option>
                                @foreach ($accrediting_authorities as $accrediting_authority)
                                    <option value="{{ $accrediting_authority->id }}"
                                        {{ ($accrediting_authority->id == $user->accrediting_authority_id) ? 'selected' : '' }}>
                                        {{ $accrediting_authority->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Email') }}</label>
                            <input type="email" class="form-control form-control-solid" value="{{ $user->email }}"
                                placeholder="{{ TranslationManager::translate('Please Enter Email') }}" name="email" />
                        </div>

                        <div class="col-md-6 fv-row mb-5" dir="rtl">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Phone Number') }}</label>
                            <div class="input-group input-group-solid">
                                <input id="phone" type="tel"
                                    class="form-control form-control-solid" value="{{ $user->phone }}"
                                    placeholder="{{ TranslationManager::translate('Phone Number') }}" />
                            </div>

                            <input type="text" name="country_code" id="country_code" value="{{ $user->country_code }}" />
                            <input type="text" name="phone" id="phone_only" value="{{ $user->phone }}" />
                        </div>

                        
                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2" for="country_id">{{ TranslationManager::translate('Country') }}</label>
                            <select class="form-control form-control-solid" data-control="select2"
                                data-hide-search="false" name="country_id" id="country_id">
                                <option value="" selected disabled>{{ TranslationManager::translate('Choose Country') }}</option>
                                @foreach ($countries as $country)
                                    <option {{ (isset($user) && $user->country_id == $country->id) ? 'selected' : '' }} value="{{ $country->id }}">{{ $country->name }}</option>
                                @endforeach
                            </select>                            
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('City') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->city }}"
                                placeholder="{{ TranslationManager::translate('City') }}" name="city" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('District') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->district }}"
                                placeholder="{{ TranslationManager::translate('District') }}" name="district" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Address') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->address }}"
                                placeholder="{{ TranslationManager::translate('Address') }}" name="address" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Nationality') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->nationality }}"
                                placeholder="{{ TranslationManager::translate('Nationality') }}" name="nationality" />
                        </div>
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Marketing Coordinator') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $user->marketing_coordinator }}"
                                placeholder="{{ TranslationManager::translate('Marketing Coordinator') }}" name="marketing_coordinator" />
                        </div>
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 fv-row">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Image') }}</label>
                            <input type="file" class="form-control form-control-solid" name="image" />
                        </div>
                        @if ($user->id)
                            <div class="col-md-6 fv-row">
                                <img src="{{ $user->getAvatar() }}" alt="" width="100px">
                            </div>
                        @endif
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 fv-row">
                            <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('National ID Image') }}</label>
                            <input type="file" class="form-control form-control-solid" name="national_id_image" />
                        </div>
                        @if ($user->getNationalIdImage())
                            <div class="col-md-6 fv-row">
                                <a href="{{ $user->getNationalIdImage() }}" target="_blank" class="btn btn-primary mt-8">
                                    {{ TranslationManager::translate('View') }}
                                </a>
                            </div>
                        @endif
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('Password') }}</label>
                            <input type="password" class="form-control form-control-solid" value=""
                                placeholder="{{ TranslationManager::translate('Please Enter Password') }}" name="password" />
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('Password Confirmation') }}</label>
                            <input type="password" class="form-control form-control-solid" value=""
                                placeholder="{{ TranslationManager::translate('Please Enter Password') }}" name="password_confirmation" />
                        </div>
                    </div>

                    <div class="separator mb-8"></div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-light-primary ">
                            <span>{{ TranslationManager::translate('Submit') }}</span>
                        </button>
                        <a href="{{ route('admin.students.index') }}" class="btn btn-light-danger">
                            <span>{{ TranslationManager::translate('Cancel') }}</span>
                        </a>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script>
<script>
    const input = document.querySelector("#phone");
    const countryCodeField = document.getElementById("country_code");
    const phoneOnlyField = document.getElementById("phone_only");

    const iti = window.intlTelInput(input, {
        separateDialCode: true,
        localization: "ar"
    });

    // جلب الدولة من كود الاتصال مثل "+20"
    const savedCode = "{{ $user->country_code }}".replace("+", "");
    const allCountries = window.intlTelInputGlobals.getCountryData();
    const country = allCountries.find(c => c.dialCode === savedCode);

    if (country) {
        iti.setCountry(country.iso2);
    }


    // Helper function → update fields
    function updatePhoneFields() {
        const selected = iti.getSelectedCountryData();

        // Country code like +20
        const countryCode = "+" + selected.dialCode;

        // Phone only (remove leading zero)
        const phoneOnly = input.value.replace(/^0+/, "");

        countryCodeField.value = countryCode;
        phoneOnlyField.value = phoneOnly;
    }

    // Update when user changes country
    input.addEventListener("countrychange", updatePhoneFields);

    // Update when user types or edits phone
    input.addEventListener("input", updatePhoneFields);

    // Update again on form submit (to be safe)
    const form = document.querySelector("#kt_careers_form");
    form.addEventListener("submit", updatePhoneFields);
</script>


@endpush