@extends('admin.layouts.app')

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="$mode === 'edit' ? __('admin/reports.builder_edit_title') : __('admin/reports.builder_create_title')"
        icon="fas fa-chart-bar"
        :buttons="[
            ['label' => __('admin/common.cancel'), 'route' => route('admin.reports.custom.index'), 'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <x-admin.alert />

    <div class="d-flex gap-2 mb-2">
        <button type="button" class="btn btn-outline-info" id="btnPreview"><i class="fas fa-eye"></i> {{ __('admin/reports.preview_btn') }}</button>
        <button type="button" class="btn btn-primary" id="btnSave"><i class="fas fa-save"></i> {{ __('admin/common.save') }}</button>
    </div>

    <div class="row g-2 builder-layout" style="height: calc(100vh - 280px); min-height: 600px;">
        <div class="col-md-3">
            @include('admin.reports.custom._partials.sidebar')
        </div>

        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>{{ __('admin/reports.canvas_title') }}</strong>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btnSuggestJoins">
                        <i class="fas fa-magic"></i> {{ __('admin/reports.suggest_joins_btn') }}
                    </button>
                </div>
                <div class="card-body p-0">
                    <div id="drawflow" style="width: 100%; height: 100%; min-height: 400px;"></div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            @include('admin.reports.custom._partials.config-panel')
        </div>
    </div>
</div>

<x-admin.modal id="filterModal" :title="__('admin/reports.filter_modal_title')">
    <div id="filterModalBody"></div>
</x-admin.modal>

<x-admin.modal id="joinModal" :title="__('admin/reports.join_modal_title')">
    <div id="joinModalBody"></div>
</x-admin.modal>

<x-admin.modal id="previewModal" :title="__('admin/reports.preview_modal_title')" size="xl">
    <div id="previewModalBody"></div>
</x-admin.modal>


<x-admin.modal id="groupByModal" :title="__('admin/reports.groupby_modal_title')">
    <div id="groupByModalBody"></div>
</x-admin.modal>

<x-admin.modal id="sortModal" :title="__('admin/reports.sort_modal_title')">
    <div id="sortModalBody"></div>
</x-admin.modal>

@endsection

@push('styles')

<style>
.report-node { min-width: 200px; padding: 0.5rem; }
.report-node-header { font-weight: bold; border-bottom: 1px solid #ccc; margin-bottom: 0.5rem; padding-bottom: 0.25rem; }
.report-node-body { font-size: 0.85rem; }
</style>
@endpush

@push('scripts')
@php
    // Blade @json directive's argument parser breaks on commas inside nested
    // arrays — assign to a local first.
    $reportData = $report?->only(['id', 'uuid', 'name', 'description', 'ir', 'is_public', 'owner_admin_id', 'last_executed_at']);
@endphp
<script>
window.pageConfig = {
    mode: '{{ $mode }}',
    report: @json($reportData),
    routes: {
        schemaTables: '{{ route("api.admin.reports.schema.tables") }}',
        schemaFks: '{{ route("api.admin.reports.schema.fks") }}',
        store: '{{ route("admin.reports.custom.store") }}',
        update: {!! $report ? "'" . route('admin.reports.custom.update', $report) . "'" : 'null' !!},
        preview: '{{ route("admin.reports.custom.preview") }}',
        index: '{{ route("admin.reports.custom.index") }}',
    },
    csrf: '{{ csrf_token() }}',
    config: {
        max_joins: {{ config('reports.max_joins') }},
        max_columns: {{ config('reports.max_columns') }},
        preview_limit: {{ config('reports.preview_limit') }},
    },
    translations: {
        select_table: '{{ __("admin/reports.t_select_table") }}',
        select_column: '{{ __("admin/reports.t_select_column") }}',
        invalid_ir: '{{ __("admin/reports.t_invalid_ir") }}',
        // PRC-38 I6 — group-by + sort modal labels
        table_label: @json(__('admin/reports.col_table') ?: 'Table'),
        column_label: @json(__('admin/reports.col_column') ?: 'Column'),
        direction_label: @json(__('admin/reports.t_direction') ?: 'Direction'),
        aggregate_label: @json(__('admin/reports.t_aggregate') ?: 'Aggregate (optional)'),
        save: @json(__('admin/common.save') ?: 'Save'),
        no_tables: @json(__('admin/reports.t_no_tables_yet') ?: 'Add a table to the canvas first'),
    },
};
</script>
@vite('resources/js/admin/reports/builder.js')
@endpush
