@extends('layouts.app')

@section('title', __('clinic.new_invoice'))
@section('heading', __('clinic.new_invoice'))

@section('content')
    <div class="card" style="max-width: 600px; margin: 0 auto;">
        <form method="POST" action="{{ route('invoices.store') }}" id="invoice-form">
            @csrf
            
            <div class="form-group">
                <label for="patient_id">{{ __('clinic.patients') }} <span style="color:var(--danger)">*</span></label>
                @if($patient)
                    <input type="hidden" name="patient_id" value="{{ $patient->id }}">
                    <input class="form-control" value="{{ $patient->full_name }} ({{ $patient->patient_code }})" disabled>
                @else
                    <select id="patient_id" class="form-control" name="patient_id" required>
                        <option value="">—</option>
                        @foreach ($patients as $p)
                            <option value="{{ $p->id }}" @selected((string)old('patient_id') === (string)$p->id)>{{ $p->full_name }} ({{ $p->patient_code }})</option>
                        @endforeach
                    </select>
                @endif
                @error('patient_id')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
            </div>

            <!-- Optional Visit Selection -->
            @if($patient && count($visits) > 0)
            <div class="form-group" style="margin-top: 1rem;">
                <label for="visit_id">{{ __('clinic.visits') }} ({{ __('clinic.new_visit') }})</label>
                <select id="visit_id" class="form-control" name="visit_id">
                    <option value="">—</option>
                    @foreach ($visits as $v)
                        <option value="{{ $v->id }}">{{ $v->chief_complaint }} ({{ $v->visit_date->format('Y-m-d') }})</option>
                    @endforeach
                </select>
                @error('visit_id')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
            </div>
            @endif

            <div class="form-group" style="margin-top: 1rem;">
                <label for="doctor_id">👨‍⚕️ {{ __('clinic.filter_by_doctor') }}</label>
                <select id="doctor_id" class="form-control" name="doctor_id">
                    <option value="">—</option>
                    @foreach ($doctors as $d)
                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                    @endforeach
                </select>
                @error('doctor_id')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
            </div>

            <!-- Financial Inputs -->
            <div class="form-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                <div class="form-group">
                    <label for="consultation_price">{{ __('clinic.consultation_price') }} <span style="color:var(--danger)">*</span></label>
                    <input id="consultation_price" type="number" step="0.01" class="form-control calc-trigger" name="consultation_price" value="{{ old('consultation_price', '0.00') }}" required>
                    @error('consultation_price')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label for="services_total">{{ __('clinic.services_total') }}</label>
                    <input id="services_total" type="number" step="0.01" class="form-control calc-trigger" name="services_total" value="{{ old('services_total', '0.00') }}">
                    @error('services_total')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="form-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                <div class="form-group">
                    <label for="discount">{{ __('clinic.discount') }}</label>
                    <input id="discount" type="number" step="0.01" class="form-control calc-trigger" name="discount" value="{{ old('discount', '0.00') }}">
                    @error('discount')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label for="paid_amount">{{ __('clinic.paid_amount') }} <span style="color:var(--danger)">*</span></label>
                    <input id="paid_amount" type="number" step="0.01" class="form-control calc-trigger" name="paid_amount" value="{{ old('paid_amount', '0.00') }}" required>
                    @error('paid_amount')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="form-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                <div class="form-group">
                    <label for="payment_method">{{ __('clinic.payment_method') }} <span style="color:var(--danger)">*</span></label>
                    <select id="payment_method" class="form-control" name="payment_method">
                        <option value="cash" @selected(old('payment_method') === 'cash')>{{ __('clinic.cash') }}</option>
                        <option value="wallet" @selected(old('payment_method') === 'wallet')>{{ __('clinic.wallet') }}</option>
                        <option value="card" @selected(old('payment_method') === 'card')>{{ __('clinic.card') }}</option>
                        <option value="bank_transfer" @selected(old('payment_method') === 'bank_transfer')>{{ __('clinic.bank_transfer') }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="notes">{{ __('clinic.notes') }}</label>
                    <input id="notes" class="form-control" name="notes" value="{{ old('notes') }}">
                </div>
            </div>

            <!-- Dynamic Live Calculations -->
            <div style="display: flex; gap: 2rem; margin-top: 1.5rem; background: var(--bg); padding: 1rem; border-radius: var(--radius-sm); border-right: 4px solid var(--accent-cyan); border-left: 4px solid var(--accent-cyan);">
                <div>
                    <span style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.total_amount') }}</span>
                    <div style="font-size: 1.4rem; font-weight: 700; color: var(--text);"><span id="calc-total">0.00</span> $</div>
                </div>
                <div>
                    <span style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.remaining_amount') }}</span>
                    <div style="font-size: 1.4rem; font-weight: 700; color: var(--text);"><span id="calc-remaining">0.00</span> $</div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex gap" style="margin-top: 1.5rem;">
                <button type="submit" class="btn btn-primary">{{ __('clinic.save') }}</button>
                @if($patient)
                    <a href="{{ route('patients.show', $patient) }}" class="btn btn-ghost">{{ __('clinic.cancel') }}</a>
                @else
                    <a href="{{ route('invoices.index') }}" class="btn btn-ghost">{{ __('clinic.cancel') }}</a>
                @endif
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var triggers = document.querySelectorAll('.calc-trigger');
            triggers.forEach(function(input) {
                input.addEventListener('input', calculateTotals);
            });

            calculateTotals(); // Initial trigger

            function calculateTotals() {
                var price = parseFloat(document.getElementById('consultation_price').value) || 0;
                var services = parseFloat(document.getElementById('services_total').value) || 0;
                var discount = parseFloat(document.getElementById('discount').value) || 0;
                var paid = parseFloat(document.getElementById('paid_amount').value) || 0;

                var total = price + services - discount;
                if (total < 0) total = 0;

                var remaining = total - paid;
                if (remaining < 0) remaining = 0;

                document.getElementById('calc-total').innerText = total.toFixed(2);
                document.getElementById('calc-remaining').innerText = remaining.toFixed(2);
            }
        });
    </script>
@endsection
