@extends('layouts.app')

@section('title', 'Company profile')

@section('content')
@php
    $tab = request('tab', 'identity');
    $tabs = [
        'identity'  => 'Company details',
        'contact'   => 'Contact & location',
        'branding'  => 'Logo & branding',
        'financial' => 'Financial defaults',
        'documents' => 'Invoices & numbering',
        'integrations' => 'SMS & maps',
    ];
    $input = 'w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-slate-400 focus:ring-2 focus:ring-slate-200';
    $label = 'mb-1 block text-sm font-medium text-slate-700';
    $help  = 'mt-1 text-xs text-slate-500';
@endphp

<div x-data="{ tab: '{{ $tab }}' }" class="mx-auto max-w-5xl">

    @if ($missing)
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            <p class="font-semibold">Finish setting up your company</p>
            <p class="mt-1">Still to fill: {{ implode(', ', $missing) }}. Invoices, SMS and delivery routes use these details.</p>
        </div>
    @endif

    {{-- Tabs --}}
    <div class="mb-4 overflow-x-auto">
        <div class="flex min-w-max gap-1 rounded-lg bg-white p-1 shadow-sm">
            @foreach ($tabs as $key => $name)
                <button type="button" @click="tab = '{{ $key }}'"
                        class="whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition"
                        :class="tab === '{{ $key }}' ? 'text-white' : 'text-slate-600 hover:bg-slate-100'"
                        :style="tab === '{{ $key }}' ? 'background: var(--brand)' : ''">
                    {{ $name }}
                </button>
            @endforeach
        </div>
    </div>

    <form method="POST" action="{{ route('admin.company.update') }}" enctype="multipart/form-data" class="space-y-4">
        @csrf
        @method('PUT')
        <input type="hidden" name="tab" :value="tab">

        {{-- ============ Company details ============ --}}
        <section x-show="tab === 'identity'" x-cloak class="rounded-xl bg-white p-5 shadow-sm">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">Company details</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="{{ $label }}">Company name <span class="text-red-500">*</span></label>
                    <input name="name" value="{{ old('name', $profile->name) }}" class="{{ $input }}" required>
                    <p class="{{ $help }}">Shown on invoices, receipts and every printed document.</p>
                </div>
                <div>
                    <label class="{{ $label }}">Trading name</label>
                    <input name="trading_name" value="{{ old('trading_name', $profile->trading_name) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Business registration no.</label>
                    <input name="registration_no" value="{{ old('registration_no', $profile->registration_no) }}" class="{{ $input }}" placeholder="PV / BR number">
                </div>
                <div>
                    <label class="{{ $label }}">Tax identification no. (TIN)</label>
                    <input name="tax_id" value="{{ old('tax_id', $profile->tax_id) }}" class="{{ $input }}">
                </div>
                <div x-data="{ vat: {{ old('vat_registered', $profile->vat_registered) ? 'true' : 'false' }} }">
                    <label class="mb-1 flex items-center gap-2 text-sm font-medium text-slate-700">
                        <input type="checkbox" name="vat_registered" value="1" x-model="vat" class="rounded border-slate-300">
                        VAT registered
                    </label>
                    <div x-show="vat" x-cloak class="mt-2 grid grid-cols-2 gap-2">
                        <input name="vat_no" value="{{ old('vat_no', $profile->vat_no) }}" class="{{ $input }}" placeholder="VAT number">
                        <input name="vat_rate" type="number" step="0.01" value="{{ old('vat_rate', $profile->vat_rate) }}" class="{{ $input }}" placeholder="Rate %">
                    </div>
                </div>
            </div>
        </section>

        {{-- ============ Contact & location ============ --}}
        <section x-show="tab === 'contact'" x-cloak class="rounded-xl bg-white p-5 shadow-sm">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">Contact &amp; location</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="{{ $label }}">Address line 1 <span class="text-red-500">*</span></label>
                    <input name="address_line1" value="{{ old('address_line1', $profile->address_line1) }}" class="{{ $input }}" required>
                </div>
                <div class="sm:col-span-2">
                    <label class="{{ $label }}">Address line 2</label>
                    <input name="address_line2" value="{{ old('address_line2', $profile->address_line2) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">City</label>
                    <input name="city" value="{{ old('city', $profile->city) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">District</label>
                    <input name="district" value="{{ old('district', $profile->district) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Postal code</label>
                    <input name="postal_code" value="{{ old('postal_code', $profile->postal_code) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Country</label>
                    <input name="country" value="{{ old('country', $profile->country) }}" class="{{ $input }}" required>
                </div>
                <div>
                    <label class="{{ $label }}">Telephone</label>
                    <input name="phone" value="{{ old('phone', $profile->phone) }}" class="{{ $input }}" placeholder="027-2245726">
                </div>
                <div>
                    <label class="{{ $label }}">Mobile</label>
                    <input name="mobile" value="{{ old('mobile', $profile->mobile) }}" class="{{ $input }}" placeholder="0778927466">
                </div>
                <div>
                    <label class="{{ $label }}">WhatsApp</label>
                    <input name="whatsapp" value="{{ old('whatsapp', $profile->whatsapp) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Email</label>
                    <input name="email" type="email" value="{{ old('email', $profile->email) }}" class="{{ $input }}">
                </div>
                <div class="sm:col-span-2">
                    <label class="{{ $label }}">Website</label>
                    <input name="website" value="{{ old('website', $profile->website) }}" class="{{ $input }}">
                </div>

                <div class="sm:col-span-2 rounded-lg border border-slate-200 p-4"
                     x-data="{
                        locating: false,
                        locate() {
                            if (!navigator.geolocation) return alert('Location is not available on this device.');
                            this.locating = true;
                            navigator.geolocation.getCurrentPosition(
                                p => { $refs.lat.value = p.coords.latitude.toFixed(7); $refs.lng.value = p.coords.longitude.toFixed(7); this.locating = false; },
                                () => { alert('Could not read the location.'); this.locating = false; },
                                { enableHighAccuracy: true, timeout: 10000 }
                            );
                        }
                     }">
                    <p class="{{ $label }}">Nursery GPS location</p>
                    <p class="mb-3 text-xs text-slate-500">Delivery routes are calculated from this point, so set it while standing at the nursery gate.</p>
                    <div class="grid gap-2 sm:grid-cols-3">
                        <input x-ref="lat" name="latitude" value="{{ old('latitude', $profile->latitude) }}" class="{{ $input }}" placeholder="Latitude">
                        <input x-ref="lng" name="longitude" value="{{ old('longitude', $profile->longitude) }}" class="{{ $input }}" placeholder="Longitude">
                        <button type="button" @click="locate()" class="rounded-lg border border-slate-300 px-3 py-2 text-sm font-medium hover:bg-slate-50" :disabled="locating">
                            <span x-show="!locating">Use my location</span>
                            <span x-show="locating" x-cloak>Locating…</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        {{-- ============ Branding ============ --}}
        <section x-show="tab === 'branding'" x-cloak class="rounded-xl bg-white p-5 shadow-sm">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">Logo &amp; branding</h2>
            <div class="grid gap-5 sm:grid-cols-3">
                @foreach ([['logo', 'Logo', 'Square PNG works best. Shown in the app and on invoices.'], ['letterhead', 'Letterhead', 'Full-width image printed at the top of documents.'], ['favicon', 'Browser icon', 'Small square icon for the browser tab.']] as [$field, $name, $hint])
                    <div>
                        <label class="{{ $label }}">{{ $name }}</label>
                        @if ($profile->{$field . '_path'})
                            <div class="mb-2 flex items-center gap-2">
                                <img src="{{ Storage::disk('public')->url($profile->{$field . '_path'}) }}" alt="" class="h-16 w-16 rounded border border-slate-200 bg-white object-contain p-1">
                                <a href="{{ route('admin.company.image.remove', $field) }}"
                                   onclick="return confirm('Remove this image?')"
                                   class="text-xs font-medium text-red-600 hover:underline">Remove</a>
                            </div>
                        @endif
                        <input type="file" name="{{ $field }}" accept="image/*" class="block w-full text-xs text-slate-600 file:mr-3 file:rounded-md file:border-0 file:bg-slate-100 file:px-3 file:py-2 file:text-sm">
                        <p class="{{ $help }}">{{ $hint }}</p>
                    </div>
                @endforeach

                <div>
                    <label class="{{ $label }}">Brand colour</label>
                    <div class="flex gap-2">
                        <input type="color" name="brand_color" value="{{ old('brand_color', $profile->brand_color) }}" class="h-10 w-14 rounded border border-slate-300">
                        <input value="{{ old('brand_color', $profile->brand_color) }}" class="{{ $input }}" readonly>
                    </div>
                </div>
                <div>
                    <label class="{{ $label }}">Accent colour</label>
                    <div class="flex gap-2">
                        <input type="color" name="accent_color" value="{{ old('accent_color', $profile->accent_color) }}" class="h-10 w-14 rounded border border-slate-300">
                        <input value="{{ old('accent_color', $profile->accent_color) }}" class="{{ $input }}" readonly>
                    </div>
                </div>
            </div>
        </section>

        {{-- ============ Financial defaults ============ --}}
        <section x-show="tab === 'financial'" x-cloak class="rounded-xl bg-white p-5 shadow-sm">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">Financial &amp; operating defaults</h2>
            <div class="grid gap-4 sm:grid-cols-3">
                <div>
                    <label class="{{ $label }}">Currency</label>
                    <select name="currency_code" class="{{ $input }}">
                        @foreach ($currencies as $code => $name)
                            <option value="{{ $code }}" @selected(old('currency_code', $profile->currency_code) === $code)>{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="{{ $label }}">Currency symbol</label>
                    <input name="currency_symbol" value="{{ old('currency_symbol', $profile->currency_symbol) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Decimal places</label>
                    <input name="decimal_places" type="number" min="0" max="4" value="{{ old('decimal_places', $profile->decimal_places) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Time zone</label>
                    <select name="timezone" class="{{ $input }}">
                        @foreach ($timezones as $tz)
                            <option value="{{ $tz }}" @selected(old('timezone', $profile->timezone) === $tz)>{{ $tz }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="{{ $label }}">Date format</label>
                    <select name="date_format" class="{{ $input }}">
                        @foreach (['d/m/Y' => '31/12/2026', 'Y-m-d' => '2026-12-31', 'd-M-Y' => '31-Dec-2026'] as $fmt => $sample)
                            <option value="{{ $fmt }}" @selected(old('date_format', $profile->date_format) === $fmt)>{{ $sample }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="{{ $label }}">Financial year starts</label>
                    <select name="financial_year_start_month" class="{{ $input }}">
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" @selected((int) old('financial_year_start_month', $profile->financial_year_start_month) === $m)>
                                {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                            </option>
                        @endfor
                    </select>
                </div>
                <div>
                    <label class="{{ $label }}">Default credit days</label>
                    <input name="default_credit_days" type="number" min="0" value="{{ old('default_credit_days', $profile->default_credit_days) }}" class="{{ $input }}">
                    <p class="{{ $help }}">Used for new shops unless changed on the shop.</p>
                </div>
                <div>
                    <label class="{{ $label }}">Default credit limit</label>
                    <input name="default_credit_limit" type="number" step="0.01" min="0" value="{{ old('default_credit_limit', $profile->default_credit_limit) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Default visit cycle (days)</label>
                    <input name="default_visit_cycle_days" type="number" min="1" value="{{ old('default_visit_cycle_days', $profile->default_visit_cycle_days) }}" class="{{ $input }}">
                    <p class="{{ $help }}">How often a shop should be visited.</p>
                </div>
                <div>
                    <label class="{{ $label }}">Inactive customer after (days)</label>
                    <input name="inactive_customer_days" type="number" min="7" value="{{ old('inactive_customer_days', $profile->inactive_customer_days) }}" class="{{ $input }}">
                    <p class="{{ $help }}">No order for this long → shows on the inactive list.</p>
                </div>
            </div>
        </section>

        {{-- ============ Documents ============ --}}
        <section x-show="tab === 'documents'" x-cloak class="rounded-xl bg-white p-5 shadow-sm">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">Invoices &amp; numbering</h2>

            <div class="grid gap-4 sm:grid-cols-3">
                @foreach ([
                    ['invoice_prefix', 'Invoice prefix', 'invoice_next_no', 'Next invoice no.'],
                    ['order_prefix', 'Order prefix', 'order_next_no', 'Next order no.'],
                    ['receipt_prefix', 'Receipt prefix', 'receipt_next_no', 'Next receipt no.'],
                ] as [$pf, $pfLabel, $nf, $nfLabel])
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="{{ $label }}">{{ $pfLabel }}</label>
                            <input name="{{ $pf }}" value="{{ old($pf, $profile->{$pf}) }}" class="{{ $input }}">
                        </div>
                        <div>
                            <label class="{{ $label }}">{{ $nfLabel }}</label>
                            <input name="{{ $nf }}" type="number" min="1" value="{{ old($nf, $profile->{$nf}) }}" class="{{ $input }}">
                        </div>
                    </div>
                @endforeach

                <div>
                    <label class="{{ $label }}">GRN prefix</label>
                    <input name="grn_prefix" value="{{ old('grn_prefix', $profile->grn_prefix) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Collection prefix</label>
                    <input name="collection_prefix" value="{{ old('collection_prefix', $profile->collection_prefix) }}" class="{{ $input }}">
                </div>
                <div>
                    <label class="{{ $label }}">Loading prefix</label>
                    <input name="load_prefix" value="{{ old('load_prefix', $profile->load_prefix) }}" class="{{ $input }}">
                </div>

                <div>
                    <label class="{{ $label }}">Invoice paper</label>
                    <select name="invoice_paper" class="{{ $input }}">
                        <option value="a4" @selected(old('invoice_paper', $profile->invoice_paper) === 'a4')>A4 printer</option>
                        <option value="thermal80" @selected(old('invoice_paper', $profile->invoice_paper) === 'thermal80')>80&nbsp;mm thermal receipt</option>
                    </select>
                </div>
                <div class="flex items-end">
                    <label class="flex items-center gap-2 text-sm font-medium text-slate-700">
                        <input type="checkbox" name="show_logo_on_invoice" value="1" @checked(old('show_logo_on_invoice', $profile->show_logo_on_invoice)) class="rounded border-slate-300">
                        Print logo on invoices
                    </label>
                </div>
                <div>
                    <label class="{{ $label }}">Bank details (printed on invoice)</label>
                    <input name="bank_details" value="{{ old('bank_details', $profile->bank_details) }}" class="{{ $input }}" placeholder="BOC, Hingurakgoda, A/C 1234567890">
                </div>

                <div class="sm:col-span-3">
                    <label class="{{ $label }}">Invoice footer</label>
                    <textarea name="invoice_footer" rows="2" class="{{ $input }}">{{ old('invoice_footer', $profile->invoice_footer) }}</textarea>
                </div>
                <div class="sm:col-span-3">
                    <label class="{{ $label }}">Receipt footer</label>
                    <textarea name="receipt_footer" rows="2" class="{{ $input }}">{{ old('receipt_footer', $profile->receipt_footer) }}</textarea>
                </div>
                <div class="sm:col-span-3">
                    <label class="{{ $label }}">Terms &amp; conditions</label>
                    <textarea name="terms_and_conditions" rows="3" class="{{ $input }}">{{ old('terms_and_conditions', $profile->terms_and_conditions) }}</textarea>
                </div>
            </div>
        </section>

        {{-- ============ Integrations ============ --}}
        <section x-show="tab === 'integrations'" x-cloak class="rounded-xl bg-white p-5 shadow-sm">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-500">SMS &amp; maps</h2>

            <div x-data="{ sms: {{ old('sms_enabled', $profile->sms_enabled) ? 'true' : 'false' }} }" class="grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="flex items-center gap-2 text-sm font-medium text-slate-700">
                        <input type="checkbox" name="sms_enabled" value="1" x-model="sms" class="rounded border-slate-300">
                        Send SMS to customers, farmers and staff
                    </label>
                </div>

                <template x-if="sms">
                    <div class="sm:col-span-2 grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="{{ $label }}">Registered sender name</label>
                            <input name="sms_sender_id" value="{{ old('sms_sender_id', $profile->sms_sender_id) }}" class="{{ $input }}" maxlength="11" placeholder="NURSERY">
                            <p class="{{ $help }}">As approved by the SMS provider (max 11 characters).</p>
                        </div>
                        <div>
                            <label class="{{ $label }}">SMS provider</label>
                            <input name="sms_provider" value="{{ old('sms_provider', $profile->sms_provider) }}" class="{{ $input }}" placeholder="Dialog / Mobitel / Text.lk">
                        </div>
                        <div>
                            <label class="{{ $label }}">API key</label>
                            <input name="sms_api_key" type="password" value="{{ old('sms_api_key', $profile->sms_api_key) }}" class="{{ $input }}" autocomplete="off">
                        </div>
                        <div>
                            <label class="{{ $label }}">API secret</label>
                            <input name="sms_api_secret" type="password" value="{{ old('sms_api_secret', $profile->sms_api_secret) }}" class="{{ $input }}" autocomplete="off">
                        </div>
                    </div>
                </template>

                <div>
                    <label class="{{ $label }}">Google Maps API key</label>
                    <input name="google_maps_api_key" type="password" value="{{ old('google_maps_api_key', $profile->google_maps_api_key) }}" class="{{ $input }}" autocomplete="off">
                    <p class="{{ $help }}">Used for delivery routes and live tracking.</p>
                </div>
                <div>
                    <label class="{{ $label }}">Driver link expires after (hours)</label>
                    <input name="driver_link_expiry_hours" type="number" min="1" max="168" value="{{ old('driver_link_expiry_hours', $profile->driver_link_expiry_hours) }}" class="{{ $input }}">
                    <p class="{{ $help }}">48 hours = the 2-day expiry agreed in the proposal.</p>
                </div>
            </div>
        </section>

        {{-- Save bar --}}
        <div class="sticky bottom-0 flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-lg">
            <p class="text-xs text-slate-500">Changes apply everywhere immediately.</p>
            <div class="flex gap-2">
                <a href="{{ route('dashboard') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium hover:bg-slate-50">Cancel</a>
                <button class="rounded-lg px-5 py-2 text-sm font-semibold text-white shadow-sm" style="background: var(--brand)">Save profile</button>
            </div>
        </div>
    </form>
</div>
@endsection