@extends('client.layout.master')
@section('page-title', 'Finance')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item f-w-500 active">Finance</li>
@endsection
@section('title','Finance')

@push('css')
    <style>
        .search-box { border-radius: 8px; }
        .tab-content .right-col { border-left: 1px solid #eee; }
        .table thead th a { text-decoration:none; }
        .sticky-right { position: sticky; top: 80px; }
        .accordion-custom .accordion-item { border-radius: 8px; overflow: hidden; border:1px solid #dee2e6; box-shadow:0 2px 5px rgba(0,0,0,0.05); margin-bottom:12px;}
        .accordion-custom .accordion-button { background-color:#f8f9fa; }
        .chart-box {
            height: 420px;      /* التكبير الفعلي */
            width: 100%;
        }
        @media (min-width: 992px) {
            .right-col .card { min-height: 480px; }
        }
        .actions-cell {
            white-space: nowrap;
            text-align: right !important;
            padding-right: 0.75rem !important;
        }

        .actions-cell .btn-link {
            font-size: 0.9rem; /* حجم أصغر للأيقونة */
            line-height: 1;
            border: none;
            background: none;
            text-decoration: none;
        }

        .actions-cell .btn-link i {
            font-size: 0.85rem; /* الأيقونة نفسها أصغر */
            vertical-align: middle;
        }

        .actions-cell .btn-link:hover i {
            transform: scale(1.1);
            transition: 0.2s;
        }



    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <div class="list-product-header d-flex justify-content-between align-items-center mb-3">
            <h4 class="m-0 d-flex align-items-center gap-2 section-header-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cash" width="22" height="22" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <rect x="7" y="9" width="14" height="10" rx="2" />
                    <circle cx="14" cy="14" r="2" />
                    <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" />
                </svg>
                Finance
            </h4>
        </div>

        {{-- Tabs --}}
        @php $activeTab = old('tab', $activeTab ?? 'reports'); @endphp
        <ul class="nav nav-tabs mb-3" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab==='reports'?'active':'' }}" data-bs-toggle="tab" href="#tab-reports" role="tab">Reports</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab==='expenses'?'active':'' }}" data-bs-toggle="tab" href="#tab-expenses" role="tab">Expenses</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeTab==='income'?'active':'' }}" data-bs-toggle="tab" href="#tab-income" role="tab">Income</a>
            </li>
        </ul>

        <div class="tab-content">
            {{-- =================== Reports =================== --}}
            <div class="tab-pane fade {{ $activeTab==='reports'?'show active':'' }}" id="tab-reports" role="tabpanel">
                <form method="GET" action="{{ route('assistant.doctor.income') }}" class="mb-4">
                    <input type="hidden" name="tab" value="reports">
                    <div class="bg-white p-2 pt-4 search-box mb-4">
                        <div class="container-fluid">
                            <div class="row align-items-end">
                                <div class="col-md-2">
                                    <div class="form-group custom-form-group mb-3 input-wrapper">
                                        <input type="date" class="form-control" name="r_date_from" value="{{ request('r_date_from') }}">
                                        <label>Date From</label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group custom-form-group mb-3 input-wrapper">
                                        <input type="date" class="form-control" name="r_date_to" value="{{ request('r_date_to') }}">
                                        <label>Date To</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group mb-3 input-wrapper">
                                        <select name="r_clinic_id" class="form-select">
                                            <option value="">All Clinics</option>
                                            @foreach($clinics as $clinic)
                                                <option value="{{ $clinic->id }}" @selected(request('r_clinic_id')==$clinic->id)>{{ $clinic->name }}</option>
                                            @endforeach
                                        </select>
                                        <label>Clinic</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group mb-3 input-wrapper">
                                        <select name="group_by" class="form-select">
                                            <option value="day"   @selected(request('group_by')==='day')>Day</option>
                                            <option value="week"  @selected(request('group_by')==='week')>Week</option>
                                            <option value="month" @selected((request('group_by')??'month')==='month')>Month</option>
                                        </select>
                                        <label>Group By</label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="d-grid mb-3">
                                        <button class="btn btn-primary" type="submit">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row mb-4">
                    <div class="col-md-4 d-flex">
                        <div class="card title-line sales-details w-100">
                            <div class="card-header card-no-border sales-bg">
                                <div class="header-top"><h2>Income Trend</h2></div>
                            </div>
                            <div class="card-body pt-0">
                                <canvas id="reportIncomeChart" style="height: 300px !important;"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-8 d-flex">
                        <div class="card title-line sales-details w-100">
                            <div class="card-header card-no-border sales-bg">
                                <div class="header-top"><h2>Income Summary</h2></div>
                            </div>
                            <div class="card-body pt-0">
                                <div class="accordion accordion-custom 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 collapsed" type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapse{{ $loop->index }}" aria-expanded="false"
                                                        aria-controls="collapse{{ $loop->index }}">
                                                    <span class="fw-bold">{{ $period }}</span>
                                                    <div class="ms-auto badge-container">
                          <span class="badge bg-info-subtle text-info-emphasis me-2">
                            Income: {{ number_format($incomeData[$period]['total_income'] ?? 0, 2) }}
                          </span>
                                                        <span class="badge bg-success-subtle text-success-emphasis">
                            Price: {{ number_format($incomeData[$period]['total_price'] ?? 0, 2) }}
                          </span>
                                                    </div>
                                                </button>
                                            </h2>
                                            <div id="collapse{{ $loop->index }}" class="accordion-collapse collapse"
                                                 aria-labelledby="heading{{ $loop->index }}" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <div class="table-responsive mt-2">
                                                        <table class="table table-bordered table-striped table-hover">
                                                            <thead class="table-light">
                                                            <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>
                        </div>
                    </div>
                </div>
            </div>

            {{-- =================== Expenses =================== --}}
            <div class="tab-pane fade {{ $activeTab==='expenses'?'show active':'' }}" id="tab-expenses" role="tabpanel">
                <form method="GET" action="{{ route('assistant.doctor.income') }}" class="mb-3">
                    <input type="hidden" name="tab" value="expenses">
                    <div class="bg-white p-2 pt-4 search-box mb-3">
                        <div class="row align-items-end">
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="date" class="form-control" name="e_date_from" value="{{ request('e_date_from') }}">
                                    <label>Date From</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="date" class="form-control" name="e_date_to" value="{{ request('e_date_to') }}">
                                    <label>Date To</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <select name="e_clinic_id" class="form-select">
                                        <option value="">All Clinics</option>
                                        @foreach($clinics as $clinic)
                                            <option value="{{ $clinic->id }}" @selected(request('e_clinic_id')==$clinic->id)>{{ $clinic->name }}</option>
                                        @endforeach
                                    </select>
                                    <label>Clinic</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="text" class="form-control" name="e_category" value="{{ request('e_category') }}">
                                    <label>Category</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="text" class="form-control" name="e_search" value="{{ request('e_search') }}">
                                    <label>Search title</label>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="d-grid mb-3">
                                    <button class="btn btn-primary" type="submit">Filter</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row">
                    <div class="col-lg-8 col-md-7">
                        <div class="d-flex justify-content-between mb-2">
                            <h5 class="mb-0">Expenses</h5>
                            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#expenseModal">Add Expense</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle">
                                <thead>
                                @php
                                    $invert = request('e_dir','desc')==='desc'?'asc':'desc';
                                    $qs = request()->query(); $qs['tab']='expenses';
                                @endphp
                                <tr>
                                    <th>
                                        <a href="{{ request()->fullUrlWithQuery(array_merge($qs,['e_sort'=>'date','e_dir'=> request('e_sort')==='date' ? $invert : 'asc'])) }}">Date</a>
                                    </th>
                                    <th>Clinic</th>
                                    <th>Category</th>
                                    <th>
                                        <a href="{{ request()->fullUrlWithQuery(array_merge($qs,['e_sort'=>'title','e_dir'=> request('e_sort')==='title' ? $invert : 'asc'])) }}">Title</a>
                                    </th>
                                    <th class="text-end">
                                        <a href="{{ request()->fullUrlWithQuery(array_merge($qs,['e_sort'=>'amount','e_dir'=> request('e_sort')==='amount' ? $invert : 'asc'])) }}">Amount</a>
                                    </th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($expenses as $exp)
                                    <tr>
                                        <td>{{ \Carbon\Carbon::parse($exp->date)->format('Y-m-d') }}</td>
                                        <td>{{ $exp->clinic?->name ?? '-' }}</td>
                                        <td>{{ $exp->category ?? '-' }}</td>
                                        <td>{{ $exp->title }}</td>
                                        <td class="text-end">{{ number_format($exp->amount,2) }}</td>
                                        <td class="text-end actions-cell">
                                            {{-- Edit --}}
                                            <button class="btn btn-link p-0 text-primary me-2"
                                                    data-bs-toggle="modal" data-bs-target="#expenseModal"
                                                    data-id="{{ $exp->id }}"
                                                    data-date="{{ $exp->date }}"
                                                    data-clinic_id="{{ $exp->clinic_id }}"
                                                    data-category="{{ $exp->category }}"
                                                    data-title="{{ $exp->title }}"
                                                    data-amount="{{ $exp->amount }}"
                                                    data-notes="{{ $exp->notes }}"
                                                    title="Edit">
                                                <i class="fa fa-pen"></i>
                                            </button>

                                            {{-- Delete --}}
                                            <form action="{{ route('assistant.finance.expenses.destroy',$exp) }}" method="POST" class="d-inline">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-link p-0 text-danger"
                                                        onclick="return confirm('Delete this expense?')" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>


                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center text-muted">No data</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                        {{ $expenses->links() }}
                    </div>

                    <div class="col-lg-4 col-md-5 right-col">
                        <div class="sticky-right">
                            <div class="card">
                                <div class="card-header"><strong>Expenses by Month</strong></div>
                                <div class="card-body p-3">
                                    <div class="chart-box">  {{-- جديد: حاوية بثبات ارتفاع --}}
                                        <canvas id="expensesChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- =================== Income =================== --}}
            <div class="tab-pane fade {{ $activeTab==='income'?'show active':'' }}" id="tab-income" role="tabpanel">
                <form method="GET" action="{{ route('assistant.doctor.income') }}" class="mb-3">
                    <input type="hidden" name="tab" value="income">
                    <div class="bg-white p-2 pt-4 search-box mb-3">
                        <div class="row align-items-end">
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="date" class="form-control" name="i_date_from" value="{{ request('i_date_from') }}">
                                    <label>Date From</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="date" class="form-control" name="i_date_to" value="{{ request('i_date_to') }}">
                                    <label>Date To</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <select name="i_clinic_id" class="form-select">
                                        <option value="">All Clinics</option>
                                        @foreach($clinics as $clinic)
                                            <option value="{{ $clinic->id }}" @selected(request('i_clinic_id')==$clinic->id)>{{ $clinic->name }}</option>
                                        @endforeach
                                    </select>
                                    <label>Clinic</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="text" class="form-control" name="i_source" value="{{ request('i_source') }}">
                                    <label>Source</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group custom-form-group mb-3 input-wrapper">
                                    <input type="text" class="form-control" name="i_search" value="{{ request('i_search') }}">
                                    <label>Search title</label>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="d-grid mb-3">
                                    <button class="btn btn-primary" type="submit">Filter</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row">
                    <div class="col-lg-8 col-md-7">
                        <div class="d-flex justify-content-between mb-2">
                            <h5 class="mb-0">Income</h5>
                            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#incomeModal">Add Income</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle">
                                <thead>
                                @php
                                    $iinvert = request('i_dir','desc')==='desc'?'asc':'desc';
                                    $iqs = request()->query(); $iqs['tab']='income';
                                @endphp
                                <tr>
                                    <th>
                                        <a href="{{ request()->fullUrlWithQuery(array_merge($iqs,['i_sort'=>'date','i_dir'=> request('i_sort')==='date' ? $iinvert : 'asc'])) }}">Date</a>
                                    </th>
                                    <th>Clinic</th>
                                    <th>Source</th>
                                    <th>
                                        <a href="{{ request()->fullUrlWithQuery(array_merge($iqs,['i_sort'=>'title','i_dir'=> request('i_sort')==='title' ? $iinvert : 'asc'])) }}">Title</a>
                                    </th>
                                    <th class="text-end">
                                        <a href="{{ request()->fullUrlWithQuery(array_merge($iqs,['i_sort'=>'amount','i_dir'=> request('i_sort')==='amount' ? $iinvert : 'asc'])) }}">Amount</a>
                                    </th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($incomes as $inc)
                                    <tr>
                                        <td>{{ \Carbon\Carbon::parse($inc->date)->format('Y-m-d') }}</td>
                                        <td>{{ $inc->clinic?->name ?? '-' }}</td>
                                        <td>{{ $inc->source ?? '-' }}</td>
                                        <td>{{ $inc->title }}</td>
                                        <td class="text-end">{{ number_format($inc->amount,2) }}</td>
                                        <td class="text-end actions-cell">
                                            {{-- Edit --}}
                                            <button class="btn btn-link p-0 text-primary me-2"
                                                    data-bs-toggle="modal" data-bs-target="#incomeModal"
                                                    data-id="{{ $inc->id }}"
                                                    data-date="{{ $inc->date }}"
                                                    data-clinic_id="{{ $inc->clinic_id }}"
                                                    data-source="{{ $inc->source }}"
                                                    data-title="{{ $inc->title }}"
                                                    data-amount="{{ $inc->amount }}"
                                                    data-notes="{{ $inc->notes }}"
                                                    title="Edit">
                                                <i class="fa fa-pen"></i>
                                            </button>

                                            {{-- Delete --}}
                                            <form action="{{ route('assistant.finance.incomes.destroy',$inc) }}" method="POST" class="d-inline">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-link p-0 text-danger"
                                                        onclick="return confirm('Delete this income?')" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>

                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center text-muted">No data</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                        {{ $incomes->links() }}
                    </div>

                    <div class="col-lg-4 col-md-5 right-col">
                        <div class="sticky-right">
                            <div class="card">
                                <div class="card-header"><strong>Income by Month</strong></div>
                                <div class="card-body p-3">
                                    <div class="chart-box">  {{-- جديد: حاوية بثبات ارتفاع --}}
                                        <canvas id="incomesChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> {{-- /income --}}
        </div> {{-- /tab-content --}}
    </div>

    {{-- =========== Modals =========== --}}
    {{-- Expense Modal (Create/Update) --}}
    <div class="modal fade" id="expenseModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="expenseForm" method="POST" action="{{ route('assistant.finance.expenses.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="_method" value="POST">
                <div class="modal-header">
                    <h5 class="modal-title">Expense</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Clinic</label>
                        <select name="clinic_id" class="form-select">
                            <option value="">-</option>
                            @foreach($clinics as $clinic)
                                <option value="{{ $clinic->id }}">{{ $clinic->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Category</label>
                        <input type="text" name="category" class="form-control">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Amount</label>
                        <input type="number" step="0.01" name="amount" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                    <input type="hidden" name="tab" value="expenses">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Save</button>
                    <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Income Modal (Create/Update) --}}
    <div class="modal fade" id="incomeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="incomeForm" method="POST" action="{{ route('assistant.finance.incomes.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="_method" value="POST">
                <div class="modal-header">
                    <h5 class="modal-title">Income</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label">Date</label>
                        <input type="date" name="date" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Clinic</label>
                        <select name="clinic_id" class="form-select">
                            <option value="">-</option>
                            @foreach($clinics as $clinic)
                                <option value="{{ $clinic->id }}">{{ $clinic->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Source</label>
                        <input type="text" name="source" class="form-control">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Amount</label>
                        <input type="number" step="0.01" name="amount" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                    <input type="hidden" name="tab" value="income">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Save</button>
                    <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Keep active tab on reload if navigated via GET or after POST redirect with old('tab')
        const activeLink = document.querySelector(`[href="#tab-{{ $activeTab }}"]`);
        if (activeLink) new bootstrap.Tab(activeLink).show();

        // Reports chart
        const reportCtx = document.getElementById('reportIncomeChart')?.getContext('2d');
        if (reportCtx) {
            new Chart(reportCtx, {
                type: '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: 4
                    }]
                },
                options: { responsive: true, scales: { y: { beginAtZero: true } } }
            });
        }

        // Expenses chart
        const eCtx = document.getElementById('expensesChart')?.getContext('2d');
        if (eCtx) {
            new Chart(eCtx, {
                type: 'bar',
                data: { labels: {!! json_encode($expensesChartLabels) !!}, datasets: [{ label: 'Expenses', data: {!! json_encode($expensesChartData) !!} }] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,   // مهم جداً
                    scales: { y: { beginAtZero: true } }
                }
            });
        }

        // Incomes chart
        const iCtx = document.getElementById('incomesChart')?.getContext('2d');
        if (iCtx) {
            new Chart(iCtx, {
                type: 'bar',
                data: { labels: {!! json_encode($incomesChartLabels) !!}, datasets: [{ label: 'Income', data: {!! json_encode($incomesChartData) !!} }] },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,   // مهم جداً
                    scales: { y: { beginAtZero: true } }
                }
            });
        }

        // --------- Edit Modals Fillers ---------
        const expenseModal = document.getElementById('expenseModal');
        expenseModal?.addEventListener('show.bs.modal', function (event) {
            const btn = event.relatedTarget;
            const form = document.getElementById('expenseForm');
            if (!btn || !btn.dataset.id) { // Create
                form.action = "{{ route('assistant.finance.expenses.store') }}";
                form.querySelector('input[name=_method]').value = 'POST';
                form.reset();
                form.querySelector('input[name=tab]').value='expenses';
                return;
            }
            // Update
            form.action = "{{ url('/user/finance/expenses') }}/" + btn.dataset.id;
            form.querySelector('input[name=_method]').value = 'PUT';
            form.querySelector('input[name=date]').value = btn.dataset.date || '';
            form.querySelector('select[name=clinic_id]').value = btn.dataset.clinic_id || '';
            form.querySelector('input[name=category]').value = btn.dataset.category || '';
            form.querySelector('input[name=title]').value = btn.dataset.title || '';
            form.querySelector('input[name=amount]').value = btn.dataset.amount || '';
            form.querySelector('textarea[name=notes]').value = btn.dataset.notes || '';
            form.querySelector('input[name=tab]').value='expenses';
        });

        const incomeModal = document.getElementById('incomeModal');
        incomeModal?.addEventListener('show.bs.modal', function (event) {
            const btn = event.relatedTarget;
            const form = document.getElementById('incomeForm');
            if (!btn || !btn.dataset.id) { // Create
                form.action = "{{ route('assistant.finance.incomes.store') }}";
                form.querySelector('input[name=_method]').value = 'POST';
                form.reset();
                form.querySelector('input[name=tab]').value='income';
                return;
            }
            // Update
            form.action = "{{ url('/user/finance/incomes') }}/" + btn.dataset.id;
            form.querySelector('input[name=_method]').value = 'PUT';
            form.querySelector('input[name=date]').value = btn.dataset.date || '';
            form.querySelector('select[name=clinic_id]').value = btn.dataset.clinic_id || '';
            form.querySelector('input[name=source]').value = btn.dataset.source || '';
            form.querySelector('input[name=title]').value = btn.dataset.title || '';
            form.querySelector('input[name=amount]').value = btn.dataset.amount || '';
            form.querySelector('textarea[name=notes]').value = btn.dataset.notes || '';
            form.querySelector('input[name=tab]').value='income';
        });
    </script>
@endpush