@extends('layouts.app')
@section('title', $client->exists ? $client->name : __('New company file'))
@section('page-title', $client->exists ? $client->name : __('New company file'))
@section('page-subtitle', $client->exists ? __('Edit the company profile.') : __('Create a new company profile.'))

@php
    // Country config as a JS-friendly map. The form reactively updates the
    // registration field label/hint, VAT format and legal form options when
    // the operator switches country.
    $countryJson = json_encode($countries, JSON_UNESCAPED_UNICODE);
    $action  = $client->exists ? route('tenant.clients.update', $client) : route('tenant.clients.store');
    $method  = $client->exists ? 'PATCH' : 'POST';
    $isCreate = ! $client->exists;
    $skipped  = session('import_skipped', []);
@endphp

@section('content')
<div class="w-full max-w-6xl mx-auto"
     x-data="{
        tab: (new URLSearchParams(window.location.search).get('tab') === 'bulk' ? 'bulk' : 'single'),
        country: @js(old('country_code', $client->country_code ?: config('countries.default_country'))),
        countries: {{ $countryJson }},
        get cfg() { return this.countries[this.country] || this.countries['OTHER'] || {}; },
        get regLabel() { return (this.cfg.registration && this.cfg.registration.label) || @js(__('Registration number')); },
        get regHint() { return (this.cfg.registration && this.cfg.registration.hint) || ''; },
        get vatHint() { return this.cfg.vat_format || ''; },
        get legalForms() { return this.cfg.legal_forms || {}; },
    }">

<div class="mb-5 flex items-center justify-between gap-3 flex-wrap">
    <a href="{{ $client->exists ? route('tenant.clients.show', $client) : route('tenant.clients.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition">
        <svg class="w-4 h-4 rtl:scale-x-[-1]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        {{ __('Back') }}
    </a>

    @if($isCreate)
        {{-- Tab switcher: Single entry vs Bulk import. Visible only on create. --}}
        <div class="inline-flex items-center gap-1 bg-slate-100 dark:bg-slate-800 rounded-full p-1">
            <button type="button" @click="tab = 'single'"
                    :class="tab === 'single' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-950 dark:text-white' : 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'"
                    class="text-xs px-3 py-1.5 rounded-full font-medium transition inline-flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                {{ __('Single entry') }}
            </button>
            <button type="button" @click="tab = 'bulk'"
                    :class="tab === 'bulk' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-950 dark:text-white' : 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'"
                    class="text-xs px-3 py-1.5 rounded-full font-medium transition inline-flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0l-4 4m4-4v12"/></svg>
                {{ __('Bulk import (CSV / XLSX)') }}
            </button>
        </div>
    @endif
</div>

@if(session('error'))
    <div class="mb-4 px-4 py-3 rounded-xl bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-sm">{{ session('error') }}</div>
@endif

@if(! empty($skipped) && $isCreate)
    <div x-data="{ open: false }" class="mb-4 card p-4">
        <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-sm">
            <span class="inline-flex items-center gap-2 text-amber-700 dark:text-amber-300 font-medium">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M5 19a2 2 0 01-1.732-3l7-12a2 2 0 013.464 0l7 12A2 2 0 0119 19H5z"/></svg>
                {{ __(':n rows were skipped during the last import. Click to see why.', ['n' => count($skipped)]) }}
            </span>
            <svg class="w-4 h-4 text-slate-400 transition" :class="open ? 'rotate-180' : ''" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="mt-3 max-h-64 overflow-y-auto border-t border-slate-200 dark:border-slate-700 pt-3 space-y-2">
            @foreach($skipped as $row)
                <div class="text-xs">
                    <div class="font-semibold text-slate-800 dark:text-slate-200">{{ __('Row :n', ['n' => $row['row']]) }} — {{ $row['name'] ?: __('(empty)') }}</div>
                    <ul class="ms-4 list-disc text-rose-600 dark:text-rose-400">
                        @foreach($row['errors'] as $e)<li>{{ $e }}</li>@endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    </div>
@endif

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

