@extends('layouts.dashboard')

@section('content')
@include('customers._theme')
<div class="customer-ui max-w-7xl mx-auto space-y-6">

    @if(session('success'))
        <div class="alert alert-success rounded-3xl">
            <span>✅</span>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <div class="rounded-3xl bg-gradient-to-br from-slate-950 via-emerald-950 to-emerald-800 text-white p-6 shadow-xl">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
            <div>
                <div class="text-sm text-white/60">
                    SNYT Field Sales Platform
                </div>

                <h1 class="text-4xl font-black mt-1">
                    {{ auth()->user()->isAdmin() ? 'Customers' : 'My Customers' }}
                </h1>

                <p class="text-white/70 mt-2">
                    Manage customer records, locations, credit settings, and linked orders.
                </p>
            </div>

            <div class="flex flex-wrap gap-2">
                @if(auth()->user()->isAdmin())
                    <a href="{{ route('customers.focus-import') }}" class="btn btn-outline border-white/30 text-white rounded-2xl">📄 Focus Import</a>
                @endif
                <a
                    href="{{ route('customers.import') }}"
                    class="btn btn-outline border-white/30 text-white rounded-2xl"
                >
                    📥 Import
                </a>

                <a
                    href="{{ route('customers.create') }}"
                    class="btn btn-success rounded-2xl"
                >
                    ➕ Add Customer
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
        <div class="rounded-3xl border border-base-300 bg-base-100 p-4 shadow-sm">
            <div class="text-xs text-base-content/50">All</div>
            <div class="text-3xl font-black">{{ number_format($stats['all']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4 shadow-sm">
            <div class="text-xs text-base-content/50">Active</div>
            <div class="text-3xl font-black text-success">{{ number_format($stats['active']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4 shadow-sm">
            <div class="text-xs text-base-content/50">Prospects</div>
            <div class="text-3xl font-black text-warning">{{ number_format($stats['prospect']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4 shadow-sm">
            <div class="text-xs text-base-content/50">Inactive</div>
            <div class="text-3xl font-black text-error">{{ number_format($stats['inactive']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4 shadow-sm">
            <div class="text-xs text-base-content/50">With Location</div>
            <div class="text-3xl font-black text-info">{{ number_format($stats['with_location']) }}</div>
        </div>
    </div>

    <div class="rounded-3xl border border-base-300 bg-base-100 p-5 shadow-sm">
        <form
            method="GET"
            action="{{ route('customers.index') }}"
            class="grid grid-cols-1 md:grid-cols-12 gap-3"
        >
            <div class="{{ auth()->user()->isAdmin() ? 'md:col-span-4' : 'md:col-span-6' }}">
                <input
                    type="search"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Search code, shop, phone, city..."
                    class="input input-bordered w-full rounded-2xl"
                >
            </div>

            <div class="md:col-span-2">
                <select
                    name="status"
                    class="select select-bordered w-full rounded-2xl"
                >
                    <option value="">All statuses</option>
                    <option value="active" @selected(request('status') === 'active')>Active</option>
                    <option value="prospect" @selected(request('status') === 'prospect')>Prospect</option>
                    <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
                </select>
            </div>

            <div class="md:col-span-2">
                <select
                    name="area_id"
                    class="select select-bordered w-full rounded-2xl"
                >
                    <option value="">All areas</option>

                    @foreach($areas as $area)
                        <option
                            value="{{ $area->id }}"
                            @selected(
                                (string) request('area_id')
                                    === (string) $area->id
                            )
                        >
                            {{ $area->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            @if(auth()->user()->isAdmin())
                <div class="md:col-span-2">
                    <select
                        name="salesman_id"
                        class="select select-bordered w-full rounded-2xl"
                    >
                        <option value="">All salesmen</option>

                        @foreach($salesmen as $salesman)
                            <option
                                value="{{ $salesman->id }}"
                                @selected(
                                    (string) request('salesman_id')
                                        === (string) $salesman->id
                                )
                            >
                                {{ $salesman->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif

            <div class="md:col-span-2 flex gap-2">
                <button class="btn btn-primary flex-1 rounded-2xl">
                    Search
                </button>

                @if(request()->query())
                    <a
                        href="{{ route('customers.index') }}"
                        class="btn btn-ghost rounded-2xl"
                    >
                        ✕
                    </a>
                @endif
            </div>
        </form>
    </div>

    @if(auth()->user()->isAdmin())
        <form id="bulk-area-form" method="POST" action="{{ route('customers.bulk-area') }}" class="rounded-3xl border border-base-300 bg-base-100 p-4 shadow-sm flex flex-wrap items-center gap-3" onsubmit="return confirm('Move selected customers to this area?');">
            @csrf
            <strong class="text-sm">Bulk move to area</strong>
            <select name="area_id" class="select select-bordered rounded-xl" required>
                <option value="">Choose area...</option>
                @foreach($areas as $area)
                    @if(strcasecmp($area->name, 'Showroom') !== 0)
                        <option value="{{ $area->id }}">{{ $area->name }}</option>
                    @endif
                @endforeach
            </select>
            <span id="selected-customer-count" class="text-sm opacity-60">0 selected</span>
            <button type="submit" class="btn btn-primary rounded-xl" id="bulk-move-button" disabled>Move selected customers</button>
            <span class="text-xs opacity-60">Select rows below, or select this page. Only selected customers will move.</span>
        </form>
        @if($errors->any())
            <div class="alert alert-error">{{ $errors->first() }}</div>
        @endif
    @endif

    <div class="rounded-3xl border border-base-300 bg-base-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        @if(auth()->user()->isAdmin())
                            <th><input type="checkbox" class="checkbox checkbox-sm" id="select-all-customers" title="Select all customers on this page" aria-label="Select all customers on page"></th>
                        @endif
                        <th>Customer</th>
                        <th>Contact</th>
                        <th>Area</th>

                        @if(auth()->user()->isAdmin())
                            <th>Salesman</th>
                        @endif

                        <th>Status</th>
                        <th>Orders</th>
                        <th>Credit</th>
                        <th></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($customers as $customer)
                        @php
                            $statusClass = match($customer->status) {
                                'active' => 'badge-success',
                                'prospect' => 'badge-warning',
                                'inactive' => 'badge-error',
                                default => 'badge-ghost',
                            };
                        @endphp

                        <tr class="hover">
                            @if(auth()->user()->isAdmin())
                                <td><input form="bulk-area-form" class="checkbox checkbox-sm customer-bulk-checkbox" type="checkbox" name="customer_ids[]" value="{{ $customer->id }}" aria-label="Select {{ $customer->shop_name }}"></td>
                            @endif
                            <td>
                                <a
                                    href="{{ route('customers.show', $customer) }}"
                                    class="font-black text-primary"
                                >
                                    {{ $customer->shop_name }} @if($customer->is_test_data)<span class="badge border-purple-400 bg-purple-500/20 text-purple-300">QA</span>@endif
                                </a>

                                <div class="text-xs text-base-content/40 font-mono">
                                    {{ $customer->customer_code }}
                                </div>
                            </td>

                            <td>
                                <div class="font-bold">
                                    {{ $customer->contact_person ?: '—' }}
                                </div>

                                <div class="text-xs text-base-content/50">
                                    {{ $customer->phone ?: 'No phone' }}
                                </div>
                            </td>

                            <td>
                                {{ $customer->area?->name ?: '—' }}
                            </td>

                            @if(auth()->user()->isAdmin())
                                <td>
                                    {{ $customer->salesman?->name ?: 'Unassigned' }}
                                </td>
                            @endif

                            <td>
                                <span class="badge {{ $statusClass }}">
                                    {{ ucfirst($customer->status) }}
                                </span>
                            </td>

                            <td>
                                <span class="badge badge-ghost">
                                    {{ number_format($customer->orders_count) }}
                                </span>
                            </td>

                            <td class="whitespace-nowrap">
                                @if($customer->credit_limit !== null)
                                    AED {{ number_format((float) $customer->credit_limit, 2) }}
                                @else
                                    —
                                @endif
                            </td>

                            <td>
                                <a
                                    href="{{ route('customers.show', $customer) }}"
                                    class="btn btn-sm btn-primary rounded-xl"
                                >
                                    View
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td
                                colspan="{{ auth()->user()->isAdmin() ? 9 : 7 }}"
                                class="py-16 text-center"
                            >
                                <div class="text-5xl">🏪</div>

                                <div class="text-xl font-black mt-3">
                                    No customers found
                                </div>

                                <div class="text-base-content/50 mt-1">
                                    Add customers manually or import an Excel sheet.
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($customers->hasPages())
            <div class="p-4 border-t border-base-300">
                {{ $customers->links() }}
            </div>
        @endif
    </div>
</div>
@if(auth()->user()->isAdmin())
<script>
document.addEventListener('DOMContentLoaded', function () {
    const boxes = Array.from(document.querySelectorAll('.customer-bulk-checkbox'));
    const all = document.getElementById('select-all-customers');
    const count = document.getElementById('selected-customer-count');
    const button = document.getElementById('bulk-move-button');
    const sync = () => {
        const selected = boxes.filter(box => box.checked).length;
        count.textContent = selected + ' selected';
        button.disabled = !selected;
        all.checked = boxes.length > 0 && selected === boxes.length;
        all.indeterminate = selected > 0 && selected < boxes.length;
    };
    all?.addEventListener('change', () => { boxes.forEach(box => box.checked = all.checked); sync(); });
    boxes.forEach(box => box.addEventListener('change', sync));
    sync();
});
</script>
@endif
@endsection