@extends('user.layout')

@section('content')
    <div class="wrapper">
        @include('user.templates.navbar')

        <div class="main">
            @include('user.templates.top-bar')

            <div class="container my-5">
                <div class="report-wrapper">
                    <div class="report-card">
                        <div class="report-title">
                            <span>🩺 Patient Entry Details</span>
                            <a href="{{ url()->previous() }}" class="back-btn">← Back</a>
                        </div>

                        <div class="patient-info-grid">
                            <div class="info-box">
                                <div class="info-label"><i class="bi bi-person-fill"></i> Patient Name</div>
                                <div class="info-value">{{ $patient->patient_name }}</div>
                            </div>
                            <div class="info-box">
                                <div class="info-label"><i class="bi bi-hourglass-split"></i> Age</div>
                                <div class="info-value">{{ $patient->age }}</div>
                            </div>
                            <div class="info-box">
                                <div class="info-label"><i class="bi bi-gender-ambiguous"></i> Gender</div>
                                <div class="info-value">{{ $patient->gender }}</div>
                            </div>
                            <div class="info-box">
                                <div class="info-label"><i class="bi bi-telephone-fill"></i> Phone</div>
                                <div class="info-value">{{ $patient->phone }}</div>
                            </div>
                            <div class="info-box">
                                <div class="info-label"><i class="bi bi-person-vcard-fill"></i> Doctor</div>
                                <div class="info-value">{{ $patient->dr_name }}</div>
                            </div>
                            <div class="info-box">
                                <div class="info-label"><i class="bi bi-hospital-fill"></i> Hospital</div>
                                <div class="info-value">{{ $patient->hospital_name }}</div>
                            </div>
                        </div>
                        <hr>

                        <!-- Bootstrap Icons (for nice icons) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-primary text-white">
        <i class="bi bi-plus-circle me-2"></i> Add Blood Test
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('patient.saveTests') }}">
            @csrf
            <input type="hidden" name="patient_id" value="{{ $patient->id }}">

            <div id="test-section">
                <div class="border rounded p-3 mb-3 bg-light">
                    <div class="row g-3 align-items-end test-row">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Select Test</label>
                            <select name="tests[0][test_id]" class="form-select select2" required onchange="calculateTotal()">
                                <option value="">-- Select Test --</option>
                                @foreach ($healthTests as $test)
                                    <option value="{{ $test->id }}">{{ $test->test_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Price</label>
                            <input type="number" name="tests[0][price]" class="form-control price-input" required oninput="calculateTotal()">
                        </div>
                        <div class="col-md-2 text-center">
                            <button type="button" class="btn btn-success w-100" onclick="addTestRow()">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div id="discount-section" class="border rounded p-3 bg-light mt-3" style="display: none;">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Discount</label>
                        <input type="number" id="discount" name="tests[0][discount]" class="form-control" value="0" oninput="calculateTotal()">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Total After Discount</label>
                        <input type="text" id="total" class="form-control" readonly>
                    </div>
                </div>
            </div>

            <div class="text-end mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save me-1"></i> Save Tests
                </button>
            </div>
        </form>
    </div>
</div>

<!-- JavaScript for Dynamic Rows & Calculations -->
<script>
    let testIndex = 1;

    function addTestRow() {
        const section = document.getElementById('test-section');
        const row = document.createElement('div');
        row.classList.add('border', 'rounded', 'p-3', 'mb-3', 'bg-light');

        row.innerHTML = `
            <div class="row g-3 align-items-end test-row">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Select Test</label>
                    <select name="tests[${testIndex}][test_id]" class="form-select select2" required onchange="calculateTotal()">
                        <option value="">-- Select Test --</option>
                        @foreach ($healthTests as $test)
                            <option value="{{ $test->id }}">{{ $test->test_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Price</label>
                    <input type="number" name="tests[${testIndex}][price]" class="form-control price-input" required oninput="calculateTotal()">
                </div>
                <div class="col-md-2 text-center">
                    <button type="button" class="btn btn-danger w-100" onclick="removeTestRow(this)">
                        <i class="bi bi-dash-lg"></i>
                    </button>
                </div>
            </div>
        `;
        section.appendChild(row);
        testIndex++;
    }

    function removeTestRow(button) {
        button.closest('.border').remove();
        calculateTotal();
    }

    function calculateTotal() {
        let total = 0;
        const prices = document.querySelectorAll('.price-input');
        let hasPrice = false;

        prices.forEach(priceInput => {
            const price = parseFloat(priceInput.value) || 0;
            if (price > 0) hasPrice = true;
            total += price;
        });

        if (hasPrice) {
            document.getElementById('discount-section').style.display = 'flex';
        } else {
            document.getElementById('discount-section').style.display = 'none';
        }

        const discount = parseFloat(document.getElementById('discount').value) || 0;
        const finalTotal = total - discount;

        document.getElementById('total').value = finalTotal.toFixed(2);
    }
</script>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection