@extends('layouts.admin')

@section('title', 'Contracts')

@section('content')
<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-brand">Contracts</h1>
        <p class="text-slate-600">Credit card authorization agreements</p>
    </div>
    <a href="{{ route('admin.contracts.create') }}" class="btn-primary">New contract</a>
</div>

<form method="GET" class="mb-6 grid gap-3 md:grid-cols-3">
    <select name="status" class="input">
        <option value="">All statuses</option>
        @foreach($statuses as $status)
            <option value="{{ $status }}" @selected(request('status') === $status)>{{ $status }}</option>
        @endforeach
    </select>
    <input type="text" name="q" value="{{ request('q') }}" placeholder="Search name, email, contract #" class="input md:col-span-2">
    <button class="btn-secondary md:col-span-3 md:w-fit" type="submit">Filter</button>
</form>

<div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
    <table class="min-w-full text-sm">
        <thead class="bg-slate-50 text-left text-slate-600">
            <tr>
                <th class="px-4 py-3">Contract</th>
                <th class="px-4 py-3">Customer</th>
                <th class="px-4 py-3">Order</th>
                <th class="px-4 py-3">Amount</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody>
        @forelse($contracts as $contract)
            <tr class="border-t border-slate-100">
                <td class="px-4 py-3 font-medium">{{ $contract->contract_number }}</td>
                <td class="px-4 py-3">
                    <div>{{ $contract->name }}</div>
                    <div class="text-xs text-slate-500">{{ $contract->email }}</div>
                </td>
                <td class="px-4 py-3">{{ $contract->shopify_order_name ?? '—' }}</td>
                <td class="px-4 py-3">${{ number_format((float) $contract->amount, 2) }}</td>
                <td class="px-4 py-3"><span class="badge">{{ $contract->status }}</span></td>
                <td class="px-4 py-3 text-right"><a class="text-brand hover:underline" href="{{ route('admin.contracts.show', $contract) }}">View</a></td>
            </tr>
        @empty
            <tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No contracts yet.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $contracts->links() }}</div>
@endsection