@extends('assistant.layout.master')
@section('page-title', 'Income')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item f-w-500 active">Report</li>
@endsection
@section('title','Income')
@section('content')
    <div class="container-fluid">
        <h2>Income Report</h2>

        <!-- Filter Form -->
        <form method="GET" action="{{ route('assistant.doctor.income') }}" class="row g-3 mb-4">
            <div class="col-md-3">
                <label for="date_from" class="form-label">Date From</label>
                <input type="date" class="form-control" name="date_from" value="{{ $filters['date_from'] ?? '' }}">
            </div>
            <div class="col-md-3">
                <label for="date_to" class="form-label">Date To</label>
                <input type="date" class="form-control" name="date_to" value="{{ $filters['date_to'] ?? '' }}">
            </div>
            <div class="col-md-3">
                <label for="clinic_id" class="form-label">Clinic</label>
                <select name="clinic_id" class="form-select">
                    <option value="">All Clinics</option>
                    @foreach($clinics as $clinic)
                        <option value="{{ $clinic->id }}" {{ ($filters['clinic_id'] ?? '') == $clinic->id ? 'selected' : '' }}>{{ $clinic->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="group_by" class="form-label">Group By</label>
                <select name="group_by" class="form-select">
                    <option value="day" {{ ($filters['group_by'] ?? '') == 'day' ? 'selected' : '' }}>Day</option>
                    <option value="week" {{ ($filters['group_by'] ?? '') == 'week' ? 'selected' : '' }}>Week</option>
                    <option value="month" {{ ($filters['group_by'] ?? 'month') == 'month' ? 'selected' : '' }}>Month</option>
                </select>
            </div>
            <div class="col-12">
                <button class="btn btn-primary">Apply Filters</button>
            </div>
        </form>

        <!-- Chart -->
        <canvas id="incomeChart" height="100"></canvas>

        <!-- Accordion for each period (day, week, month) -->
        <div class="accordion mt-4" id="accordionExample">
            @foreach($groupedVisits as $period => $group)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ $loop->index }}">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $loop->index }}" aria-expanded="false" aria-controls="collapse{{ $loop->index }}">
                            {{ $period }} - Total Income: {{ number_format($incomeData[$period]['total_income'], 2) }} - Total Price: {{ number_format($incomeData[$period]['total_price'], 2) }}
                        </button>
                    </h2>
                    <div id="collapse{{ $loop->index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $loop->index }}" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <!-- Visits Table for this period -->
                            <div class="table-responsive mt-4">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Clinic</th>
                                        <th>Patient</th>
                                        <th>Service</th>
                                        <th>Service Price</th>
                                        <th>Amount Paid</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($group as $visit)
                                        <tr>
                                            <td>{{ \Carbon\Carbon::parse($visit->date)->format('Y-m-d') }}</td>
                                            <td>{{ $visit->clinic->name ?? '-' }}</td>
                                            <td>{{ $visit->patient->name ?? '-' }}</td>
                                            <td>{{ $visit->clinic_service?->service ?? '-' }}</td>
                                            <td>{{ $visit->clinic_service?->price ?? '-' }}</td>
                                            <td>{{ $visit->amount_paid ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('incomeChart').getContext('2d');

        const chart = new Chart(ctx, {
            type: 'line', // changed from 'bar' to 'line'
            data: {
                labels: {!! json_encode($chartData->keys()) !!},
                datasets: [{
                    label: 'Income',
                    data: {!! json_encode($chartData->values()) !!},
                    fill: false,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    tension: 0.1,
                    pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                    pointRadius: 5
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                }
            }
        });
    </script>
@endpush