@extends('layouts.app')
@section('title', $commercialAccount->name . ' — Commercial Account')
@section('breadcrumb')
<a href="{{ route('commercial-accounts.index') }}" class="hover:text-white">Commercial Accounts</a>
<i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i>
<span class="text-white">{{ $commercialAccount->name }}</span>
@endsection

@section('content')
<div class="space-y-5" x-data="{ tab: '{{ $tab }}' }">

{{-- ── Header ── --}}
<div class="card p-5" x-data="{ editMode: false }">
    <div x-show="!editMode" class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background:#2d1a5e;">
                <i class="fas fa-{{ $commercialAccount->type === 'private' ? 'user' : 'building' }} text-purple-300"></i>
            </div>
            <div>
                <div class="flex items-center gap-3">
                    <h1>{{ $commercialAccount->name }}</h1>
                    <span class="text-xs px-2 py-0.5 rounded-full
                        {{ $commercialAccount->type === 'builder' ? 'bg-blue-900/40 text-blue-300' : ($commercialAccount->type === 'private' ? 'bg-green-900/40 text-green-300' : 'bg-purple-900/40 text-purple-300') }}">
                        {{ $commercialAccount->typeLabel() }}
                    </span>
                </div>
                @if($commercialAccount->notes)<p class="text-slate-400 text-sm mt-0.5">{{ $commercialAccount->notes }}</p>@endif
            </div>
        </div>
        <div class="flex gap-2">
            <button @click="editMode=true" class="btn btn-secondary btn-sm"><i class="fas fa-edit mr-1"></i>Edit</button>
            <form method="POST" action="{{ route('commercial-accounts.destroy', $commercialAccount) }}"
                  onsubmit="return confirm('Delete this account and ALL its records?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash mr-1"></i>Delete</button>
            </form>
        </div>
    </div>
    <div x-show="editMode" x-cloak>
        <form method="POST" action="{{ route('commercial-accounts.update', $commercialAccount) }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @csrf @method('PUT')
            <div>
                <label>Account / Customer Name *</label>
                <input type="text" name="name" class="input" value="{{ $commercialAccount->name }}" required>
            </div>
            <div>
                <label>Account Type</label>
                <select name="type" class="input">
                    <option value="builder"  {{ $commercialAccount->type==='builder'  ? 'selected':'' }}>Builder</option>
                    <option value="private"  {{ $commercialAccount->type==='private'  ? 'selected':'' }}>Private</option>
                    <option value="both"     {{ $commercialAccount->type==='both'     ? 'selected':'' }}>Builder &amp; Private</option>
                </select>
            </div>
            <div>
                <label>Notes</label>
                <input type="text" name="notes" class="input" value="{{ $commercialAccount->notes }}">
            </div>
            <div class="md:col-span-3 flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save</button>
                <button type="button" @click="editMode=false" class="btn btn-secondary">Cancel</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Tabs ── --}}
<div class="flex gap-1 border-b border-slate-700">
    <button @click="tab='builder'" :class="tab==='builder' ? 'tab active' : 'tab'">
        <i class="fas fa-building mr-2"></i>Builder Contracts
    </button>
    <button @click="tab='private'" :class="tab==='private' ? 'tab active' : 'tab'">
        <i class="fas fa-file-contract mr-2"></i>Private Contracts
    </button>
</div>

{{-- ════════════════════════════════════════════════════════════ --}}
{{-- TAB: BUILDER CONTRACTS                                      --}}
{{-- ════════════════════════════════════════════════════════════ --}}
<div x-show="tab==='builder'" class="space-y-6">

    {{-- Contract Amount summary --}}
    @php
        $builderContractAmt = $commercialAccount->builderPos->where('contract_related', true)->sum('po_amount');
        $builderTotalPo = $commercialAccount->builderPos->sum('po_amount');
    @endphp
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="card p-4" style="border:1px solid #7c3aed;">
            <div class="text-xs text-slate-500 uppercase tracking-wide mb-1">Contract Amount</div>
            <div class="text-2xl font-bold text-purple-300">${{ number_format($builderContractAmt, 2) }}</div>
            <div class="text-xs text-slate-500 mt-1">Auto-calculated from Contract-Related POs below</div>
        </div>
        <div class="card p-4">
            <div class="text-xs text-slate-500 uppercase tracking-wide mb-1">Total PO Value</div>
            <div class="text-2xl font-bold text-white">${{ number_format($builderTotalPo, 2) }}</div>
            <div class="text-xs text-slate-500 mt-1">Sum of all purchase orders</div>
        </div>
    </div>

    {{-- ── Purchase Orders ── --}}
    <div class="card overflow-hidden" id="builder-pos">
        <div class="flex items-center justify-between px-5 py-3 border-b border-slate-700" style="background:#1a0a2e;">
            <h3 class="text-white flex items-center gap-2">
                <i class="fas fa-file-invoice text-purple-300"></i> Purchase Orders
            </h3>
            <span class="text-xs text-slate-400">{{ $commercialAccount->builderPos->count() }} record{{ $commercialAccount->builderPos->count()!==1?'s':'' }}</span>
        </div>

        @if($commercialAccount->builderPos->count())
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700" style="background:#0f172a;">
                        <th class="px-3 py-2 text-right">P/O Amount</th>
                        <th class="px-3 py-2 text-left">P/O Number</th>
                        <th class="px-3 py-2 text-left">P/O Date</th>
                        <th class="px-3 py-2 text-left">Invoice No.</th>
                        <th class="px-3 py-2 text-left">Invoice Date</th>
                        <th class="px-3 py-2 text-left">Inv Paid</th>
                        <th class="px-3 py-2 text-center">Contract Related</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($commercialAccount->builderPos as $po)
                    <tr class="border-b border-slate-800 hover:bg-slate-800/30">
                        <td class="px-3 py-2 text-right text-white font-semibold">${{ number_format($po->po_amount, 2) }}</td>
                        <td class="px-3 py-2 text-blue-300 font-mono text-xs">{{ $po->po_number ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $po->po_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $po->invoice_no ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $po->invoice_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $po->inv_paid_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-center">
                            @if($po->contract_related)
                            <span class="text-green-400 text-xs font-semibold">Yes</span>
                            @else
                            <span class="text-slate-600 text-xs">No</span>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-right">
                            <form method="POST" action="{{ route('commercial-accounts.builder-pos.destroy', [$commercialAccount, $po]) }}"
                                  onsubmit="return confirm('Remove this PO?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        {{-- Add PO form --}}
        <div class="p-4 border-t border-slate-700" style="background:#0d1626;" x-data="{ open: false }">
            <button @click="open=!open" class="text-sm text-purple-400 hover:text-purple-300 flex items-center gap-1">
                <i class="fas fa-plus text-xs"></i> Add Purchase Order
            </button>
            <form x-show="open" x-cloak method="POST"
                  action="{{ route('commercial-accounts.builder-pos.store', $commercialAccount) }}"
                  class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3">
                @csrf
                <div>
                    <label>P/O Amount *</label>
                    <input type="number" name="po_amount" step="0.01" min="0" class="input" required placeholder="0.00">
                </div>
                <div>
                    <label>P/O Number</label>
                    <input type="text" name="po_number" class="input" placeholder="e.g. 2991111-009">
                </div>
                <div>
                    <label>P/O Date</label>
                    <input type="date" name="po_date" class="input">
                </div>
                <div>
                    <label>Invoice No.</label>
                    <input type="text" name="invoice_no" class="input" placeholder="Invoice number">
                </div>
                <div>
                    <label>Invoice Date</label>
                    <input type="date" name="invoice_date" class="input">
                </div>
                <div>
                    <label>Inv Paid Date</label>
                    <input type="date" name="inv_paid_date" class="input">
                </div>
                <div class="flex items-end gap-2">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="contract_related" value="1" class="w-4 h-4 rounded">
                        <span class="text-xs text-slate-300">Contract Related</span>
                    </label>
                </div>
                <div class="flex items-end">
                    <button type="submit" class="btn btn-primary btn-sm w-full justify-center">
                        <i class="fas fa-plus mr-1"></i>Add
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ── ETS / Purchase Order Requests ── --}}
    <div class="card overflow-hidden" id="builder-ets">
        <div class="flex items-center justify-between px-5 py-3 border-b border-slate-700" style="background:#1a0a2e;">
            <h3 class="text-white flex items-center gap-2">
                <i class="fas fa-exchange-alt text-purple-300"></i> ETS / Purchase Order Requests
            </h3>
            <span class="text-xs text-slate-400">{{ $commercialAccount->builderEts->count() }} record{{ $commercialAccount->builderEts->count()!==1?'s':'' }}</span>
        </div>

        @if($commercialAccount->builderEts->count())
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700" style="background:#0f172a;">
                        <th class="px-3 py-2 text-left">Customer Rep</th>
                        <th class="px-3 py-2 text-left">ETS Date Request</th>
                        <th class="px-3 py-2 text-right">ETS Amount</th>
                        <th class="px-3 py-2 text-left">ETS Reference</th>
                        <th class="px-3 py-2 text-left">ETS Received</th>
                        <th class="px-3 py-2 text-left">ETS Ref No.</th>
                        <th class="px-3 py-2 text-center">Reg. Invoicing</th>
                        <th class="px-3 py-2 text-left">Comments</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($commercialAccount->builderEts as $ets)
                    <tr class="border-b border-slate-800 hover:bg-slate-800/30">
                        <td class="px-3 py-2 text-slate-200">{{ $ets->customer_rep ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $ets->ets_date_request?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-right text-white font-semibold">${{ number_format($ets->ets_amount, 2) }}</td>
                        <td class="px-3 py-2 text-slate-300 text-xs">{{ $ets->ets_reference ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $ets->ets_received_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-blue-300 font-mono text-xs">{{ $ets->ets_ref_no ?? '—' }}</td>
                        <td class="px-3 py-2 text-center">
                            @if($ets->registered_for_invoicing)
                            <span class="text-green-400 text-xs font-semibold">Yes</span>
                            @else
                            <span class="text-slate-600 text-xs">—</span>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-slate-400 text-xs max-w-xs">{{ Str::limit($ets->comments, 60) ?? '—' }}</td>
                        <td class="px-3 py-2 text-right">
                            <form method="POST" action="{{ route('commercial-accounts.builder-ets.destroy', [$commercialAccount, $ets]) }}"
                                  onsubmit="return confirm('Remove this ETS record?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        {{-- Add ETS form --}}
        <div class="p-4 border-t border-slate-700" style="background:#0d1626;" x-data="{ open: false }">
            <button @click="open=!open" class="text-sm text-purple-400 hover:text-purple-300 flex items-center gap-1">
                <i class="fas fa-plus text-xs"></i> Add ETS Request
            </button>
            <form x-show="open" x-cloak method="POST"
                  action="{{ route('commercial-accounts.builder-ets.store', $commercialAccount) }}"
                  class="mt-3 grid grid-cols-2 md:grid-cols-3 gap-3">
                @csrf
                <div>
                    <label>Customer Representative</label>
                    <input type="text" name="customer_rep" class="input" placeholder="e.g. Supervisor - John Smith">
                </div>
                <div>
                    <label>ETS Date Request</label>
                    <input type="date" name="ets_date_request" class="input">
                </div>
                <div>
                    <label>ETS Amount *</label>
                    <input type="number" name="ets_amount" step="0.01" min="0" class="input" required placeholder="0.00">
                </div>
                <div>
                    <label>ETS Reference</label>
                    <input type="text" name="ets_reference" class="input" placeholder="e.g. Work Order 2299">
                </div>
                <div>
                    <label>ETS Received Date</label>
                    <input type="date" name="ets_received_date" class="input">
                </div>
                <div>
                    <label>ETS Ref No.</label>
                    <input type="text" name="ets_ref_no" class="input" placeholder="Reference number">
                </div>
                <div class="md:col-span-2">
                    <label>Comments</label>
                    <input type="text" name="comments" class="input" placeholder="Any comments or follow-up notes">
                </div>
                <div class="flex items-end gap-3">
                    <label class="flex items-center gap-2 cursor-pointer mt-1">
                        <input type="checkbox" name="registered_for_invoicing" value="1" class="w-4 h-4 rounded">
                        <span class="text-xs text-slate-300">Registered for Invoicing</span>
                    </label>
                </div>
                <div class="md:col-span-3 flex justify-end">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus mr-1"></i>Add ETS Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ════════════════════════════════════════════════════════════ --}}
{{-- TAB: PRIVATE CONTRACTS                                      --}}
{{-- ════════════════════════════════════════════════════════════ --}}
<div x-show="tab==='private'" class="space-y-6">

    @php
        $privateContractAmt = $commercialAccount->privateDetails->where('contract_related', true)->sum('amount');
        $privateTotalAmt    = $commercialAccount->privateDetails->sum('amount');
        $totalPayments      = $commercialAccount->privatePayments->sum('payment_amount');
    @endphp
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="card p-4" style="border:1px solid #7c3aed;">
            <div class="text-xs text-slate-500 uppercase tracking-wide mb-1">Contract Amount</div>
            <div class="text-2xl font-bold text-purple-300">${{ number_format($privateContractAmt, 2) }}</div>
            <div class="text-xs text-slate-500 mt-1">Auto-calculated from Contract-Related items</div>
        </div>
        <div class="card p-4">
            <div class="text-xs text-slate-500 uppercase tracking-wide mb-1">Total Value</div>
            <div class="text-2xl font-bold text-white">${{ number_format($privateTotalAmt, 2) }}</div>
            <div class="text-xs text-slate-500 mt-1">Sum of all contract items</div>
        </div>
        <div class="card p-4">
            <div class="text-xs text-slate-500 uppercase tracking-wide mb-1">Payments Received</div>
            <div class="text-2xl font-bold text-green-300">${{ number_format($totalPayments, 2) }}</div>
            <div class="text-xs text-slate-500 mt-1">Sum of payment structure</div>
        </div>
    </div>

    {{-- ── Contract Details ── --}}
    <div class="card overflow-hidden" id="private-details">
        <div class="flex items-center justify-between px-5 py-3 border-b border-slate-700" style="background:#1a0a2e;">
            <h3 class="text-white flex items-center gap-2">
                <i class="fas fa-file-alt text-purple-300"></i> Contract Details
            </h3>
            <span class="text-xs text-slate-400">{{ $commercialAccount->privateDetails->count() }} record{{ $commercialAccount->privateDetails->count()!==1?'s':'' }}</span>
        </div>

        @if($commercialAccount->privateDetails->count())
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700" style="background:#0f172a;">
                        <th class="px-3 py-2 text-left">Type</th>
                        <th class="px-3 py-2 text-left">Reference</th>
                        <th class="px-3 py-2 text-left">Date</th>
                        <th class="px-3 py-2 text-right">Amount</th>
                        <th class="px-3 py-2 text-center">Contract Related</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($commercialAccount->privateDetails as $detail)
                    <tr class="border-b border-slate-800 hover:bg-slate-800/30">
                        <td class="px-3 py-2">
                            <span class="text-xs px-2 py-0.5 rounded-full
                                {{ $detail->contract_type==='quote' ? 'bg-blue-900/40 text-blue-300' : ($detail->contract_type==='variation' ? 'bg-yellow-900/40 text-yellow-300' : 'bg-green-900/40 text-green-300') }}">
                                {{ $detail->typeLabel() }}
                            </span>
                        </td>
                        <td class="px-3 py-2 text-slate-300 font-mono text-xs">{{ $detail->contract_reference ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $detail->contract_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-right text-white font-semibold">${{ number_format($detail->amount, 2) }}</td>
                        <td class="px-3 py-2 text-center">
                            @if($detail->contract_related)
                            <span class="text-green-400 text-xs font-semibold">Yes</span>
                            @else
                            <span class="text-slate-600 text-xs">No</span>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-right">
                            <form method="POST" action="{{ route('commercial-accounts.private-details.destroy', [$commercialAccount, $detail]) }}"
                                  onsubmit="return confirm('Remove this record?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    <tr class="border-t-2 border-slate-600">
                        <td colspan="3" class="px-3 py-2 text-right text-xs text-slate-400 font-semibold">Total Contract Related:</td>
                        <td class="px-3 py-2 text-right text-purple-300 font-bold">${{ number_format($privateContractAmt, 2) }}</td>
                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        @endif

        {{-- Add Private Detail form --}}
        <div class="p-4 border-t border-slate-700" style="background:#0d1626;" x-data="{ open: false }">
            <button @click="open=!open" class="text-sm text-purple-400 hover:text-purple-300 flex items-center gap-1">
                <i class="fas fa-plus text-xs"></i> Add Contract Item
            </button>
            <form x-show="open" x-cloak method="POST"
                  action="{{ route('commercial-accounts.private-details.store', $commercialAccount) }}"
                  class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3">
                @csrf
                <div>
                    <label>Type *</label>
                    <select name="contract_type" class="input" required>
                        <option value="quote">Quote</option>
                        <option value="contract">Contract</option>
                        <option value="variation">Variation</option>
                    </select>
                </div>
                <div>
                    <label>Contract / Variation Reference</label>
                    <input type="text" name="contract_reference" class="input" placeholder="e.g. Contract No. 2589">
                </div>
                <div>
                    <label>Date</label>
                    <input type="date" name="contract_date" class="input">
                </div>
                <div>
                    <label>Amount *</label>
                    <input type="number" name="amount" step="0.01" min="0" class="input" required placeholder="0.00">
                </div>
                <div class="flex items-center gap-2 mt-4">
                    <input type="checkbox" name="contract_related" value="1" class="w-4 h-4 rounded" id="cr_detail">
                    <label for="cr_detail" class="text-xs text-slate-300 cursor-pointer">Contract Related (include in Contract Amount)</label>
                </div>
                <div class="md:col-span-3 flex justify-end items-end">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus mr-1"></i>Add Item
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ── Contract Payment Structure ── --}}
    <div class="card overflow-hidden" id="private-payments">
        <div class="flex items-center justify-between px-5 py-3 border-b border-slate-700" style="background:#1a0a2e;">
            <h3 class="text-white flex items-center gap-2">
                <i class="fas fa-dollar-sign text-purple-300"></i> Contract Payment Structure
            </h3>
            <span class="text-xs text-slate-400">{{ $commercialAccount->privatePayments->count() }} record{{ $commercialAccount->privatePayments->count()!==1?'s':'' }}</span>
        </div>

        @if($commercialAccount->privatePayments->count())
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-slate-400 uppercase border-b border-slate-700" style="background:#0f172a;">
                        <th class="px-3 py-2 text-left">Payment Detail</th>
                        <th class="px-3 py-2 text-right">Amount</th>
                        <th class="px-3 py-2 text-left">Invoice No.</th>
                        <th class="px-3 py-2 text-left">Invoice Date</th>
                        <th class="px-3 py-2 text-left">Invoice Paid</th>
                        <th class="px-3 py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($commercialAccount->privatePayments as $pmt)
                    <tr class="border-b border-slate-800 hover:bg-slate-800/30">
                        <td class="px-3 py-2 text-slate-200">{{ $pmt->typeLabel() }}</td>
                        <td class="px-3 py-2 text-right text-white font-semibold">${{ number_format($pmt->payment_amount, 2) }}</td>
                        <td class="px-3 py-2 text-slate-300 font-mono text-xs">{{ $pmt->invoice_no ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $pmt->invoice_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-slate-300">{{ $pmt->invoice_paid_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="px-3 py-2 text-right">
                            <form method="POST" action="{{ route('commercial-accounts.private-payments.destroy', [$commercialAccount, $pmt]) }}"
                                  onsubmit="return confirm('Remove this payment record?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    <tr class="border-t-2 border-slate-600">
                        <td class="px-3 py-2 text-right text-xs text-slate-400 font-semibold">Total Payments:</td>
                        <td class="px-3 py-2 text-right text-green-300 font-bold">${{ number_format($totalPayments, 2) }}</td>
                        <td colspan="4"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        @endif

        {{-- Add Payment form --}}
        <div class="p-4 border-t border-slate-700" style="background:#0d1626;" x-data="{ open: false }">
            <button @click="open=!open" class="text-sm text-purple-400 hover:text-purple-300 flex items-center gap-1">
                <i class="fas fa-plus text-xs"></i> Add Payment Record
            </button>
            <form x-show="open" x-cloak method="POST"
                  action="{{ route('commercial-accounts.private-payments.store', $commercialAccount) }}"
                  class="mt-3 grid grid-cols-2 md:grid-cols-3 gap-3">
                @csrf
                <div>
                    <label>Payment Type *</label>
                    <select name="payment_type" class="input" required>
                        <option value="deposit">Deposit</option>
                        <option value="check_measure">Check Measure</option>
                        <option value="delivery">Delivery</option>
                        <option value="completion">Completion</option>
                        <option value="variation">Variation</option>
                    </select>
                </div>
                <div>
                    <label>Custom Label (optional)</label>
                    <input type="text" name="payment_label" class="input" placeholder="e.g. Variation #25">
                </div>
                <div>
                    <label>Amount *</label>
                    <input type="number" name="payment_amount" step="0.01" min="0" class="input" required placeholder="0.00">
                </div>
                <div>
                    <label>Invoice No.</label>
                    <input type="text" name="invoice_no" class="input" placeholder="Invoice number">
                </div>
                <div>
                    <label>Invoice Date</label>
                    <input type="date" name="invoice_date" class="input">
                </div>
                <div>
                    <label>Invoice Paid Date</label>
                    <input type="date" name="invoice_paid_date" class="input">
                </div>
                <div class="md:col-span-3 flex justify-end">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus mr-1"></i>Add Payment
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

</div>
@endsection