@extends('layouts.app')

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

@section('content')
    <form method="POST" action="{{ route('visits.store') }}" id="visit-form">
        @csrf
        
        <div class="form-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; align-items: start;">
            <!-- Column 1: Patient and Complaint -->
            <div class="flex flex-col" style="display: flex; flex-direction: column; gap: 1.5rem;">
                <div class="card mb-0">
                    <h3 class="card-title" style="margin-top: 0; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; font-size: 1.1rem; color: var(--primary);">
                        🩺 {{ __('clinic.overview') }}
                    </h3>

                    <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>

                    <div class="form-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                        <div class="form-group">
                            <label for="doctor_id">{{ __('clinic.filter_by_doctor') }} <span style="color:var(--danger)">*</span></label>
                            <select id="doctor_id" class="form-control" name="doctor_id" required>
                                <option value="">—</option>
                                @foreach ($doctors as $d)
                                    <option value="{{ $d->id }}" @selected((string)old('doctor_id', auth()->id()) === (string)$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>
                        <div class="form-group">
                            <label for="visit_date">{{ __('clinic.visit_date') }} <span style="color:var(--danger)">*</span></label>
                            <input id="visit_date" type="datetime-local" class="form-control" name="visit_date" value="{{ old('visit_date', now()->format('Y-m-d\TH:i')) }}" required>
                            @error('visit_date')<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="status">{{ __('clinic.visit_status') }} <span style="color:var(--danger)">*</span></label>
                            <select id="status" class="form-control" name="status" required>
                                <option value="waiting" @selected(old('status') === 'waiting')>{{ __('clinic.waiting') }}</option>
                                <option value="in_progress" @selected(old('status') === 'in_progress')>{{ __('clinic.in_progress') }}</option>
                                <option value="completed" @selected(old('status', 'completed') === 'completed')>{{ __('clinic.completed') }}</option>
                                <option value="cancelled" @selected(old('status') === 'cancelled')>{{ __('clinic.cancelled') }}</option>
                            </select>
                            @error('status')<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="follow_up_date">{{ __('clinic.follow_up_date') }}</label>
                            <input id="follow_up_date" type="date" class="form-control" name="follow_up_date" value="{{ old('follow_up_date') }}">
                            @error('follow_up_date')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                <!-- Complaint & Diagnosis -->
                <div class="card mb-0">
                    <h3 class="card-title" style="margin-top: 0; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; font-size: 1.1rem; color: var(--accent-rose);">
                        📝 {{ __('clinic.chief_complaint') }}
                    </h3>

                    <div class="form-group">
                        <label for="chief_complaint">{{ __('clinic.chief_complaint') }} <span style="color:var(--danger)">*</span></label>
                        <input id="chief_complaint" class="form-control" name="chief_complaint" value="{{ old('chief_complaint') }}" required placeholder="السبب الرئيسي للزيارة">
                        @error('chief_complaint')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <label for="complaint_details">{{ __('clinic.complaint_details') }}</label>
                        <textarea id="complaint_details" class="form-control" name="complaint_details" rows="4" style="min-height: 100px; padding: 10px;" placeholder="اكتب تفاصيل الشكوى والقصة المرضية بالتفصيل هنا... (بالعربية)">{{ old('complaint_details') }}</textarea>
                        @error('complaint_details')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <label for="symptoms">{{ __('clinic.symptoms') }}</label>
                        <textarea id="symptoms" class="form-control" name="symptoms" rows="2" placeholder="الأعراض المرافقة للشكوى">{{ old('symptoms') }}</textarea>
                        @error('symptoms')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <label for="diagnosis">{{ __('clinic.diagnosis') }}</label>
                        <textarea id="diagnosis" class="form-control" name="diagnosis" rows="2" placeholder="التشخيص الطبي للمريض">{{ old('diagnosis') }}</textarea>
                        @error('diagnosis')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <!-- Column 2: Vitals & Treatment Plan -->
            <div class="flex flex-col" style="display: flex; flex-direction: column; gap: 1.5rem;">
                <!-- Vital Signs -->
                <div class="card mb-0">
                    <h3 class="card-title" style="margin-top: 0; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; font-size: 1.1rem; color: var(--accent-cyan);">
                        📈 {{ __('clinic.vital_signs') }}
                    </h3>

                    <div class="form-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
                        <div class="form-group">
                            <label for="blood_pressure" style="font-size: 0.8rem;">{{ __('clinic.blood_pressure') }}</label>
                            <input id="blood_pressure" class="form-control" name="blood_pressure" value="{{ old('blood_pressure') }}" placeholder="120/80">
                        </div>
                        <div class="form-group">
                            <label for="pulse" style="font-size: 0.8rem;">{{ __('clinic.pulse') }}</label>
                            <input id="pulse" class="form-control" name="pulse" value="{{ old('pulse') }}" placeholder="72">
                        </div>
                        <div class="form-group">
                            <label for="temperature" style="font-size: 0.8rem;">{{ __('clinic.temperature') }}</label>
                            <input id="temperature" class="form-control" name="temperature" value="{{ old('temperature') }}" placeholder="37">
                        </div>
                        <div class="form-group">
                            <label for="weight" style="font-size: 0.8rem;">{{ __('clinic.weight') }}</label>
                            <input id="weight" class="form-control" name="weight" value="{{ old('weight') }}" placeholder="70">
                        </div>
                        <div class="form-group">
                            <label for="height" style="font-size: 0.8rem;">{{ __('clinic.height') }}</label>
                            <input id="height" class="form-control" name="height" value="{{ old('height') }}" placeholder="175">
                        </div>
                    </div>
                </div>

                <!-- Clinical Examination & Treatment -->
                <div class="card mb-0">
                    <h3 class="card-title" style="margin-top: 0; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; font-size: 1.1rem; color: var(--accent-emerald);">
                        📝 {{ __('clinic.examination_notes') }}
                    </h3>

                    <div class="form-group">
                        <label for="examination_notes">{{ __('clinic.examination_notes') }}</label>
                        <textarea id="examination_notes" class="form-control" name="examination_notes" rows="3" placeholder="ملاحظات الفحص السريري الطبي">{{ old('examination_notes') }}</textarea>
                        @error('examination_notes')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <label for="prescription_notes">💊 {{ __('clinic.prescription_notes') }}</label>
                        <textarea id="prescription_notes" class="form-control" name="prescription_notes" rows="3" placeholder="الروشتة / الأدوية، الجرعات، التوقيت">{{ old('prescription_notes') }}</textarea>
                        @error('prescription_notes')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <label for="treatment_plan">{{ __('clinic.treatment_plan') }}</label>
                        <textarea id="treatment_plan" class="form-control" name="treatment_plan" rows="2" placeholder="الخطة العلاجية للمريض أو التوصيات المستقبلية">{{ old('treatment_plan') }}</textarea>
                        @error('treatment_plan')<div class="error-text" style="color:var(--danger); font-size:0.85rem; margin-top:0.25rem;">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                        <div class="form-group">
                            <label for="required_tests">{{ __('clinic.required_tests') }}</label>
                            <input id="required_tests" class="form-control" name="required_tests" value="{{ old('required_tests') }}" placeholder="صورة دم كاملة، وظائف كبد...">
                        </div>
                        <div class="form-group">
                            <label for="required_radiology">{{ __('clinic.required_radiology') }}</label>
                            <input id="required_radiology" class="form-control" name="required_radiology" value="{{ old('required_radiology') }}" placeholder="رنين مغناطيسي، سونار...">
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: 1rem;">
                        <label for="private_notes">{{ __('clinic.private_notes') }}</label>
                        <textarea id="private_notes" class="form-control" name="private_notes" rows="2" placeholder="ملاحظات سرية خاصة بالطبيب لن تظهر للمريض">{{ old('private_notes') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Billing Block (Auto Invoice Creation) -->
        <div class="card" style="margin-top: 1.5rem; border-top: 4px solid var(--accent-cyan);">
            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;">
                <input type="checkbox" id="create_invoice" name="create_invoice" value="1" {{ old('create_invoice') ? 'checked' : '' }} style="width: 18px; height: 18px; cursor: pointer;">
                <label for="create_invoice" style="font-weight: 700; font-size: 1.1rem; cursor: pointer; color: var(--accent-cyan);">
                    💰 {{ __('clinic.create_invoice_automatically') }}
                </label>
            </div>

            <!-- Dynamic Invoice Fields -->
            <div id="invoice-fields" style="display: {{ old('create_invoice') ? 'block' : 'none' }}; border-top: 1px dashed var(--border); padding-top: 1.25rem;">
                <div class="form-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 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') }}">
                        @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 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') }}">
                        @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: 1.25rem;">
                    <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="invoice_notes">{{ __('clinic.notes') }}</label>
                        <input id="invoice_notes" class="form-control" name="invoice_notes" value="{{ old('invoice_notes') }}">
                    </div>
                </div>

                <!-- Display 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>
            </div>
        </div>

        <!-- Form Operations -->
        <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('patients.index') }}" class="btn btn-ghost">{{ __('clinic.cancel') }}</a>
            @endif
        </div>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var checkbox = document.getElementById('create_invoice');
            var billingBlock = document.getElementById('invoice-fields');

            checkbox.addEventListener('change', function() {
                billingBlock.style.display = this.checked ? 'block' : 'none';
                if (this.checked) {
                    calculateTotals();
                }
            });

            // Calculate billing totals dynamically as user types
            var triggers = document.querySelectorAll('.calc-trigger');
            triggers.forEach(function(input) {
                input.addEventListener('input', calculateTotals);
            });

            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