@extends('crm.layouts.app')

@section('title', 'Deposit')

@section('content')
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8">

    <div class="sm:flex sm:items-start sm:justify-between mb-8">
        <div>
            <a href="{{ route('crm.deposits.index') }}" class="text-sm font-medium text-gray-500 hover:text-gray-700">&larr; All deposits</a>
            <h1 class="mt-2 text-2xl font-semibold text-gray-900">
                ${{ number_format($deposit->amount, 2) }} deposit
            </h1>
            <p class="mt-1 text-sm text-gray-600">
                {{ $deposit->appointment?->client?->name ?? 'Client' }}
                &middot;
                <a href="{{ route('crm.appointments.show', $deposit->appointment) }}" class="text-indigo-600 hover:text-indigo-500">
                    {{ $deposit->appointment?->scheduled_at?->format('M j, Y \a\t g:i A') ?? 'appointment' }}
                </a>
            </p>
        </div>
        <span class="mt-4 sm:mt-0 inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium {{ $deposit->status_badge }}">
            {{ ucfirst($deposit->status) }}
        </span>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-md bg-green-50 p-4 text-sm font-medium text-green-800">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-6 rounded-md bg-red-50 p-4">
            <ul class="list-disc space-y-1 pl-5 text-sm text-red-700">
                @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        <dl class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
            @foreach([
                'Taken' => $deposit->paid_at?->format('M j, Y'),
                'Method' => ucfirst(str_replace('_', ' ', $deposit->payment_method ?? '')),
                'Reference' => $deposit->payment_reference,
                'Refunded so far' => '$'.number_format($deposit->refund_amount ?? 0, 2),
                'Outstanding' => '$'.number_format($deposit->outstanding_amount, 2),
                'Refunded on' => $deposit->refunded_at?->format('M j, Y'),
            ] as $label => $value)
                <div>
                    <dt class="text-sm text-gray-500">{{ $label }}</dt>
                    <dd class="mt-0.5 text-sm font-medium text-gray-900">{{ $value ?: '—' }}</dd>
                </div>
            @endforeach
        </dl>

        @if($deposit->notes)
            <div class="mt-6 border-t border-gray-100 pt-4">
                <dt class="text-sm text-gray-500">Notes</dt>
                <dd class="mt-1 whitespace-pre-line text-sm text-gray-900">{{ $deposit->notes }}</dd>
            </div>
        @endif
    </div>

    @if($deposit->outstanding_amount > 0 && $deposit->status !== 'forfeited')
        <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Refund -->
            <form method="POST" action="{{ route('crm.deposits.refund', $deposit) }}"
                  class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                @csrf
                <h2 class="text-sm font-semibold text-gray-900">Refund</h2>
                <p class="mt-1 text-sm text-gray-500">Give some or all of the deposit back to the client.</p>

                <label for="refund_amount" class="mt-4 block text-sm font-medium text-gray-900">Amount</label>
                <div class="relative mt-2">
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <span class="text-gray-500 sm:text-sm">$</span>
                    </div>
                    <input type="number" name="refund_amount" id="refund_amount" step="0.01" min="0.01"
                           max="{{ $deposit->outstanding_amount }}" required
                           class="block w-full rounded-md border-0 py-1.5 pl-7 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
                           placeholder="{{ number_format($deposit->outstanding_amount, 2, '.', '') }}">
                </div>

                <label for="refund_notes" class="mt-4 block text-sm font-medium text-gray-900">Reason <span class="font-normal text-gray-500">(optional)</span></label>
                <textarea name="notes" id="refund_notes" rows="2" maxlength="1000"
                          class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"></textarea>

                <button type="submit" class="mt-4 w-full rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Refund deposit
                </button>
            </form>

            <!-- Forfeit -->
            <form method="POST" action="{{ route('crm.deposits.forfeit', $deposit) }}"
                  onsubmit="return confirm('Keep this deposit and mark it forfeited? This cannot be undone.')"
                  class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 flex flex-col">
                @csrf
                <h2 class="text-sm font-semibold text-gray-900">Forfeit</h2>
                <p class="mt-1 text-sm text-gray-500">
                    Keep the deposit — for a no-show or a late cancellation.
                </p>
                <div class="flex-1"></div>
                <button type="submit" class="mt-4 w-full rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
                    Mark forfeited
                </button>
            </form>
        </div>
    @endif
</div>
@endsection