@extends('admin.layouts.app')

@section('title', $report->getName())

@section('content')
@can('view reports')
<div class="container-fluid px-4">
    <x-admin.page-header :title="$report->getName()" :subtitle="$report->getDescription()" icon="fas fa-chart-line" />

    <!-- Filtreler -->
    <div class="row mb-4">
        <div class="col-12">
            <x-admin.card :title="__('admin/reports.filters')" icon="fas fa-filter">
                <form id="reportFiltersForm">
                    <div class="row">
                        @foreach($report->getFilters() as $key => $filter)
                        <div class="col-md-3 mb-3">
                            <label for="{{ $key }}" class="form-label">{{ $filter['label'] }}</label>
                            @if($filter['type'] === 'date')
                                <input type="date"
                                       class="form-control"
                                       id="{{ $key }}"
                                       name="{{ $key }}"
                                       value="{{ $filter['default'] ?? '' }}"
                                       @if($filter['required'] ?? false) required @endif>
                            @elseif($filter['type'] === 'select')
                                <select class="form-select"
                                        id="{{ $key }}"
                                        name="{{ $key }}"
                                        @if($filter['required'] ?? false) required @endif>
                                    @foreach($filter['options'] as $value => $label)
                                        <option value="{{ $value }}"
                                                @if(($filter['default'] ?? '') === $value) selected @endif>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                            @elseif($filter['type'] === 'number')
                                <input type="number"
                                       class="form-control"
                                       id="{{ $key }}"
                                       name="{{ $key }}"
                                       value="{{ $filter['default'] ?? '' }}"
                                       min="{{ $filter['min'] ?? '' }}"
                                       max="{{ $filter['max'] ?? '' }}"
                                       @if($filter['required'] ?? false) required @endif>
                            @endif
                        </div>
                        @endforeach
                        <div class="col-md-3 mb-3">
                            <label class="form-label">&nbsp;</label>
                            <button type="submit" class="btn btn-primary d-block w-100">
                                <i class="fas fa-play me-2"></i>{{ __('admin/reports.generate_report') }}
                            </button>
                        </div>
                    </div>
                </form>
            </x-admin.card>
        </div>
    </div>

    <!-- Loading -->
    <div id="loading" class="text-center" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{{ __('admin/reports.loading') }}</span>
        </div>
        <p class="mt-2">{{ __('admin/reports.generating') }}</p>
    </div>

    <!-- Sonuçlar -->
    <div id="results" style="display: none;">
        <!-- Özet -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('admin/reports.total_records') }}</h5>
                        <h3 id="totalRecords">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('admin/reports.created_at') }}</h5>
                        <h6 id="generatedAt">-</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('admin/reports.category') }}</h5>
                        <h6 id="categoryInfo">-</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('admin/reports.filters') }}</h5>
                        <h6 id="filtersInfo">-</h6>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grafik -->
        <div id="chartSection" class="row mb-4" style="display: none;">
            <div class="col-12">
                <x-admin.card :title="__('admin/reports.chart_view')" icon="fas fa-chart-area">
                    <canvas id="chartCanvas" width="400" height="200"></canvas>
                </x-admin.card>
            </div>
        </div>

        <!-- Tablo -->
        <div class="row">
            <div class="col-12">
                <x-admin.card :title="__('admin/reports.table_view')" icon="fas fa-table">
                    <x-slot:headerActions>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="exportCsvBtn">
                            <i class="fas fa-file-csv me-1"></i>{{ __('admin/reports.download_csv') }}
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="printReportBtn">
                            <i class="fas fa-print me-1"></i>{{ __('admin/reports.print') }}
                        </button>
                    </x-slot:headerActions>

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="dataTable">
                            <thead id="tableHeader">
                                <!-- Dinamik olarak doldurulacak -->
                            </thead>
                            <tbody id="tableBody">
                                <!-- Dinamik olarak doldurulacak -->
                            </tbody>
                        </table>
                    </div>
                </x-admin.card>
            </div>
        </div>
    </div>
</div>
@else
<div class="container-fluid px-4">
    <div class="row">
        <div class="col-12">
            <div class="alert alert-danger">
                <h4>{{ __('admin/reports.access_denied') }}</h4>
                <p>{{ __('admin/reports.access_denied_message') }}</p>
            </div>
        </div>
    </div>
</div>
@endcan
@endsection

@push('scripts')
@vite('resources/js/admin/reports/detail.js')
@endpush
