@props([
    'name' => 'phone',
    'countryCodeName' => 'country_code',
    'value' => '',
    'countryCode' => null,
    'defaultCountryIso' => null,
    'label' => null,
    'placeholder' => null,
    'required' => true,
    'autofocus' => false,
    'disabled' => false,
    'readonly' => false,
    'id' => null,
    'wrapperClass' => '',
])

@php
    use App\Support\PhoneNumber;

    $componentId = $id ?? 'phone-input-'.uniqid();
    $label = $label ?? __('lang.phone');
    $placeholder = $placeholder ?? '00XXXXXXXX';
    $searchPlaceholder = __('lang.search');

    $rawValue = old($name, $value);
    $parsed = PhoneNumber::parse($rawValue);

    $dialFromOld = old($countryCodeName);
    $resolvedDial = $dialFromOld ?: ($countryCode ?? $parsed['country_code']);
    $resolvedIso = PhoneNumber::isoFromDialCode($resolvedDial)
        ?? ($defaultCountryIso ?? PhoneNumber::isoFromRequest());

    if ($dialFromOld && old($name) !== null) {
        $nationalValue = ltrim(preg_replace('/\D+/', '', (string) old($name)) ?? '', '0');
    } elseif (old($name) !== null) {
        $nationalValue = PhoneNumber::parse(old($name))['national'];
    } else {
        $nationalValue = $parsed['national'];
    }

    $countriesJson = json_encode(PhoneNumber::localizedCountries(), JSON_UNESCAPED_UNICODE);
@endphp

<div class="phone-input-wrapper {{ $wrapperClass }}"
     id="{{ $componentId }}"
     data-countries="{{ $countriesJson }}"
     data-default-iso="{{ $resolvedIso }}"
     data-geo-detect="0">
    @if ($label)
        <label class="phone-input-label" for="{{ $componentId }}-tel">{{ $label }}</label>
    @endif

    <div class="phone-input-container" dir="ltr">
        <div class="country-selector">
            <div class="country-selected" @if ($disabled || $readonly) style="pointer-events: none; opacity: .85;" @endif>
                <img src="https://flagcdn.com/w40/{{ $resolvedIso }}.png" alt="" class="selected-flag">
                <span class="selected-code">{{ $resolvedDial }}</span>
                @if (! $disabled && ! $readonly)
                    <i class="bi bi-chevron-down arrow"></i>
                @endif
            </div>
            @if (! $disabled && ! $readonly)
                <div class="country-dropdown">
                    <div class="country-search">
                        <input type="text" placeholder="{{ $searchPlaceholder }}" class="country-search-input" autocomplete="off">
                    </div>
                    <div class="country-list"></div>
                </div>
            @endif
        </div>

        <input type="tel"
               id="{{ $componentId }}-tel"
               name="{{ $name }}"
               class="phone-input"
               placeholder="{{ $placeholder }}"
               value="{{ $nationalValue }}"
               {{ $required && ! $disabled ? 'required' : '' }}
               {{ $autofocus ? 'autofocus' : '' }}
               {{ $disabled ? 'disabled' : '' }}
               {{ $readonly ? 'readonly' : '' }}
               pattern="[0-9]*"
               inputmode="numeric"
               autocomplete="tel-national">
    </div>

    <input type="hidden"
           name="{{ $countryCodeName }}"
           class="country-code-input"
           value="{{ $resolvedDial }}"
           {{ $disabled ? 'disabled' : '' }}>

    @error($name)
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
    @error($countryCodeName)
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
</div>

@once
    @push('styles')
        <link rel="stylesheet" href="{{ asset('frontend/css/phone-input.css') }}">
    @endpush
    @push('scripts')
        <script src="{{ asset('frontend/js/phone-input.js') }}"></script>
    @endpush
@endonce