@extends('profile.layout')
@section('title', __("Tənzimləmələr"))
@section('content')

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

<div class="flex gap-6 items-start justify-between max-lg:flex-col libro-settings">
    <ul class="tables w-64 bg-surface border border-line rounded-lg overflow-hidden py-3 max-lg:w-full max-lg:overflow-x-auto max-lg:flex max-lg:gap-2 max-lg:justify-between">
        <li data-tab="profile" class="active">{{ __('Profil') }}</li>
        <li data-tab="language">{{ __('Dil') }}</li>
        <li data-tab="password">{{ __('Şifrə') }}</li>
    </ul>
    <section id="setting-content" class="bg-surface border border-line rounded-lg flex-1 overflow-hidden w-full">
        <div data-tab-content="profile" class="setting-profile">
                <div class="bg-primary text-white p-4 text-xl">
                    {{ __("Profil tənzimləmələri") }}
                </div>
                {{-- Profil tenzimlemeleri --}}
                <form method="POST" action="{{ route('profile.settings.update', $profileUser) }}" enctype="multipart/form-data" class="space-y-4 p-6 sm:p-8">
                    @csrf @method('PUT')
                    <div class="flex items-center gap-4 mb-4">
                        <div class="avatar">
                            <div class="bg-primary rounded-full overflow-hidden text-white flex justify-center items-center text-3xl w-20 h-20">
                                @if($profileUser->avatar)<img src="{{ $profileUser->avatar }}" class="w-full h-full object-cover" >@else {{ mb_substr($profileUser->name,0,1) }}{{ strpos($profileUser->name,' ') !== false ? mb_substr($profileUser->name,strpos($profileUser->name,' ')+1,1) : '' }} @endif
                            </div>
                        </div>
                        <div class="w-full">
                            <input type="file" name="avatar" class="input text-sm" accept="image/*">
                            <p class="text-xs text-muted mt-1">{{ __("content_profile_avatar") }}</p>
                        </div>
                    </div>
                    <div><label class="label">{{ __("Adınız") }}</label><input type="text" name="name" value="{{ $profileUser->name }}" class="input" placeholder="{{ __('Adınızı daxil edin') }}" required></div>
                    <div><label class="label">{{ __("Telefon") }}</label><input type="text" value="{{ $profileUser->phone }}" class="input bg-surface2 text-muted" disabled></div>
                    <div><label class="label">{{ __("content_profile_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>
                    <button type="submit" class="btn btn-primary">{{ __("Yadda saxla") }}</button>
                </form>
        </div>

        <div data-tab-content="language" style="display: none;">
            <div class="bg-primary text-white p-4 text-xl">
                    {{ __("Dil tənzimləmələri") }}
                </div>
            <form method="POST" action="/locale" class="p-6 sm:p-8">
                @csrf
                <label class="label">Dil / Language / Язык</label>
                <select name="locale" class="input" onchange="this.form.submit()">
                    @foreach(['az'=>'🇦🇿 Azərbaycanca', 'ru'=>'🇷🇺 Русский', 'en'=>'🇬🇧 English', 'tr'=>'🇹🇷 Türkçe'] as $code => $name)
                        <option value="{{ $code }}" {{ app()->getLocale() === $code ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        <div data-tab-content="password" class="setting-password" style="display: none;">
                <div class="bg-primary text-white p-4 text-xl">
                    {{ __("Şifrə tənzimləmələri") }}
                </div>
               <form method="POST" action="{{ route('profile.settings.update', $profileUser) }}" class="space-y-4 p-6 sm:p-8">
                    @csrf @method('PUT')
                    <div><label class="label">{{ __('Hazırkı şifrə') }}</label><input type="password" name="current_password" class="input" required></div>
                    <div><label class="label">{{ __('Yeni şifrə') }}</label><input type="password" name="password" class="input" required minlength="8"></div>
                    <div><label class="label">{{ __('Şifrə təkrarı') }}</label><input type="password" name="password_confirmation" class="input" required minlength="8"></div>
                    <button type="submit" class="btn btn-primary">{{ __('Şifrəni yenilə') }}</button>
                </form>
        </div>
    </section>
</div>

<style>
    ul.tables li {
        padding: 10px 16px;
        cursor: pointer;
        transition: all .4s;
        border-right: 4px solid transparent;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 15px;
        flex: 1;
        white-space: nowrap;
    }
    ul.tables li.active {
        background-color: var(--primary-soft);
        border-right: 4px solid var(--primary);
        color: var(--primary);
    }
</style>
<script>
     let tabs = document.querySelectorAll('.tables li');
    let tabContents = document.querySelectorAll('[data-tab-content]');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            let target = tab.getAttribute('data-tab');
            tabContents.forEach(tc => {
                if (tc.getAttribute('data-tab-content') === target) {
                    tc.style.display = 'block';
                } else {
                    tc.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection