@extends('layout')
@section('content')
@php $s = $stats; @endphp

<style>
.hosp-dashboard {
    background: linear-gradient(180deg, #eef5f6 0%, #f4f7f9 100%);
    min-height: calc(100vh - 120px);
    padding: 1.25rem 1.5rem 2rem;
}
.hosp-dashboard .dash-hero {
    background: linear-gradient(135deg, #1a3a40 0%, #2a969e 45%, #3badb5 100%);
    border-radius: 14px;
    color: #fff;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(59, 173, 181, 0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.hosp-dashboard .dash-hero h4 { margin: 0; font-weight: 700; font-size: 1.45rem; }
.hosp-dashboard .dash-hero .sub { opacity: 0.9; font-size: 0.92rem; margin-top: 0.25rem; }
.hosp-dashboard .dash-hero .badge-live {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
}
.hosp-dashboard .stat-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    cursor: default;
}
.hosp-dashboard .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}
.hosp-dashboard .stat-card .card-body {
    padding: 1.15rem 1.25rem;
    color: #fff;
    position: relative;
    min-height: 108px;
}
.hosp-dashboard .stat-card .stat-icon {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.2rem;
    opacity: 0.22;
}
.hosp-dashboard .stat-card .stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
    margin-bottom: 0.3rem;
}
.hosp-dashboard .stat-card .stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
}
.hosp-dashboard .stat-card .stat-sub {
    font-size: 0.76rem;
    opacity: 0.88;
    margin-top: 0.3rem;
}
.hosp-dashboard .c-teal   { background: linear-gradient(135deg, #3badb5, #2a969e); }
.hosp-dashboard .c-blue   { background: linear-gradient(135deg, #3498db, #2980b9); }
.hosp-dashboard .c-green  { background: linear-gradient(135deg, #27ae60, #1e8449); }
.hosp-dashboard .c-orange { background: linear-gradient(135deg, #e67e22, #d35400); }
.hosp-dashboard .c-purple { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.hosp-dashboard .c-red    { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.hosp-dashboard .c-navy   { background: linear-gradient(135deg, #2c3e50, #1a252f); }
.hosp-dashboard .c-pink   { background: linear-gradient(135deg, #e84393, #c44569); }
.hosp-dashboard .panel-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    height: 100%;
    background: #fff;
}
.hosp-dashboard .panel-card .card-header {
    background: #fff;
    border-bottom: 1px solid #eef1f4;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    border-radius: 12px 12px 0 0;
    color: #1a3a40;
}
.hosp-dashboard .panel-card .card-header i { color: #3badb5; margin-right: 0.45rem; }
.hosp-dashboard .panel-card .table { margin-bottom: 0; font-size: 0.84rem; }
.hosp-dashboard .panel-card .table th {
    border-top: none;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.hosp-dashboard .chart-wrap { position: relative; height: 280px; padding: 0.5rem 1rem 1rem; }
.hosp-dashboard .badge-done { background: #d4edda; color: #155724; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 4px; }
.hosp-dashboard .badge-wait { background: #fff3cd; color: #856404; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 4px; }
.hosp-dashboard .stat-card.stat-clickable { cursor: pointer; }
.hosp-dashboard .stat-card .stat-view {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.92;
    border-bottom: 1px solid rgba(255,255,255,0.55);
}
.hosp-dashboard .stat-card.stat-clickable:hover .stat-view {
    opacity: 1;
}
.hosp-dashboard .section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    margin: 0.5rem 0 1rem;
}
</style>

<div class="hosp-dashboard">

    <div class="dash-hero">
        <div>
            <h4><i class="fas fa-hospital-alt mr-2"></i>Hospital Management Dashboard</h4>
            <div class="sub">Sanjeevan Hospital &mdash; {{ $s['todayFormatted'] }}</div>
        </div>
        <div class="text-right">
            <span class="badge-live"><i class="fas fa-circle text-success mr-1" style="font-size:0.5rem;"></i> Live Overview</span>
            <div class="sub mt-1">Welcome, {{ $s['userName'] ?? 'User' }}</div>
        </div>
    </div>

    {{-- Row 1: OPD & Queue --}}
    <div class="section-title">Today's OPD Overview</div>
    <div class="row mb-3">
        <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
            <div class="card stat-card c-teal">
                <div class="card-body">
                    <i class="fas fa-users stat-icon"></i>
                    <div class="stat-label">OPD Patients</div>
                    <div class="stat-value">{{ number_format($s['queueTotal']) }}</div>
                    <div class="stat-sub">In queue today</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
            <div class="card stat-card c-orange">
                <div class="card-body">
                    <i class="fas fa-hourglass-half stat-icon"></i>
                    <div class="stat-label">Pending</div>
                    <div class="stat-value">{{ number_format($s['queuePending']) }}</div>
                    <div class="stat-sub">{{ $s['queueDone'] }} completed</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
            <div class="card stat-card c-blue">
                <div class="card-body">
                    <i class="fas fa-calendar-check stat-icon"></i>
                    <div class="stat-label">Appointments</div>
                    <div class="stat-value">{{ number_format($s['appointmentsToday']) }}</div>
                    <div class="stat-sub">Scheduled today</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
            <div class="card stat-card c-navy">
                <div class="card-body">
                    <i class="fas fa-coins stat-icon"></i>
                    <div class="stat-label">Total Today</div>
                    <div class="stat-value">&#8377;{{ number_format($s['todayCollection'], 0) }}</div>
                    <div class="stat-sub">OPD + IPD</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
            <div class="card stat-card c-purple">
                <div class="card-body">
                    <i class="fas fa-user-injured stat-icon"></i>
                    <div class="stat-label">Total Patients</div>
                    <div class="stat-value">{{ number_format($s['totalPatients']) }}</div>
                    <div class="stat-sub">{{ $s['totalDoctors'] }} consultants</div>
                </div>
            </div>
        </div>
    </div>

    <div class="section-title">OPD Payments (Today)</div>
    <div class="row mb-4">
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-green stat-clickable" onclick="openOpdReceiptPayMode('Cash')" title="View cash OPD receipts">
                <div class="card-body">
                    <i class="fas fa-money-bill-wave stat-icon"></i>
                    <div class="stat-label">Cash Payment</div>
                    <div class="stat-value">&#8377;{{ number_format($s['opdCashAmount'], 0) }}</div>
                    <div class="stat-sub">{{ $s['opdCashCount'] }} receipt(s)</div>
                    <span class="stat-view">View &rarr;</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-blue stat-clickable" onclick="openOpdReceiptPayMode('Mobile Payment')" title="View mobile payment OPD receipts">
                <div class="card-body">
                    <i class="fas fa-mobile-alt stat-icon"></i>
                    <div class="stat-label">Mobile Payment</div>
                    <div class="stat-value">&#8377;{{ number_format($s['opdMobileAmount'], 0) }}</div>
                    <div class="stat-sub">{{ $s['opdMobileCount'] }} receipt(s)</div>
                    <span class="stat-view">View &rarr;</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-orange stat-clickable" onclick="openOpdReceiptPayMode('Coupon')" title="View coupon OPD receipts">
                <div class="card-body">
                    <i class="fas fa-ticket-alt stat-icon"></i>
                    <div class="stat-label">Coupon Payment</div>
                    <div class="stat-value">&#8377;{{ number_format($s['opdCouponAmount'], 0) }}</div>
                    <div class="stat-sub">{{ $s['opdCouponCount'] }} receipt(s)</div>
                    <span class="stat-view">View &rarr;</span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-teal stat-clickable" onclick="openOpdReceiptPayMode('')" title="View all OPD receipts">
                <div class="card-body">
                    <i class="fas fa-receipt stat-icon"></i>
                    <div class="stat-label">OPD Total</div>
                    <div class="stat-value">&#8377;{{ number_format($s['opdReceiptAmount'], 0) }}</div>
                    <div class="stat-sub">{{ $s['opdReceiptCount'] }} receipt(s) all modes</div>
                    <span class="stat-view">View All &rarr;</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Row 2: IPD & OT --}}
    <div class="section-title">IPD & Operation Theatre</div>
    <div class="row mb-4">
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-red">
                <div class="card-body">
                    <i class="fas fa-procedures stat-icon"></i>
                    <div class="stat-label">Active IPD</div>
                    <div class="stat-value">{{ number_format($s['activeIpd']) }}</div>
                    <div class="stat-sub">{{ $s['ipdAdmittedToday'] }} admitted today</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-teal">
                <div class="card-body">
                    <i class="fas fa-file-invoice stat-icon"></i>
                    <div class="stat-label">IPD Receipts</div>
                    <div class="stat-value">&#8377;{{ number_format($s['ipdReceiptAmount'], 0) }}</div>
                    <div class="stat-sub">{{ $s['ipdReceiptCount'] }} today</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-blue">
                <div class="card-body">
                    <i class="fas fa-file-medical stat-icon"></i>
                    <div class="stat-label">IPD Bills</div>
                    <div class="stat-value">&#8377;{{ number_format($s['ipdBillAmount'], 0) }}</div>
                    <div class="stat-sub">{{ $s['ipdBillCount'] }} bills today</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3 mb-3">
            <div class="card stat-card c-orange">
                <div class="card-body">
                    <i class="fas fa-user-md stat-icon"></i>
                    <div class="stat-label">OT Scheduled</div>
                    <div class="stat-value">{{ number_format($s['otScheduledToday']) }}</div>
                    <div class="stat-sub">{{ $s['dischargeToday'] }} discharged today</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts --}}
    <div class="row mb-4">
        <div class="col-lg-8 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-chart-bar"></i>Monthly Revenue ({{ $s['monthlyRevenueChart']['year'] }})</div>
                <div class="chart-wrap"><canvas id="revenueChart"></canvas></div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-chart-pie"></i>Today's Queue Status</div>
                <div class="chart-wrap"><canvas id="queuePieChart"></canvas></div>
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-12 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-walking"></i>Monthly OPD Patient Visits ({{ $s['monthlyVisitsChart']['year'] }})</div>
                <div class="chart-wrap" style="height:240px;"><canvas id="visitsChart"></canvas></div>
            </div>
        </div>
    </div>

    {{-- Tables --}}
    <div class="row">
        <div class="col-lg-6 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-list-ol"></i>Today's OPD Queue</div>
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead><tr>
                            <th>MRD</th><th>Patient</th><th>Consultant</th><th>Time</th><th>Status</th>
                        </tr></thead>
                        <tbody>
                        @forelse($s['todayQueue'] as $row)
                        <tr>
                            <td>{{ $row->MrdNo }}</td>
                            <td>{{ $row->PatientName }}</td>
                            <td>{{ $row->ConsultantName ?? '-' }}</td>
                            <td>{{ $row->InTime ? date('h:i A', strtotime($row->InTime)) : '-' }}</td>
                            <td>@if($row->Checked == 1)<span class="badge-done">Done</span>@else<span class="badge-wait">Waiting</span>@endif</td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-3">No patients in queue today</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-calendar-alt"></i>Today's Appointments</div>
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead><tr>
                            <th>MRD</th><th>Patient</th><th>Time</th><th>Refer For</th><th>Consultant</th>
                        </tr></thead>
                        <tbody>
                        @forelse($s['todayAppointments'] as $row)
                        <tr>
                            <td>{{ $row->MrdNo }}</td>
                            <td>{{ $row->PatientName }}</td>
                            <td>{{ $row->AppTime ? date('h:i A', strtotime($row->AppTime)) : '-' }}</td>
                            <td>{{ $row->ReferFor ?? '-' }}</td>
                            <td>{{ $row->Consultant ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-3">No appointments today</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-procedures"></i>Today's OT Schedule</div>
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead><tr>
                            <th>MRD</th><th>Patient</th><th>Operation Planned</th>
                        </tr></thead>
                        <tbody>
                        @forelse($s['todayOtSchedule'] as $row)
                        <tr>
                            <td>{{ $row->MrdNo }}</td>
                            <td>{{ $row->PatientName }}</td>
                            <td>{{ $row->OperationPlanned ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="3" class="text-center text-muted py-3">No OT scheduled today</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-3">
            <div class="card panel-card">
                <div class="card-header"><i class="fas fa-receipt"></i>Today's OPD Receipts</div>
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead><tr>
                            <th>MRD</th><th>Patient</th><th>Procedure</th><th>Amount</th><th>Mode</th>
                        </tr></thead>
                        <tbody>
                        @forelse($s['recentOpdReceipts'] as $row)
                        <tr>
                            <td>{{ $row->MrdNo }}</td>
                            <td>{{ $row->PatientName }}</td>
                            <td>{{ Str::limit($row->Procedures ?? '-', 30) }}</td>
                            <td>&#8377;{{ number_format($row->Amount ?? 0, 0) }}</td>
                            <td>{{ $row->PayMode ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-3">No OPD receipts today</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scriptcontent')
<script src="{{ url('assets/libs/chartjs/chartjs.js') }}?v={{ assetVersion() }}"></script>
<script>
function openOpdReceiptPayMode(payMode) {
    var today = @json($s['today']);
    var qs = '?from=' + encodeURIComponent(today) + '&to=' + encodeURIComponent(today);
    if (payMode) {
        qs += '&paymode=' + encodeURIComponent(payMode);
    }
    window.open(
        '/{{ projectUrl() }}OpdReceipt' + qs,
        'OpdReceipt',
        'height=600,width=1300,left=20,top=40,right=40,bottom=40,resizable=no,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no'
    );
}

$(function () {
    if (typeof Chart === 'undefined') return;

    var rev = @json($s['monthlyRevenueChart']);
    var visits = @json($s['monthlyVisitsChart']);
    var queueDone = {{ (int) $s['queueDone'] }};
    var queuePending = {{ (int) $s['queuePending'] }};

    var revCtx = document.getElementById('revenueChart');
    if (revCtx) {
        new Chart(revCtx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: rev.labels,
                datasets: [
                    { label: 'OPD', data: rev.opd, backgroundColor: 'rgba(59,173,181,0.85)', stack: 'rev' },
                    { label: 'IPD', data: rev.ipd, backgroundColor: 'rgba(52,152,219,0.85)', stack: 'rev' }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { position: 'top' },
                scales: {
                    xAxes: [{ stacked: true, gridLines: { display: false } }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            callback: function (v) { return '\u20B9' + Number(v).toLocaleString('en-IN'); }
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function (t, d) {
                            return d.datasets[t.datasetIndex].label + ': \u20B9' + Number(t.yLabel).toLocaleString('en-IN');
                        }
                    }
                }
            }
        });
    }

    var pieCtx = document.getElementById('queuePieChart');
    if (pieCtx) {
        new Chart(pieCtx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Completed', 'Pending'],
                datasets: [{
                    data: [queueDone, queuePending],
                    backgroundColor: ['#27ae60', '#e67e22'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { position: 'bottom' }
            }
        });
    }

    var visCtx = document.getElementById('visitsChart');
    if (visCtx) {
        new Chart(visCtx.getContext('2d'), {
            type: 'line',
            data: {
                labels: visits.labels,
                datasets: [{
                    label: 'OPD Visits',
                    data: visits.counts,
                    borderColor: '#3badb5',
                    backgroundColor: 'rgba(59,173,181,0.12)',
                    borderWidth: 2.5,
                    fill: true,
                    pointRadius: 4,
                    pointBackgroundColor: '#3badb5'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: { display: false },
                scales: {
                    yAxes: [{ ticks: { beginAtZero: true, precision: 0 } }],
                    xAxes: [{ gridLines: { display: false } }]
                }
            }
        });
    }
});
</script>
@endsection