@extends('layouts.app')

@section('title', 'التقارير')

@push('head')
<style>
    .report-card {
        display: flex; flex-direction: column;
        height: 100%;
        border: 1px solid #e2e8f0; border-radius: .85rem;
        text-decoration: none; color: inherit;
        padding: 1.5rem 1.25rem;
        background: #fff;
        transition: all .15s ease;
        position: relative;
        overflow: hidden;
    }
    .report-card:hover {
        transform: translateY(-3px);
        border-color: #0ea5e9;
        box-shadow: 0 12px 28px rgba(14, 165, 233, .15);
        color: inherit;
    }
    .report-card::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--card-tone, #0ea5e9), transparent);
    }
    .report-card .icon-block {
        width: 56px; height: 56px; border-radius: .85rem;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.7rem; margin-bottom: .85rem;
    }
    .report-card .arrow {
        position: absolute; bottom: 1rem; left: 1rem;
        color: #cbd5e1;
        transition: transform .15s ease, color .15s ease;
    }
    .report-card:hover .arrow { color: #0ea5e9; transform: translateX(-3px); }
    .report-card h3 { font-weight: 700; margin-bottom: .35rem; font-size: 1.05rem; }
    .report-card p { color: #64748b; font-size: .87rem; margin-bottom: 0; }
</style>
@endpush

@php
    // Each report tile carries a tone color for the top accent line +
    // icon background. Keys map to subtle Tabler colors that don't
    // clash with the main hero gradient.
    $reports = [
        [
            'icon' => 'ti-cash',
            'tone' => '#16a34a',
            'bg' => '#dcfce7',
            'fg' => '#15803d',
            'title' => 'الإيراد اليومي',
            'desc' => 'تفصيل الإيرادات بحسب اليوم وطريقة الدفع',
            'url' => route('reports.daily-revenue'),
            'feature' => null,
        ],
        [
            'icon' => 'ti-user-search',
            'tone' => '#0ea5e9',
            'bg' => '#dbeafe',
            'fg' => '#1e40af',
            'title' => 'كشف حساب مريض',
            'desc' => 'كل الفواتير والمدفوعات لمريض محدد',
            // No direct URL — requires picking a patient first. The card
            // opens a modal that redirects to /reports/patients/{id}/statement
            // once the user picks one.
            'url' => null,
            'modal' => 'patientStatementModal',
            'feature' => null,
        ],
        [
            'icon' => 'ti-stethoscope',
            'tone' => '#8b5cf6',
            'bg' => '#ede9fe',
            'fg' => '#5b21b6',
            'title' => 'أداء الأطباء',
            'desc' => 'عدد المواعيد والمرضى بحسب الطبيب',
            'url' => route('reports.doctor-performance'),
            'feature' => 'advanced_reports',
        ],
        [
            'icon' => 'ti-chart-pie',
            'tone' => '#f59e0b',
            'bg' => '#fef3c7',
            'fg' => '#b45309',
            'title' => 'تحليلات المواعيد',
            'desc' => 'معدلات الإلغاء وعدم الحضور والنشاط الأسبوعي',
            'url' => route('reports.appointments-analytics'),
            'feature' => 'advanced_reports',
        ],
        [
            'icon' => 'ti-clock-dollar',
            'tone' => '#ef4444',
            'bg' => '#fee2e2',
            'fg' => '#b91c1c',
            'title' => 'الذمم المُعمّرة',
            'desc' => 'الفواتير غير المدفوعة بحسب العمر (30/60/90 يوم)',
            'url' => route('reports.aged-receivables'),
            'feature' => 'advanced_reports',
        ],
    ];

    $gate = app(\App\Services\PlanFeatureGate::class);
@endphp

@section('content')
<x-clinic-hero
    title="التقارير"
    subtitle="نظرة شاملة على أداء العيادة — الإيرادات، الأطباء، الذمم"
    icon="ti-chart-bar"
    tone="reports"
/>

<div class="row row-cards g-3">
    @foreach($reports as $r)
        @php
            $locked = ! empty($r['feature']) && ! $gate->can($r['feature']);
            // A card with `modal` set opens a picker dialog instead of
            // navigating directly. Locked cards are inert regardless.
            $isModal = ! empty($r['modal']);
            $href = $locked ? '#' : ($r['url'] ?? '#');
        @endphp
        <div class="col-md-6 col-xl-4">
            <a href="{{ $href }}"
               @if($isModal && ! $locked)
                   data-bs-toggle="modal" data-bs-target="#{{ $r['modal'] }}"
               @endif
               class="report-card {{ $locked ? 'pe-none opacity-50' : '' }}"
               style="--card-tone: {{ $r['tone'] }};">
                <span class="icon-block" style="background: {{ $r['bg'] }}; color: {{ $r['fg'] }};">
                    <i class="ti {{ $r['icon'] }}"></i>
                </span>
                <h3>
                    {{ $r['title'] }}
                    @if($locked)
                        <span class="status-pill bg-secondary-lt text-secondary ms-1" style="font-size:.65rem;">
                            <i class="ti ti-lock"></i> غير متاح في باقتك
                        </span>
                    @endif
                </h3>
                <p>{{ $r['desc'] }}</p>
                <i class="ti ti-arrow-left arrow fs-3"></i>
            </a>
        </div>
    @endforeach
</div>

{{-- ============================================================ --}}
{{-- Patient picker modal for the patient-statement report.        --}}
{{-- ============================================================ --}}
<div class="modal fade" id="patientStatementModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-user-search me-1"></i> كشف حساب مريض</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-3">اختر المريض اللي تريد عرض كشف حسابه.</p>
                <label class="form-label required">المريض</label>
                <select id="psPatient" class="form-select" required>
                    <option value="">— اختر المريض —</option>
                </select>
                <div class="form-hint">ابدأ بكتابة الاسم أو رقم الملف للبحث.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" id="psGoBtn" class="btn btn-primary" disabled>
                    <i class="ti ti-arrow-left me-1"></i> فتح كشف الحساب
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container .select2-selection--single { height: 38px; padding: 4px 10px; border-color: #e2e8f0; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/ar.js"></script>
<script>
(function () {
    const $modal = $('#patientStatementModal');
    const $btn = $('#psGoBtn');

    // Reuse the bidi-safe patient picker from name-pickers.js so this
    // dropdown matches the rest of the app.
    NamePickers.patient($('#psPatient'), {
        dropdownParent: $modal,
        searchUrl: '{{ route('patients.search') }}',
    });

    $('#psPatient').on('change', function () {
        $btn.prop('disabled', ! this.value);
    });

    $btn.on('click', function () {
        const id = $('#psPatient').val();
        if (! id) return;
        // Build the route URL by substituting a placeholder that Laravel
        // doesn't try to interpret server-side.
        window.location = '{{ route('reports.patient-statement', ['patient' => '_PATIENT_']) }}'
            .replace('_PATIENT_', id);
    });

    $modal.on('hidden.bs.modal', function () {
        $('#psPatient').val(null).trigger('change');
        $btn.prop('disabled', true);
    });
})();
</script>
@endpush