{{-- ─── SINGLE ENTRY TAB ─────────────────────────────────────────── --}}
<div x-show="tab === 'single'">
<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method === 'PATCH') @method('PATCH') @endif

    {{--
        2-column grid on lg+ to fill the wider container. The sections are
        ordered so the left column holds the legal/identity data (sticky to
        the country picker that drives the adaptive labels) and the right
        column holds the address + contact + notes.
    --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="space-y-6">
            {{-- Identity --}}
            <section class="card p-6 sm:p-7 space-y-4">
                <header class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 5h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    </div>
                    <div>
                        <h2 class="text-sm font-semibold text-slate-900 dark:text-white">{{ __('Identity') }}</h2>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ __('Who is this company?') }}</p>
                    </div>
                </header>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Company name') }} *</label>
                        <input name="name" required value="{{ old('name', $client->name) }}" class="form-input" placeholder="Acme SA">
                    </div>

                    <div>
                        <label class="form-label">{{ __('Sector') }}</label>
                        <select name="sector" class="form-select w-full">
                            <option value="">{{ __('—') }}</option>
                            @foreach($sectors as $k => $label)
                                <option value="{{ $k }}" @selected(old('sector', $client->sector) === $k)>{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ __('Company size') }}</label>
                        <select name="size" class="form-select w-full">
                            <option value="">{{ __('—') }}</option>
                            @foreach($sizes as $k => $label)
                                <option value="{{ $k }}" @selected(old('size', $client->size) === $k)>{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="form-label">{{ __('Founded on') }}</label>
                        <input name="founded_on" type="date" value="{{ old('founded_on', optional($client->founded_on)->format('Y-m-d')) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Primary currency') }}</label>
                        <select name="primary_currency" class="form-select w-full">
                            <option value="">{{ __('—') }}</option>
                            @foreach($currencies as $code => $label)
                                <option value="{{ $code }}" @selected(old('primary_currency', $client->primary_currency) === $code)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </section>

            {{-- Country + national IDs (country-adaptive) --}}
            <section class="card p-6 sm:p-7 space-y-4">
                <header class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5h18M3 12h18M3 19h18"/></svg>
                    </div>
                    <div>
                        <h2 class="text-sm font-semibold text-slate-900 dark:text-white">{{ __('Country & official identifiers') }}</h2>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ __('The fields below adapt to the selected country.') }}</p>
                    </div>
                </header>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">{{ __('Country (legal)') }}</label>
                        <select name="country_code" x-model="country" class="form-select w-full">
                            @foreach($countries as $code => $cfg)
                                <option value="{{ $code }}" @selected(old('country_code', $client->country_code) === $code)>{{ __($cfg['label']) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ __('Legal form') }}</label>
                        <select name="legal_form" class="form-select w-full">
                            <option value="">{{ __('—') }}</option>
                            <template x-for="(label, code) in legalForms" :key="code">
                                <option :value="code" x-text="label"
                                        :selected="@js(old('legal_form', $client->legal_form)) === code"></option>
                            </template>
                        </select>
                    </div>

                    <div>
                        <label class="form-label">{{ __('VAT number') }}</label>
                        <input name="vat_number" value="{{ old('vat_number', $client->vat_number) }}" class="form-input font-mono">
                        <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400" x-show="vatHint" x-text="@js(__('Format')) + ': ' + vatHint"></p>
                    </div>
                    <div>
                        <label class="form-label" x-text="regLabel">{{ __('Registration number') }}</label>
                        <input name="registration_number" value="{{ old('registration_number', $client->registration_number) }}" class="form-input font-mono">
                        <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400" x-show="regHint" x-text="regHint"></p>
                    </div>
                </div>
            </section>
        </div>

        <div class="space-y-6">
            {{-- Address --}}
            <section class="card p-6 sm:p-7 space-y-4">
                <header class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0L6.343 16.657A8 8 0 1117.657 16.657zM15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <div>
                        <h2 class="text-sm font-semibold text-slate-900 dark:text-white">{{ __('Address') }}</h2>
                    </div>
                </header>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Street & number') }}</label>
                        <input name="address_line1" value="{{ old('address_line1', $client->address_line1) }}" class="form-input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Address line 2') }}</label>
                        <input name="address_line2" value="{{ old('address_line2', $client->address_line2) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Postal code') }}</label>
                        <input name="postal_code" value="{{ old('postal_code', $client->postal_code) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">{{ __('City') }}</label>
                        <input name="city" value="{{ old('city', $client->city) }}" class="form-input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">{{ __('Country (address)') }}</label>
                        <input name="country" value="{{ old('country', $client->country) }}" class="form-input">
                    </div>
                </div>
            </section>

            {{-- Contact --}}
            <section class="card p-6 sm:p-7 space-y-4">
                <header class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zM12 14v7m-7-7a7 7 0 1114 0H5z"/></svg>
                    </div>
                    <div>
                        <h2 class="text-sm font-semibold text-slate-900 dark:text-white">{{ __('Contact') }}</h2>
                    </div>
                </header>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">{{ __('Email') }}</label>
                        <input name="email" type="email" value="{{ old('email', $client->email) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Phone') }}</label>
                        <input name="phone" value="{{ old('phone', $client->phone) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Contact person') }}</label>
                        <input name="contact_person_name" value="{{ old('contact_person_name', $client->contact_person_name) }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Role') }}</label>
                        <input name="contact_person_role" value="{{ old('contact_person_role', $client->contact_person_role) }}" placeholder="{{ __('e.g. CFO, Owner, Accountant…') }}" class="form-input">
                    </div>
                </div>
            </section>

            {{-- Notes --}}
            <section class="card p-6 sm:p-7">
                <label class="form-label">{{ __('Internal notes') }}</label>
                <textarea name="notes" rows="3" class="form-input w-full">{{ old('notes', $client->notes) }}</textarea>
            </section>
        </div>
    </div>

    <div class="flex items-center justify-end gap-3">
        <a href="{{ $client->exists ? route('tenant.clients.show', $client) : route('tenant.clients.index') }}" class="btn-secondary text-sm">{{ __('Cancel') }}</a>
        <button class="btn-primary text-sm">{{ $client->exists ? __('Save changes') : __('Create company file') }}</button>
    </div>
