@extends('crm.layouts.app')

@section('title', 'Record Deposit')

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

    <div class="mb-8">
        <a href="{{ route('crm.appointments.show', $appointment) }}" class="text-sm font-medium text-gray-500 hover:text-gray-700">&larr; Back to appointment</a>
        <h1 class="mt-2 text-2xl font-semibold text-gray-900">Record a deposit</h1>
        <p class="mt-1 text-sm text-gray-600">
            {{ $appointment->client?->name ?? 'Client' }}
            &middot; {{ $appointment->scheduled_at?->format('M j, Y \a\t g:i A') }}
            @if($appointment->price)
                &middot; session price ${{ number_format($appointment->price, 2) }}
            @endif
        </p>
    </div>

    @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

    <form method="POST" action="{{ route('crm.deposits.store', $appointment) }}" class="space-y-6">
        @csrf

        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 space-y-6">
            <div>
                <label for="amount" class="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="amount" id="amount" step="0.01" min="0.01" max="9999.99" required
                           value="{{ old('amount') }}"
                           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 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
                           placeholder="0.00">
                </div>
            </div>

            <div>
                <label for="payment_method" class="block text-sm font-medium text-gray-900">How was it paid?</label>
                <select name="payment_method" id="payment_method" required
                        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">
                    @foreach(['cash' => 'Cash', 'card' => 'Card in person', 'online' => 'Online payment', 'bank_transfer' => 'Bank transfer'] as $value => $label)
                        <option value="{{ $value }}" @selected(old('payment_method') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="payment_reference" class="block text-sm font-medium text-gray-900">Reference <span class="font-normal text-gray-500">(optional)</span></label>
                <input type="text" name="payment_reference" id="payment_reference" maxlength="255"
                       value="{{ old('payment_reference') }}"
                       class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
                       placeholder="Transaction ID, receipt number">
            </div>

            <div>
                <label for="notes" class="block text-sm font-medium text-gray-900">Notes <span class="font-normal text-gray-500">(optional)</span></label>
                <textarea name="notes" id="notes" rows="3" 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 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm">{{ old('notes') }}</textarea>
            </div>
        </div>

        <div class="flex items-center justify-end gap-x-3">
            <a href="{{ route('crm.appointments.show', $appointment) }}" class="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">Cancel</a>
            <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">Record deposit</button>
        </div>
    </form>
</div>
@endsection