@extends('layouts.app')

@section('title', 'Add Client')

@section('content')
<div class="max-w-2xl mx-auto px-8 py-8">

    {{-- Back link --}}
    <a href="{{ route('clients.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700 transition-colors duration-200 mb-6"
       data-animate>
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Clients
    </a>

    <h1 class="text-xl font-semibold text-slate-900 mb-6" data-animate>Add client</h1>

    <form method="POST" action="{{ route('clients.store') }}">
        @csrf

        {{-- Global validation error banner --}}
        @if ($errors->any())
            <div class="mb-6 rounded-xl bg-red-50 border border-red-100 px-4 py-3" data-animate>
                <p class="text-sm font-medium text-red-600 mb-1">Please fix the following errors:</p>
                <ul class="list-disc list-inside space-y-0.5">
                    @foreach ($errors->all() as $error)
                        <li class="text-xs text-red-500">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Form card --}}
        <div class="bg-white border border-slate-100 rounded-xl p-8 space-y-8" data-animate>

            {{-- Section 1: Contact details --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Contact details</p>
                <div class="space-y-4">

                    <div>
                        <label for="name" class="block text-sm font-medium text-slate-700 mb-1.5">
                            Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text"
                               id="name"
                               name="name"
                               value="{{ old('name') }}"
                               required
                               autocomplete="organization"
                               class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('name') border-red-300 @enderror"
                               placeholder="e.g. Acme Corporation">
                        @error('name')
                            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-4">

                        <div>
                            <label for="email" class="block text-sm font-medium text-slate-700 mb-1.5">
                                Email <span class="text-red-400">*</span>
                            </label>
                            <input type="email"
                                   id="email"
                                   name="email"
                                   value="{{ old('email') }}"
                                   required
                                   autocomplete="email"
                                   class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('email') border-red-300 @enderror"
                                   placeholder="contact@example.com">
                            @error('email')
                                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="phone" class="block text-sm font-medium text-slate-700 mb-1.5">
                                Phone <span class="text-slate-400 font-normal">(optional)</span>
                            </label>
                            <input type="tel"
                                   id="phone"
                                   name="phone"
                                   value="{{ old('phone') }}"
                                   autocomplete="tel"
                                   class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('phone') border-red-300 @enderror"
                                   placeholder="+44 7700 000000">
                            @error('phone')
                                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                    </div>

                </div>
            </div>

            <div class="border-t border-slate-100"></div>

            {{-- Section 2: Address --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Address</p>

                <div>
                    <label for="address" class="block text-sm font-medium text-slate-700 mb-1.5">
                        Address <span class="text-slate-400 font-normal">(optional)</span>
                    </label>
                    <textarea id="address"
                              name="address"
                              rows="3"
                              class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('address') border-red-300 @enderror"
                              placeholder="Street, city, postcode&hellip;">{{ old('address') }}</textarea>
                    @error('address')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="border-t border-slate-100"></div>

            {{-- Section 3: Notes --}}
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Notes</p>

                <div>
                    <label for="notes" class="block text-sm font-medium text-slate-700 mb-1.5">
                        Internal notes <span class="text-slate-400 font-normal">(optional)</span>
                    </label>
                    <textarea id="notes"
                              name="notes"
                              rows="4"
                              class="w-full border border-slate-200 rounded-lg px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors duration-200 @error('notes') border-red-300 @enderror"
                              placeholder="Internal notes — not visible to client&hellip;">{{ old('notes') }}</textarea>
                    @error('notes')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Legal & Business Details --}}
            <div class="border-t border-slate-100 pt-6 mt-2">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Legal &amp; Business Details</p>
                <div class="space-y-4">
                    <div>
                        <label for="company_legal_name" class="block text-sm font-medium text-slate-700 mb-1">Company Legal Name</label>
                        <input type="text" id="company_legal_name" name="company_legal_name"
                               value="{{ old('company_legal_name', '') }}"
                               placeholder="e.g. UFQ AL-AQSA Aluminium Factory L.L.C"
                               class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="po_box" class="block text-sm font-medium text-slate-700 mb-1">P.O. Box</label>
                            <input type="text" id="po_box" name="po_box"
                                   value="{{ old('po_box', '') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="city" class="block text-sm font-medium text-slate-700 mb-1">City</label>
                            <input type="text" id="city" name="city"
                                   value="{{ old('city', '') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="country" class="block text-sm font-medium text-slate-700 mb-1">Country</label>
                            <input type="text" id="country" name="country"
                                   value="{{ old('country', 'United Kingdom') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                        <div>
                            <label for="vat_number" class="block text-sm font-medium text-slate-700 mb-1">
                                VAT Number
                                <span class="text-slate-400 font-normal">(optional)</span>
                            </label>
                            <input type="text" id="vat_number" name="vat_number"
                                   value="{{ old('vat_number', '') }}"
                                   class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- Form footer --}}
        <div class="flex items-center justify-end gap-3 mt-6" data-animate>
            <a href="{{ route('clients.index') }}"
               class="px-4 py-2.5 bg-white border border-slate-200 hover:border-slate-300 text-slate-700 text-sm font-medium rounded-lg transition-colors duration-150">
                Cancel
            </a>
            <button type="submit"
                    class="px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-semibold rounded-lg transition-colors duration-150 cursor-pointer">
                Add client
            </button>
        </div>

    </form>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;

    var els = document.querySelectorAll('[data-animate]');
    if (els.length) {
        Motion.animate(els, { opacity: [0, 1], y: [16, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }

    document.querySelectorAll('input, select, textarea').forEach(function(el) {
        el.addEventListener('focus', function() {
            Motion.animate(el, { scale: [1, 1.005] }, { duration: 0.15, easing: 'ease-out' });
        });
        el.addEventListener('blur', function() {
            Motion.animate(el, { scale: [1.005, 1] }, { duration: 0.15, easing: 'ease-out' });
        });
    });
})();
</script>
@endsection