</form>
</div>

{{-- ─── BULK IMPORT TAB ──────────────────────────────────────────── --}}
@if($isCreate)
<div x-show="tab === 'bulk'" x-cloak>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Upload form (2/3 wide) --}}
        <form method="POST" action="{{ route('tenant.clients.import') }}" enctype="multipart/form-data" class="lg:col-span-2 card p-6 sm:p-7 space-y-5"
              x-data="{ filename: '' }">
            @csrf
            <header class="flex items-start gap-3">
                <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center shrink-0">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0l-4 4m4-4v12"/></svg>
                </div>
                <div>
                    <h2 class="text-sm font-semibold text-slate-900 dark:text-white">{{ __('Upload your file') }}</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ __('CSV or Excel (.xlsx). Max 5 MB. First row must be the column headers.') }}</p>
                </div>
            </header>

            <label for="bulk-file"
                   class="relative flex flex-col items-center justify-center gap-2 px-6 py-10 rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900/40 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 cursor-pointer transition">
                <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                <div class="text-center">
                    <p class="text-sm font-medium text-slate-700 dark:text-slate-200" x-show="!filename">{{ __('Click to choose a file') }}</p>
                    <p class="text-sm font-mono text-slate-900 dark:text-white" x-show="filename" x-text="filename"></p>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-1">{{ __('.csv, .xlsx — up to 5 MB') }}</p>
                </div>
                <input id="bulk-file" type="file" name="file" required accept=".csv,.xlsx,.xls,text/csv"
                       @change="filename = $event.target.files[0]?.name || ''"
                       class="absolute inset-0 opacity-0 cursor-pointer">
            </label>

            <div class="flex items-center justify-between gap-3 flex-wrap">
                <span class="text-[11px] text-slate-500 dark:text-slate-400">{{ __('Each row will be validated against the same rules as the single form. Invalid rows are skipped — the rest are imported.') }}</span>
                <button type="submit" class="btn-primary text-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    {{ __('Import file') }}
                </button>
            </div>
        </form>

        {{-- How-it-works sidebar (1/3 wide) --}}
        <aside class="space-y-4">
            <section class="card p-5">
                <h3 class="text-xs uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400 mb-3">{{ __('Step 1') }}</h3>
                <p class="text-sm text-slate-700 dark:text-slate-200 mb-3">{{ __('Download the template and fill in one row per company.') }}</p>
                <a href="{{ route('tenant.clients.import.template') }}" class="btn-secondary text-xs inline-flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
                    {{ __('Download template (.csv)') }}
                </a>
            </section>

            <section class="card p-5">
                <h3 class="text-xs uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400 mb-3">{{ __('Step 2') }}</h3>
                <p class="text-sm text-slate-700 dark:text-slate-200">{{ __('Open it in Excel, Numbers or Google Sheets. Keep the header row.') }}</p>
                <ul class="mt-3 text-[11px] text-slate-500 dark:text-slate-400 space-y-1">
                    <li>· <span class="font-mono">name</span> {{ __('is required') }}</li>
                    <li>· <span class="font-mono">country_code</span>: BE / FR / NL / DE / LU / CH / MA / OTHER</li>
                    <li>· <span class="font-mono">founded_on</span>: {{ __('YYYY-MM-DD or DD/MM/YYYY') }}</li>
                    <li>· <span class="font-mono">size</span>: micro / small / medium / large</li>
                </ul>
            </section>

            <section class="card p-5">
                <h3 class="text-xs uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400 mb-3">{{ __('Step 3') }}</h3>
                <p class="text-sm text-slate-700 dark:text-slate-200">{{ __('Drop the file on the left and click Import. You\'ll see how many rows were imported and which were skipped.') }}</p>
            </section>
        </aside>
    </div>
</div>
@endif

</div>
@endsection