@extends('layouts.base')

@section('title', 'Cash Page')

@section('main-content')

<div class="space-y-6">

    <!-- Success Message -->
    @if(session('success'))
        <div class="bg-green-500 text-white p-3 rounded shadow">
            {{ session('success') }}
        </div>
    @endif

    <!-- Cash Form -->
    <div class="bg-white p-6 rounded shadow-md">
        <h2 class="text-xl font-bold mb-4">Add Cash Payment</h2>

        <form action="{{ route('cash.store') }}" method="POST" class="space-y-4">
            @csrf

            <div>
                <label class="block text-gray-700 font-medium">Vehicle AIN</label>
                <input type="text" name="vehicle_ain" value="{{ old('vehicle_ain') }}"
                    class="w-full border rounded px-3 py-2 mt-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Enter Vehicle AIN">
                @error('vehicle_ain') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-gray-700 font-medium">Amount</label>
                <input type="number" name="amount" value="{{ old('amount') }}"
                    class="w-full border rounded px-3 py-2 mt-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Enter amount">
                @error('amount') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-gray-700 font-medium">Payment Date</label>
                <input type="date" name="payment_date" value="{{ old('payment_date') }}"
                    class="w-full border rounded px-3 py-2 mt-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                @error('payment_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <button type="submit"
                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">Add Payment</button>
        </form>
    </div>

    <!-- Cash Table -->
    <div class="bg-white p-6 rounded shadow-md">
        <h2 class="text-xl font-bold mb-4">All Payments</h2>

        @if(count($cashItems) > 0)
            <table class="w-full table-auto border-collapse border border-gray-200">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border px-4 py-2">#</th>
                        <th class="border px-4 py-2">Vehicle AIN</th>
                        <th class="border px-4 py-2">Amount</th>
                        <th class="border px-4 py-2">Payment Date</th>
                        <th class="border px-4 py-2">Added At</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cashItems as $index => $item)
                        <tr class="{{ $index % 2 == 0 ? 'bg-gray-50' : '' }}">
                            <td class="border px-4 py-2">{{ $index + 1 }}</td>
                            <td class="border px-4 py-2">{{ $item->vehicle_ain }}</td>
                            <td class="border px-4 py-2">{{ number_format($item->amount, 2) }}</td>
                            <td class="border px-4 py-2">{{ $item->payment_date }}</td>
                            <td class="border px-4 py-2">{{ $item->created_at }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p class="text-gray-500">No cash payments yet.</p>
        @endif
    </div>

</div>

@endsection