@extends('layouts.app')

@section('title', 'Edit Billing')

@section('content')
    <div class="container px-6 mx-auto">
        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Edit Billing #{{ $billing->IdBilling }}
        </h2>

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

                <!-- ID Registrasi -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">ID Registrasi</span>
                    <input type="text"
                        value="{{ $billing->registrasi->IdRegistrasi }} - {{ $billing->registrasi->pasien->NamaPasien ?? 'Unknown' }}"
                        class="block w-full mt-1 text-sm bg-gray-100 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 form-input"
                        disabled>
                    <span class="text-gray-500 text-xs mt-1">ID Registrasi tidak dapat diubah.</span>
                </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', strtotime($billing->TanggalBilling))) }}"
                        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 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>

                <!-- Total Biaya -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Total Biaya (Rp)</span>
                    <input type="text" value="Rp {{ number_format($billing->TotalBiaya, 0, ',', '.') }}"
                        class="block w-full mt-1 text-sm bg-gray-100 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 form-input"
                        disabled>
                    <span class="text-gray-500 text-xs mt-1">Total biaya dihitung otomatis berdasarkan transaksi.</span>
                </label>

                <!-- Pembayaran -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Jumlah Pembayaran (Rp)</span>
                    <input type="number" name="Dibayar" id="Dibayar" min="0"
                        value="{{ old('Dibayar', $billing->Dibayar) }}"
                        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 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>

                <!-- Sisa -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Sisa Pembayaran (Rp)</span>
                    <input type="text" value="Rp {{ number_format($billing->Sisa, 0, ',', '.') }}"
                        class="block w-full mt-1 text-sm bg-gray-100 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 form-input"
                        disabled>
                    <span class="text-gray-500 text-xs mt-1">Sisa pembayaran dihitung otomatis.</span>
                </label>

                <!-- Status Pembayaran -->
                <label class="block text-sm mb-4">
                    <span class="text-gray-700 dark:text-gray-400">Status Pembayaran</span>
                    <input type="text" value="{{ $billing->StatusPembayaran }}"
                        class="block w-full mt-1 text-sm bg-gray-100 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 form-input"
                        disabled>
                    <span class="text-gray-500 text-xs mt-1">Status pembayaran diupdate otomatis.</span>
                </label>

                <!-- Keterangan -->
                <label class="block text-sm mb-6">
                    <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 form-input @error('Keterangan') border-red-500 @enderror">{{ old('Keterangan', $billing->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.show', $billing->IdBilling) }}"
                        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 Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection