@extends('layouts.dashboard')

@php
    $editing = $customer->exists;
    $pageTitle = $editing ? trans('dashboard.edit_customer') : trans('dashboard.add_customer');
@endphp

@section('title', $pageTitle)
@section('header_title', $pageTitle)

@section('content')
<div class="max-w-3xl mx-auto space-y-6">

    {{-- Breadcrumb --}}
    <div class="flex items-center justify-between pb-2 border-b border-slate-200 dark:border-slate-800/80">
        <nav class="flex items-center gap-2 text-xs font-semibold text-slate-500 dark:text-slate-400">
            <a href="{{ route('dashboard.customers.index') }}" class="hover:text-slate-900 dark:hover:text-white transition">
                {{ trans('dashboard.nav_customers') }}
            </a>
            <span class="text-slate-400 dark:text-slate-600">/</span>
            <span class="text-slate-900 dark:text-white font-bold">{{ $pageTitle }}</span>
        </nav>
        @if($editing)
            <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-800 text-slate-300 border border-slate-700 code-font">
                {{ $customer->uuid }}
            </span>
        @endif
    </div>

    <form method="POST"
          action="{{ $editing ? route('dashboard.customers.update', $customer->uuid) : route('dashboard.customers.store') }}"
          class="space-y-5 text-xs">
        @csrf
        @if($editing) @method('PUT') @endif

        {{-- SECTION 1: IDENTITY --}}
        <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-5">
            <div class="flex items-center gap-2">
                <span class="w-1.5 h-4 rounded-full bg-brand-500"></span>
                <h3 class="text-sm font-bold text-slate-900 dark:text-white">{{ trans('dashboard.cust_basic_data') }}</h3>
            </div>

            {{-- Errors --}}
            @if($errors->any())
                <div class="p-3 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-400 text-xs space-y-1">
                    @foreach($errors->all() as $error)
                        <div class="flex items-start gap-1.5"><i class="fa-solid fa-circle-exclamation mt-0.5 shrink-0"></i> {{ $error }}</div>
                    @endforeach
                </div>
            @endif

            {{-- Name + VAT --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="sm:col-span-2">
                    <label class="block text-slate-400 mb-1.5 font-semibold">
                        {{ trans('dashboard.buyer_name') }} *
                    </label>
                    <input type="text"
                           name="name"
                           value="{{ old('name', $customer->name) }}"
                           required
                           placeholder="{{ trans('dashboard.cust_name_placeholder') }}"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition @error('name') border-rose-500 @enderror">
                </div>

                <div>
                    <label class="block text-slate-400 mb-1.5 font-semibold">
                        {{ trans('dashboard.buyer_vat') }}
                        <span class="text-slate-500 font-normal">({{ trans('dashboard.cust_vat_digits_hint') }})</span>
                    </label>
                    <input type="text"
                           name="vat_number"
                           value="{{ old('vat_number', $customer->vat_number) }}"
                           maxlength="15"
                           placeholder="3xxxxxxxxxxxxxx3"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs font-mono focus:border-brand-500 focus:outline-none transition @error('vat_number') border-rose-500 @enderror">
                    <p class="mt-1 text-[11px] text-slate-500">{{ trans('dashboard.cust_vat_b2b_hint') }}</p>
                </div>

                <div>
                    <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.buyer_cr') }}</label>
                    <input type="text"
                           name="cr_number"
                           value="{{ old('cr_number', $customer->cr_number) }}"
                           placeholder="{{ trans('dashboard.cust_cr_placeholder') }}"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                </div>
            </div>
        </div>

        {{-- SECTION 2: ADDRESS --}}
        <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <span class="w-1.5 h-4 rounded-full bg-brand-500"></span>
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white">{{ trans('dashboard.cust_address_title') }}</h3>
                </div>
            </div>

            {{-- ZATCA note --}}
            <div class="flex items-start gap-2 p-3 rounded-xl bg-amber-500/10 border border-amber-500/25 text-amber-300 text-[11px]">
                <i class="fa-solid fa-triangle-exclamation mt-0.5 shrink-0 text-amber-400"></i>
                <span>
                    {{ trans('dashboard.cust_address_zatca_note') }}
                </span>
            </div>

            {{-- Short address --}}
            <div>
                <label class="block text-slate-400 mb-1.5 font-semibold">
                    {{ trans('dashboard.cust_short_address') }}
                    <span class="text-slate-500 font-normal">({{ trans('admin.optional') }})</span>
                </label>
                <input type="text"
                       name="short_address"
                       value="{{ old('short_address', $customer->short_address) }}"
                       maxlength="20"
                       placeholder="{{ trans('dashboard.cust_short_address_placeholder') }}"
                       class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs font-mono focus:border-brand-500 focus:outline-none transition uppercase">
                <p class="mt-1 text-[11px] text-slate-500">
                    {{ trans('dashboard.cust_short_address_hint') }}
                </p>
            </div>

            {{-- Address grid --}}
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                <div class="sm:col-span-2">
                    <label class="block text-slate-400 mb-1.5">{{ trans('dashboard.address_street') }}</label>
                    <input type="text"
                           name="address_street"
                           value="{{ old('address_street', $customer->address_street) }}"
                           placeholder="{{ trans('dashboard.cust_street_placeholder') }}"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                </div>
                <div>
                    <label class="block text-slate-400 mb-1.5">{{ trans('dashboard.buyer_city') }}</label>
                    <input type="text"
                           name="address_city"
                           value="{{ old('address_city', $customer->address_city) }}"
                           placeholder="{{ trans('dashboard.cust_city_placeholder') }}"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                </div>
            </div>

            {{-- Country --}}
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-slate-400 mb-1.5">{{ trans('dashboard.cust_country_iso') }}</label>
                    <select name="address_country"
                            class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                        <option value="SA" {{ old('address_country', $customer->address_country ?? 'SA') === 'SA' ? 'selected' : '' }}>🇸🇦 SA — {{ trans('dashboard.saudi_arabia') }}</option>
                        <option value="AE" {{ old('address_country', $customer->address_country) === 'AE' ? 'selected' : '' }}>🇦🇪 AE</option>
                        <option value="KW" {{ old('address_country', $customer->address_country) === 'KW' ? 'selected' : '' }}>🇰🇼 KW</option>
                        <option value="BH" {{ old('address_country', $customer->address_country) === 'BH' ? 'selected' : '' }}>🇧🇭 BH</option>
                        <option value="QA" {{ old('address_country', $customer->address_country) === 'QA' ? 'selected' : '' }}>🇶🇦 QA</option>
                        <option value="OM" {{ old('address_country', $customer->address_country) === 'OM' ? 'selected' : '' }}>🇴🇲 OM</option>
                        <option value="EG" {{ old('address_country', $customer->address_country) === 'EG' ? 'selected' : '' }}>🇪🇬 EG</option>
                        <option value="JO" {{ old('address_country', $customer->address_country) === 'JO' ? 'selected' : '' }}>🇯🇴 JO</option>
                        <option value="US" {{ old('address_country', $customer->address_country) === 'US' ? 'selected' : '' }}>🇺🇸 US — United States</option>
                        <option value="GB" {{ old('address_country', $customer->address_country) === 'GB' ? 'selected' : '' }}>🇬🇧 GB — United Kingdom</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- SECTION 3: CONTACT --}}
        <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-4">
            <button type="button"
                    onclick="toggleSection('contact-section', 'contact-chevron')"
                    class="w-full flex items-center justify-between text-xs">
                <div class="flex items-center gap-2">
                    <span class="w-1.5 h-4 rounded-full bg-brand-500"></span>
                    <span class="font-bold text-slate-900 dark:text-white text-sm">{{ trans('dashboard.cust_contact_details') }}</span>
                    <span class="text-slate-500">({{ trans('dashboard.cust_contact_sub') }})</span>
                </div>
                <i id="contact-chevron" class="fa-solid fa-chevron-down text-slate-400 text-[10px] transition-transform duration-200
                    @if(old('phone', $customer->phone) || old('email', $customer->email)) rotate-180 @endif"></i>
            </button>

            <div id="contact-section" class="space-y-3
                @unless(old('phone', $customer->phone) || old('email', $customer->email)) hidden @endunless">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-3 border-t border-slate-200 dark:border-slate-800/80">
                    <div>
                        <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.customer_phone') }}</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 start-0 flex items-center ps-3 text-slate-400 text-sm pointer-events-none">
                                <i class="fa-solid fa-phone text-xs"></i>
                            </span>
                            <input type="text"
                                   name="phone"
                                   value="{{ old('phone', $customer->phone) }}"
                                   placeholder="+966 5x xxx xxxx"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 ps-9 pe-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                        </div>
                    </div>
                    <div>
                        <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.customer_email') }}</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 start-0 flex items-center ps-3 text-slate-400 text-sm pointer-events-none">
                                <i class="fa-solid fa-envelope text-xs"></i>
                            </span>
                            <input type="email"
                                   name="email"
                                   value="{{ old('email', $customer->email) }}"
                                   placeholder="example@company.com"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 ps-9 pe-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- SECTION 4: CUSTOMER CARD PREVIEW --}}
        <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800">
            <div class="flex items-center gap-2 mb-4">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                <h3 class="text-xs font-black uppercase tracking-wider text-slate-700 dark:text-slate-300">{{ trans('dashboard.cust_card_preview') }}</h3>
            </div>
            <div class="flex items-center gap-4 p-4 rounded-xl bg-navy-950 border border-slate-800">
                <div id="preview-initial"
                     class="w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-500 to-emerald-600 text-white force-white font-black text-lg flex items-center justify-center shrink-0 shadow-lg shadow-brand-500/20">
                    {{ ($customer->name ? mb_substr($customer->name, 0, 1) : '?') }}
                </div>
                <div class="min-w-0 flex-1">
                    <div id="preview-name" class="font-extrabold text-slate-900 dark:text-white text-sm truncate">
                        {{ $customer->name ?: trans('dashboard.cust_default_name') }}
                    </div>
                    <div id="preview-vat" class="text-[11px] text-slate-500 dark:text-slate-400 font-mono mt-0.5">
                        {{ $customer->vat_number ?: trans('dashboard.cust_no_vat') }}
                    </div>
                    <div id="preview-location" class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">
                        {{ collect([$customer->address_city, $customer->address_country ?: 'SA'])->filter()->implode(', ') ?: 'SA' }}
                    </div>
                </div>
                <div class="shrink-0 flex flex-col items-end gap-1">
                    @if($customer->vat_number)
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/25">B2B</span>
                    @else
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-700 text-slate-400 border border-slate-700" id="preview-type-badge">B2C</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- ACTION BAR --}}
        <div class="p-4 sm:p-5 rounded-2xl bg-navy-900 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xl">
            <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                <i class="fa-solid fa-circle-info text-brand-500"></i>
                <span>
                    {{ trans('dashboard.cust_reusable_notice') }}
                </span>
            </div>
            <div class="flex items-center gap-3 w-full sm:w-auto justify-end">
                <a href="{{ route('dashboard.customers.index') }}"
                   class="px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white text-xs font-bold border border-slate-700 transition">
                    {{ trans('dashboard.cancel') }}
                </a>
                <button type="submit"
                        class="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white force-white text-xs font-extrabold shadow-lg shadow-emerald-600/30 transition flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ trans('dashboard.save') }}</span>
                </button>
            </div>
        </div>

    </form>
</div>

<script>
(function () {
    // Toggle collapsible sections
    window.toggleSection = function (sectionId, chevronId) {
        document.getElementById(sectionId)?.classList.toggle('hidden');
        document.getElementById(chevronId)?.classList.toggle('rotate-180');
    };

    // Live preview updates
    const nameInput   = document.querySelector('input[name="name"]');
    const vatInput    = document.querySelector('input[name="vat_number"]');
    const cityInput   = document.querySelector('input[name="address_city"]');
    const countryInput = document.querySelector('select[name="address_country"]');

    function updatePreview() {
        const name    = nameInput?.value.trim();
        const vat     = vatInput?.value.trim();
        const city    = cityInput?.value.trim();
        const country = countryInput?.value || 'SA';

        const previewName   = document.getElementById('preview-name');
        const previewInitial = document.getElementById('preview-initial');
        const previewVat    = document.getElementById('preview-vat');
        const previewLoc    = document.getElementById('preview-location');
        const previewBadge  = document.getElementById('preview-type-badge');

        if (previewName)    previewName.textContent    = name || '{{ trans('dashboard.cust_default_name') }}';
        if (previewInitial) previewInitial.textContent = name ? name[0] : '?';
        if (previewVat)     previewVat.textContent     = vat  || '{{ trans('dashboard.cust_no_vat') }}';

        const parts = [city, country].filter(Boolean);
        if (previewLoc) previewLoc.textContent = parts.join(', ') || 'SA';

        // Toggle badge
        if (previewBadge) {
            if (vat && vat.length >= 3) {
                previewBadge.textContent  = 'B2B';
                previewBadge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/25';
            } else {
                previewBadge.textContent  = 'B2C';
                previewBadge.className = 'px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-700 text-slate-400 border border-slate-700';
            }
        }
    }

    nameInput?.addEventListener('input', updatePreview);
    vatInput?.addEventListener('input', updatePreview);
    cityInput?.addEventListener('input', updatePreview);
    countryInput?.addEventListener('change', updatePreview);

    // Short address uppercase force
    const shortAddrInput = document.querySelector('input[name="short_address"]');
    shortAddrInput?.addEventListener('input', function () {
        this.value = this.value.toUpperCase();
    });
})();
</script>
@endsection