@extends('layouts.app')

@section('title', 'Tambah Billing Baru')

@section('content')
    <div class="container px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Tambah Billing Baru
        </h2>

        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <form action="{{ route('billing.store') }}" method="POST">
                @csrf

                <!-- ID Registrasi -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">ID Registrasi</span>
                    <select name="IdRegistrasi" id="IdRegistrasi"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple 
                        dark:text-gray-300 dark:focus:shadow-outline-gray form-input @error('IdRegistrasi') border-red-500 @enderror"
                        required>
                        <option value="">Pilih ID Registrasi</option>
                        @foreach ($registrasis as $registrasi)
                            <option value="{{ $registrasi->IdRegistrasi }}"
                                {{ old('IdRegistrasi') == $registrasi->IdRegistrasi ? 'selected' : '' }}>
                                {{ $registrasi->IdRegistrasi }} - {{ $registrasi->pasien->NamaPasien ?? 'Unknown' }}
                            </option>
                        @endforeach
                    </select>
                    @error('IdRegistrasi')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Tanggal Billing -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Tanggal Billing</span>
                    <input type="date" name="TanggalBilling" id="TanggalBilling"
                        value="{{ old('TanggalBilling', date('Y-m-d')) }}"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple 
                        dark:text-gray-300 dark:focus:shadow-outline-gray form-input @error('TanggalBilling') border-red-500 @enderror"
                        required>
                    @error('TanggalBilling')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Pembayaran Awal -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Pembayaran Awal (Rp)</span>
                    <input type="number" name="Dibayar" id="Dibayar" min="0" value="{{ old('Dibayar', 0) }}"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple 
                        dark:text-gray-300 dark:focus:shadow-outline-gray form-input @error('Dibayar') border-red-500 @enderror"
                        required>
                    @error('Dibayar')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Keterangan -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Keterangan</span>
                    <textarea name="Keterangan" id="Keterangan" rows="3"
                        class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 
                        focus:border-purple-400 focus:outline-none focus:shadow-outline-purple 
                        dark:text-gray-300 dark:focus:shadow-outline-gray form-input @error('Keterangan') border-red-500 @enderror">{{ old('Keterangan') }}</textarea>
                    @error('Keterangan')
                        <span class="text-xs text-red-600 dark:text-red-400">{{ $message }}</span>
                    @enderror
                </label>

                <!-- Buttons -->
                <div class="flex justify-start mt-6 space-x-4">
                    <a href="{{ route('billing.index') }}"
                        class="px-6 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 
                        bg-white border border-gray-300 rounded-md dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 
                        hover:border-gray-500 focus:outline-none focus:shadow-outline-gray">
                        Batal
                    </a>
                    <button type="submit"
                        class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 
                        bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 
                        focus:outline-none focus:shadow-outline-purple">
                        Simpan Billing
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection