@extends('admin.layout')

@section('content')
    <div class="container">
        <h4 class="my-4 fw-bold">Lab Test Price Comparison</h4>

        <!-- Test Rows -->
        <div class="card">
            <div id="testContainer"></div>
            <div class="text-start add-btn">
                <button class="btn btn-outline-primary" onclick="addTestRow()">
                    <i class="fas fa-plus-circle me-1"></i> Add Test
                </button>
            </div>
        </div>

        <!-- Summary Totals -->
        <div class="card">
            <div class="p-4 bg-light">
                <h5 class="mb-4"><i class="fas fa-chart-pie text-warning"></i> Price Totals</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="card d-flex flex-row align-items-center p-3">
                            <div class="me-3"><i class="fas fa-flask fa-2x text-primary"></i></div>
                            <div>
                                <h6 class="fw-bold mb-1">GD Lab - B2B</h6>
                                <p class="text-success fs-5 mb-0">₹<span id="gdFixedTotal">0.00</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card d-flex flex-row align-items-center p-3">
                            <div class="me-3"><i class="fas fa-edit fa-2x text-secondary"></i></div>
                            <div>
                                <h6 class="fw-bold mb-1">GD Lab - MRP</h6>
                                <p class="text-success fs-5 mb-0">₹<span id="gdCustomTotal">0.00</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card d-flex flex-row align-items-center p-3">
                            <div class="me-3"><i class="fas fa-tools fa-2x text-success"></i></div>
                            <div>
                                <h6 class="fw-bold mb-1">CRL Lab - B2B</h6>
                                <p class="text-success fs-5 mb-0">₹<span id="crlFixedTotal">0.00</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card d-flex flex-row align-items-center p-3">
                            <div class="me-3"><i class="fas fa-pencil-ruler fa-2x text-warning"></i></div>
                            <div>
                                <h6 class="fw-bold mb-1">CRL Lab - MRP</h6>
                                <p class="text-success fs-5 mb-0">₹<span id="crlCustomTotal">0.00</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Chart Section -->
        <div id="chartWrapper" class="text-center mt-5" style="min-height: 400px;">
            <div id="chartMessage" class="text-muted fs-5">
                Pie chart not available. Please select at least one test.
            </div>
            <div class="pie-chart-container" id="pieChartContainer" style="display: none;">
                <canvas id="priceChart"></canvas>
            </div>
            <div class="text-center mt-4 legend-box" id="legendContainer" style="display: none;">
                <div class="d-flex flex-wrap justify-content-center gap-4" style="display: none !important;">
                    <div><span style="color: #007bff;">■</span> GD Fixed - ₹<span id="gdFixedLegend">0.00</span></div>
                    <div><span style="color: #6610f2;">■</span> GD Custom - ₹<span id="gdCustomLegend">0.00</span></div>
                    <div><span style="color: #28a745;">■</span> CRL Fixed - ₹<span id="crlFixedLegend">0.00</span></div>
                    <div><span style="color: #dc3545;">■</span> CRL Custom - ₹<span id="crlCustomLegend">0.00</span></div>
                </div>
            </div>
        </div>
    </div>
@endsection