@extends('layouts.app')
@section('title', 'Commercial Contract Accounts')
@section('breadcrumb')<span class="text-white">Commercial Contract Accounts</span>@endsection

@section('content')
<div class="space-y-6" x-data="{ showAdd: false }">

    <div class="flex items-center justify-between">
        <div>
            <h1 class="mb-1">Commercial Contract Accounts</h1>
            <p class="text-slate-400 text-sm">Manage builder and private contract accounts</p>
        </div>
        <button @click="showAdd = !showAdd" class="btn" style="background:#7c3aed;color:#ede9fe;">
            <i class="fas fa-plus mr-2"></i>Add Account
        </button>
    </div>

    {{-- Add form --}}
    <div x-show="showAdd" x-cloak class="card p-5">
        <h3 class="mb-4">New Commercial Account</h3>
        <form method="POST" action="{{ route('commercial-accounts.store') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @csrf
            <div>
                <label>Account / Customer Name *</label>
                <input type="text" name="name" class="input" placeholder="e.g. Clarendon Homes" required value="{{ old('name') }}">
            </div>
            <div>
                <label>Account Type</label>
                <select name="type" class="input">
                    <option value="builder">Builder</option>
                    <option value="private">Private</option>
                    <option value="both">Builder &amp; Private</option>
                </select>
            </div>
            <div>
                <label>Notes</label>
                <input type="text" name="notes" class="input" placeholder="Optional notes" value="{{ old('notes') }}">
            </div>
            <div class="md:col-span-3 flex justify-end gap-2">
                <button type="button" @click="showAdd=false" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Create Account</button>
            </div>
        </form>
    </div>

    @if($customers->isEmpty())
    <div class="card p-10 text-center text-slate-500">
        <i class="fas fa-handshake text-4xl mb-3 block text-slate-600"></i>
        <p>No commercial accounts yet. Click <strong class="text-white">Add Account</strong> to get started.</p>
    </div>
    @else
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($customers as $c)
        <a href="{{ route('commercial-accounts.show', $c) }}"
           class="card p-5 flex flex-col gap-3 hover:border-purple-600 transition-colors"
           style="border:1px solid #334155; text-decoration:none;">
            <div class="flex items-start justify-between">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                    <i class="fas fa-{{ $c->type === 'private' ? 'user' : 'building' }} text-purple-300 text-sm"></i>
                </div>
                <span class="text-xs px-2 py-0.5 rounded-full
                    {{ $c->type === 'builder' ? 'bg-blue-900/40 text-blue-300' : ($c->type === 'private' ? 'bg-green-900/40 text-green-300' : 'bg-purple-900/40 text-purple-300') }}">
                    {{ $c->typeLabel() }}
                </span>
            </div>
            <div>
                <div class="text-white font-semibold">{{ $c->name }}</div>
                @if($c->notes)<div class="text-xs text-slate-500 mt-0.5">{{ Str::limit($c->notes,60) }}</div>@endif
            </div>
            <div class="flex gap-4 text-xs text-slate-500 border-t border-slate-700 pt-3">
                <span><i class="fas fa-file-invoice mr-1"></i>{{ $c->builder_pos_count }} PO{{ $c->builder_pos_count !== 1 ? 's' : '' }}</span>
                <span><i class="fas fa-exchange-alt mr-1"></i>{{ $c->builder_ets_count }} ETS</span>
                <span><i class="fas fa-file-contract mr-1"></i>{{ $c->private_details_count }} Detail{{ $c->private_details_count !== 1 ? 's' : '' }}</span>
            </div>
        </a>
        @endforeach
    </div>
    @endif

</div>
@endsection