@extends('profile.layout')
@section('title', __('Zayavka'))
@section('content')

<div class="p-4 pb-20 mx-auto max-w-2xl libro-applications">
    <h1 class="text-2xl font-bold text-ink mb-6">{{ __('Zayavka') }}</h1>

    @if(session('success'))
        <div class="flash flash-success mb-4 flex items-center gap-2">
            <x-icon name="circle-check" class="w-5 h-5 shrink-0" /> {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="flash flash-error mb-4">
            @foreach($errors->all() as $e) <p>{{ $e }}</p> @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('profile.applications.store', $profileUser) }}" class="card space-y-5">
        @csrf

        {{-- Тип заявки --}}
        <div>
            <label class="label libro-applications-type-label">{{ __('Zayavka növü') }}</label>
            <div class="grid grid-cols-3 gap-2 libro-applications-types">
                @foreach(['tariff' => __('Tarif sifarişi'), 'request' => __('Müraciət'), 'complaint' => __('Şikayət')] as $type => $label)
                    <label class="libro-applications-type cursor-pointer">
                        <input type="radio" name="type" value="{{ $type }}" class="hidden peer"
                               data-application-type {{ $type === 'tariff' ? 'checked' : '' }}>
                        <span class="block text-center text-sm px-3 py-2.5 rounded-xl border border-line peer-checked:border-primary peer-checked:bg-primarysoft peer-checked:text-primary peer-checked:font-medium transition-colors">
                            {{ $label }}
                        </span>
                    </label>
                @endforeach
            </div>
        </div>

        {{-- Блок тарифа --}}
        <div id="app-tariff-block" class="libro-applications-tariff space-y-4">
            <div>
                <label class="label">{{ __('Tarif') }}</label>
                <select name="plan_id" id="app-plan" class="input">
                    @foreach($plans as $plan)
                        <option value="{{ $plan->id }}" data-price="{{ $plan->price_azn }}"
                            {{ $selectedPlan && $selectedPlan->id === $plan->id ? 'selected' : '' }}>
                            {{ $plan->name }} — {{ number_format($plan->price_azn, 2) }} ₼ / {{ __('ay') }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="label">{{ __('Müddət') }}</label>
                <select name="months" id="app-months" class="input">
                    @foreach($durations as $m)
                        <option value="{{ $m }}">{{ $m }} {{ __('ay') }}</option>
                    @endforeach
                </select>
            </div>

            <div class="p-4 rounded-xl bg-primarysoft border border-line">
                <div class="text-sm text-muted">{{ __('Ümumi məbləğ') }}</div>
                <div class="text-3xl font-bold text-primary">
                    <span id="app-amount">0.00</span> ₼
                </div>
            </div>
        </div>

        {{-- Блок обращения / жалобы --}}
        <div id="app-message-block" class="libro-applications-message space-y-4" style="display:none;">
            <div>
                <label class="label">{{ __('Mövzu') }}</label>
                <input type="text" name="subject" class="input" maxlength="255" placeholder="{{ __('Mövzu') }}">
            </div>
            <div>
                <label class="label">{{ __('Mətn') }}</label>
                <textarea name="message" class="input" rows="4" maxlength="2000" placeholder="{{ __('Mətn') }}"></textarea>
            </div>
        </div>

        {{-- Контакты --}}
        <div class="space-y-4">
            <div><label class="label">{{ __('Adınız') }}</label><input type="text" name="name" value="{{ $profileUser->name }}" class="input" required></div>
            <div><label class="label">{{ __('Telefon') }}</label><input type="text" name="phone" value="{{ $profileUser->phone }}" class="input" required></div>
            <div><label class="label">{{ __('Email') }}</label><input type="email" name="email" value="{{ $profileUser->email && !str_ends_with($profileUser->email, '@libro.az') ? $profileUser->email : '' }}" class="input" placeholder="{{ __('Emailinizi daxil edin') }}"></div>
        </div>

        <button type="submit" class="btn btn-primary w-full libro-applications-submit">{{ __('Göndər') }}</button>
    </form>
</div>

@push('scripts')
<script>
(function () {
    const typeInputs = document.querySelectorAll('input[data-application-type]');
    const tariffBlock = document.getElementById('app-tariff-block');
    const messageBlock = document.getElementById('app-message-block');
    const planSelect = document.getElementById('app-plan');
    const monthsSelect = document.getElementById('app-months');
    const amountEl = document.getElementById('app-amount');

    function recalc() {
        if (!planSelect || !monthsSelect || !amountEl) return;
        const price = parseFloat(planSelect.selectedOptions[0]?.dataset.price || '0');
        const months = parseInt(monthsSelect.value || '1', 10);
        amountEl.textContent = (price * months).toFixed(2);
    }

    function toggle() {
        const type = document.querySelector('input[data-application-type]:checked')?.value;
        if (!tariffBlock || !messageBlock) return;
        const isTariff = type === 'tariff';
        tariffBlock.style.display = isTariff ? '' : 'none';
        messageBlock.style.display = isTariff ? 'none' : '';
        if (isTariff) recalc();
    }

    typeInputs.forEach(i => i.addEventListener('change',  (e)=>{
     toggle()
     typeInputs.forEach(i => {
         i.classList.remove('peer-checked');
     })
     i.classList.add('peer-checked');
    }
    ));
    planSelect?.addEventListener('change', recalc);
    monthsSelect?.addEventListener('change', recalc);

    toggle();
})();
</script>
@endpush
@endsection