@extends('website.layouts.app')
@section('title', __('titles.register_office'))
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/intlTelInput.css') }}">

@endsection
@section('content')
    @include('website.layouts.breadcumb', ['title' => __('titles.register_office'), 'sub_title' => __('titles.register_office_subtitle')])
    <section>
        <div class="container">
            <div class="row d-flex ">

                <div class="log-reg-form">
                    <div class="navtab-style2">
                        <form action="{{ route('website.register-office', ['locale' => $locale]) }}" method="post" novalidate
                            class="needs-validation" enctype="multipart/form-data">
                            @csrf
                            <div class="form-style1">

                                <div class="row">
                                    <div class="col-lg-6 position-relative">
                                        <!-- المعلومات الشخصية -->
                                        <h4 class="form-section-title">@lang('attributes.personal_info')</h4>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb25 form-group">
                                                    <label class="form-label fw600 dark-color">@lang('attributes.first_name')</label>
                                                    <input required name="first_name" type="text"
                                                        class="form-control @if ($errors->has('first_name')) is-invalid @endif"
                                                        placeholder="@lang('attributes.Typefirst_name')" value="{{ old('first_name') }}">
                                                    @if ($errors->has('first_name'))
                                                        <span
                                                            class="invalid-feedback">{{ $errors->first('first_name') }}</span>
                                                    @else
                                                        <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.first_name')])</div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb25 form-group">
                                                    <label class="form-label fw600 dark-color">@lang('attributes.last_name')</label>
                                                    <input required name="last_name" type="text"
                                                        class="form-control @if ($errors->has('last_name')) is-invalid @endif"
                                                        placeholder="@lang('attributes.TypeLast_name')" value="{{ old('last_name') }}">
                                                    @if ($errors->has('last_name'))
                                                        <span
                                                            class="invalid-feedback">{{ $errors->first('last_name') }}</span>
                                                    @else
                                                        <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.last_name')])</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.email')</label>
                                            <input required name="email" type="email"
                                                class="form-control @if ($errors->has('email')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeEmail')" value="{{ old('email') }}">
                                            @if ($errors->has('email'))
                                                <span class="invalid-feedback">{{ $errors->first('email') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.email')])
                                                </div>
                                            @endif
                                        </div>
                                        <div class="mb25 form-group">
                                            <label for="phone_input"
                                                class="form-label d-block fw600 dark-color">@lang('attributes.phone')</label>
                                            <input required id="phone_input" name="phone" type="tel"
                                                class="form-control phone @if ($errors->has('phone')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypePhone')" value="{{ old('phone') }}">
                                            <input type="hidden" name="phone_code" id="phone_code"
                                                value="{{ old('phone_code') }}">

                                            @if ($errors->has('phone'))
                                                <span class="invalid-feedback">{{ $errors->first('phone') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.phone')])
                                                </div>
                                            @endif
                                        </div>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.company_name')</label>
                                            <input required name="company_name" type="text"
                                                class="form-control @if ($errors->has('company_name')) is-invalid @endif"
                                                placeholder="@lang('attributes.typeCompanyName')" value="{{ old('company_name') }}">
                                            @if ($errors->has('company_name'))
                                                <span class="invalid-feedback">{{ $errors->first('company_name') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.company_name')])
                                                </div>
                                            @endif
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb25 form-group">
                                                    <label class="form-label fw600 dark-color">@lang('attributes.city')</label>
                                                    <select required name="city_id" id="city_id"
                                                        class="form-control @if ($errors->has('city_id')) is-invalid @endif">
                                                        <option value="">@lang('attributes.select_city')</option>
                                                        @foreach ($result['cities'] ?? [] as $city)
                                                            <option value="{{ $city->id }}"
                                                                {{ old('city_id') == $city->id ? 'selected' : '' }}>
                                                                {{ $city->title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @if ($errors->has('city_id'))
                                                        <span
                                                            class="invalid-feedback">{{ $errors->first('city_id') }}</span>
                                                    @else
                                                        <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.city')])</div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb25 form-group">
                                                    <label class="form-label fw600 dark-color">@lang('attributes.area')</label>
                                                    <select required name="area_id" id="area_id"
                                                        class="form-control @if ($errors->has('area_id')) is-invalid @endif">
                                                        <option value="">@lang('attributes.select_area')</option>
                                                        <!-- سيتم تحميل المناطق عبر AJAX -->
                                                    </select>
                                                    @if ($errors->has('area_id'))
                                                        <span
                                                            class="invalid-feedback">{{ $errors->first('area_id') }}</span>
                                                    @else
                                                        <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.area')])</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.address')</label>
                                            <textarea required name="address" class="form-control @if ($errors->has('address')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeAddress')" rows="3">{{ old('address') }}</textarea>
                                            @if ($errors->has('address'))
                                                <span class="invalid-feedback">{{ $errors->first('address') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.address')])</div>
                                            @endif
                                        </div>

                                        <div class="mb15 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.Password')</label>
                                            <input required name="password" type="password"
                                                class="form-control @if ($errors->has('password')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypePassword')">
                                            @if ($errors->has('password'))
                                                <span class="invalid-feedback">{{ $errors->first('password') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.password')])
                                                </div>
                                            @endif

                                        </div>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.PasswordConfirmation')</label>
                                            <input required name="password_confirmation" type="password"
                                                class="form-control @if ($errors->has('password_confirmation')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypePasswordConfirmation')">
                                            @if ($errors->has('password_confirmation'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('password_confirmation') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.PasswordConfirmation')])
                                                </div>
                                            @endif

                                        </div>

                                    </div>
                                    <div class="col-lg-6 position-relative">
                                        <h4 class="form-section-title">@lang('titles.uploads')</h4>

                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.tax_certificate_number')</label>
                                            <input required name="tax_certificate_number" type="file"
                                                accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('tax_certificate_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeTaxCertificate')">
                                            @if ($errors->has('tax_certificate_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('tax_certificate_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.tax_certificate_number')])</div>
                                            @endif
                                            <small class="form-text text-muted">@lang('attributes.allowed_file_types'): JPG, JPEG, PNG,
                                                PDF</small>
                                        </div>
                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.profile_image')</label>
                                            <input name="image" type="file" accept=".jpg,.jpeg,.png"
                                                class="form-control @if ($errors->has('image')) is-invalid @endif">
                                            @if ($errors->has('image'))
                                                <span class="invalid-feedback">{{ $errors->first('image') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.profile_image')])</div>
                                            @endif
                                            <small class="form-text text-muted">@lang('attributes.allowed_file_types'): JPG, JPEG, PNG</small>
                                        </div>
                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.commercial_registration_number')</label>
                                            <input required name="commercial_registration_number" type="file"
                                                accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('commercial_registration_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeCommercialReg')">
                                            @if ($errors->has('commercial_registration_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('commercial_registration_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.commercial_registration_number')])</div>
                                            @endif
                                            <small class="form-text text-muted">@lang('attributes.allowed_file_types'): JPG, JPEG, PNG,
                                                PDF</small>
                                        </div>
                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.license_number')</label>
                                            <input required name="license_number" type="file"
                                                accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('license_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeLicenseNumber')">
                                            @if ($errors->has('license_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('license_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.license_number')])</div>
                                            @endif
                                            <small class="form-text text-muted">@lang('attributes.allowed_file_types'): JPG, JPEG, PNG,
                                                PDF</small>
                                        </div>
                                        <div class="mb25 form-group">
                                            <label class="form-label fw600 dark-color">@lang('attributes.chamber_of_commerce_number')</label>
                                            <input required name="chamber_of_commerce_number" type="file"
                                                accept=".jpg,.jpeg,.png,.pdf"
                                                class="form-control @if ($errors->has('chamber_of_commerce_number')) is-invalid @endif"
                                                placeholder="@lang('attributes.TypeChamberOfCommerce')">
                                            @if ($errors->has('chamber_of_commerce_number'))
                                                <span
                                                    class="invalid-feedback">{{ $errors->first('chamber_of_commerce_number') }}</span>
                                            @else
                                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.chamber_of_commerce_number')])</div>
                                            @endif
                                            <small class="form-text text-muted">@lang('attributes.allowed_file_types'): JPG, JPEG, PNG,
                                                PDF</small>
                                        </div>





                                        <div class="mb25 form-group form-check">
                                            <input type="checkbox"
                                                class="form-check-input @if ($errors->has('terms')) is-invalid @endif"
                                                id="terms" name="terms" required>
                                            <label class="form-check-label fw600 dark-color" for="terms">
                                                @lang('attributes.agree_terms') <a href="#"
                                                    class="text-primary">@lang('attributes.terms_conditions')</a>
                                            </label>
                                            @if ($errors->has('terms'))
                                                <div class="invalid-feedback">{{ $errors->first('terms') }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            @if ($errors->any())
                                                <h5 class="text-danger float-left">{{ $errors->first() }}</h5>
                                                <br>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="d-grid mb20">
                                        <button class="ud-btn btn-thm" type="submit">
                                            @lang('titles.register_office_btn')<i class="fal fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                    <p class="dark-color text-center mb0 mt10">@lang('titles.ask_login')
                                        <a href="{{ route('website.login', ['locale' => $locale]) }}?type=office"
                                            class="dark-color fw600">
                                            <span>@lang('titles.login')</span>
                                        </a>

                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>


            </div>
        </div>
    </section>

@endsection
@section('js')
    <script src="{{ asset('/assets/js/intlTelInput-jquery.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>

    <script src="{{ asset('/assets/js/validate.js') }}"></script>
    <script>
        $(document).ready(function() {
            "use strict";
            // Phone
            $(".phone").intlTelInput({
                preferredCountries: ["sa", "uae", "kw", "eg"],
                separateDialCode: true,
                hiddenInput: "full_phone",
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
            });

            // Store country code in separate hidden field
            $(".phone").on("countrychange", function() {
                var countryCode = "+" + $(this).intlTelInput("getSelectedCountryData").dialCode;
                $("#phone_code").val(countryCode);
            });

            // Initialize country code
            setTimeout(function() {
                var countryCode = "+" + $(".phone").intlTelInput("getSelectedCountryData").dialCode;
                $("#phone_code").val(countryCode);
            }, 100);

            // Clear validation errors when input changes
            $(":input").on('input change', function() {
                $(this).removeClass('is-invalid');
            });

            // Load areas based on selected city
            $('#city_id').on('change', function() {
                var cityId = $(this).val();
                if (cityId) {
                    $.ajax({
                        url: "{{ route('website.get-areas', ['locale' => $locale]) }}",
                        type: "GET",
                        data: {
                            city_id: cityId
                        },
                        dataType: "json",
                        success: function(data) {
                            $('#area_id').empty();
                            $('#area_id').append(
                                '<option disabled selected value="">{{ __('attributes.select_area') }}</option>'
                            );
                            console.log("Areas data:", data); // Debug log

                            if (data && data.length > 0) {
                                $.each(data, function(key, value) {
                                    var title = '';
                                    console.log("Processing area:", value); // Debug log

                                    try {
                                        // If title is an object (JSON)
                                        if (typeof value.title === 'object' && value
                                            .title !== null) {
                                            console.log("Title is object:", value
                                                .title); // Debug log
                                            // Try to get current locale, fallback to English, or use first available
                                            title = value.title[
                                                    "{{ $locale }}"] || value
                                                .title[
                                                    "en"] || Object.values(value.title)[
                                                    0] || '';
                                        } else if (typeof value.title === 'string' &&
                                            value.title.startsWith('{')) {
                                            // If title is a JSON string, parse it
                                            console.log("Title is JSON string:", value
                                                .title); // Debug log
                                            var titleObj = JSON.parse(value.title);
                                            title = titleObj["{{ $locale }}"] ||
                                                titleObj["en"] || Object.values(
                                                    titleObj)[0] || '';
                                        } else {
                                            // If title is already a string
                                            title = value.title || '';
                                        }
                                    } catch (e) {
                                        console.error("Error processing title:",
                                            e); // Debug log
                                        title = value.title || '';
                                    }

                                    // Only add option if title is not empty
                                    if (title && title.trim() !== '') {
                                        $('#area_id').append('<option value="' + value
                                            .id + '">' + title + '</option>');
                                    } else {
                                        console.warn("Empty title for area:", value
                                            .id); // Debug log
                                    }
                                });

                                // Set previously selected area if exists
                                @if (old('area_id'))
                                    $('#area_id').val("{{ old('area_id') }}");
                                @endif
                            } else {
                                console.warn(
                                    "No areas data returned or empty array"); // Debug log
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading areas: " + error);
                        }
                    });
                } else {
                    $('#area_id').empty();
                    $('#area_id').append('<option value="">@extends('website.layouts.app')</option>');
                }
            });

            // إذا كانت هناك قيمة محفوظة للمدينة، قم بتحميل المناطق
            @if (old('city_id'))
                $('#city_id').trigger('change');
            @endif

            // Make sure phone field is populated before form submission
            $("form").on('submit', function(e) {
                // Check if terms are accepted
                if (!$("#terms").is(":checked")) {
                    e.preventDefault();
                    $("#terms").addClass('is-invalid');
                    return false;
                }
            });

        });
    </script>
@endsection