@extends('admin.layouts.app')

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

    <x-admin.alert />

    <form method="POST" action="{{ route('admin.reports.custom.store') }}">
        @csrf
        <div class="row">
            <div class="col-lg-8">
                <x-admin.card>
                    <div class="mb-3">
                        <label class="form-label">Report Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                               name="name" value="{{ old('name') }}" required>
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" rows="2">{{ old('description') }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Data Source <span class="text-danger">*</span></label>
                        <select class="form-select @error('data_source') is-invalid @enderror" name="data_source" id="data-source-select" required>
                            <option value="">-- Select --</option>
                            @foreach($dataSources as $key => $source)
                                <option value="{{ $key }}" data-columns='@json($source["columns"])' {{ old('data_source') === $key ? 'selected' : '' }}>
                                    {{ $source['label'] }}
                                </option>
                            @endforeach
                        </select>
                        @error('data_source') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Columns <span class="text-danger">*</span></label>
                        <div id="columns-container" class="row g-2">
                            <p class="text-muted small">Select a data source first.</p>
                        </div>
                    </div>
                </x-admin.card>
            </div>

            <div class="col-lg-4">
                <x-admin.card>
                    <div class="mb-3">
                        <label class="form-label">Sort By</label>
                        <input type="text" class="form-control" name="sort_by" value="{{ old('sort_by', 'created_at') }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Sort Direction</label>
                        <select class="form-select" name="sort_direction">
                            <option value="desc" {{ old('sort_direction', 'desc') === 'desc' ? 'selected' : '' }}>Descending</option>
                            <option value="asc" {{ old('sort_direction') === 'asc' ? 'selected' : '' }}>Ascending</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Chart Type</label>
                        <select class="form-select" name="chart_type">
                            <option value="table">Table</option>
                            <option value="bar">Bar Chart</option>
                            <option value="pie">Pie Chart</option>
                            <option value="line">Line Chart</option>
                        </select>
                    </div>

                    <x-slot:footer>
                        <x-admin.form-actions :cancel-url="route('admin.reports.custom.index')" />
                    </x-slot:footer>
                </x-admin.card>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sourceSelect = document.getElementById('data-source-select');
    const columnsContainer = document.getElementById('columns-container');

    sourceSelect.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        const columns = option.dataset.columns ? JSON.parse(option.dataset.columns) : [];

        columnsContainer.innerHTML = '';
        columns.forEach(col => {
            const div = document.createElement('div');
            div.className = 'col-md-6';
            div.innerHTML = `<div class="form-check">
                <input class="form-check-input" type="checkbox" name="columns[]" value="${col}" id="col-${col}" checked>
                <label class="form-check-label" for="col-${col}">${col}</label>
            </div>`;
            columnsContainer.appendChild(div);
        });
    });

    if (sourceSelect.value) sourceSelect.dispatchEvent(new Event('change'));
});
</script>
@endpush
