@extends('tenant.layouts.app')

@section('content')
    <div class="page-headers pe-0">
        <ol class="breadcrumbs">
            <li class="breadcrumb-item">
                <a><i data-feather="activity" class="stroke-icon"></i></a>
            </li>
            <li class="breadcrumb-item"><a><span class="text-primary">Reportes</span></a></li>
            <li class="breadcrumb-item active">{{ $reportDefinition['title'] }}</li>
        </ol>
    </div>

    <div class="card card-dashboard">
        <div class="card-body">
            <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between mb-3">
                <div class="pe-lg-3">
                    <h4 class="mb-1">{{ $reportDefinition['title'] }}</h4>
                    <p class="text-muted mb-0">{{ $reportDefinition['description'] }}</p>
                </div>
                <a id="pharmacy-report-excel" href="{{ $excelUrl }}" class="btn btn-sm btn-success mt-3 mt-lg-0">
                    Exportar Excel
                </a>
            </div>

            <form id="pharmacy-report-filters" class="row">
                @foreach($reportDefinition['filters'] as $filter)
                    @php
                        $name = $filter['name'];
                        $value = old($name, $filter['default'] ?? request($name));
                        $options = $filter['options'] ?? null;
                    @endphp
                    <div class="col-12 col-md-6 col-xl-4 mb-3">
                        <label class="control-label">{{ $filter['label'] }}</label>
                        @if($filter['type'] === 'select')
                            <select name="{{ $name }}" class="form-control">
                                <option value="">Todos</option>
                                @foreach(($filterOptions[$options] ?? []) as $option)
                                    <option value="{{ $option['id'] }}" {{ (string) $value === (string) $option['id'] ? 'selected' : '' }}>
                                        {{ $option['name'] }}
                                    </option>
                                @endforeach
                            </select>
                        @elseif($filter['type'] === 'date')
                            <input type="date" name="{{ $name }}" value="{{ $value }}" class="form-control">
                        @elseif($filter['type'] === 'number')
                            <input type="number" min="0" step="1" name="{{ $name }}" value="{{ $value }}" class="form-control">
                        @else
                            <input type="text" name="{{ $name }}" value="{{ $value }}" class="form-control">
                        @endif
                    </div>
                @endforeach

                <div class="col-12 d-flex flex-wrap align-items-center gap-2 mb-2">
                    <button type="submit" class="btn btn-primary btn-sm me-2">Buscar</button>
                    <button type="button" id="pharmacy-report-reset" class="btn btn-light btn-sm border">Limpiar</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card card-dashboard mt-3">
        <div class="card-body">
            <div id="pharmacy-report-loading" class="text-muted mb-2 d-none">Cargando...</div>
            <div class="table-responsive">
                <table class="table table-striped table-sm mb-0">
                    <thead>
                    <tr>
                        @foreach($reportDefinition['columns'] as $column)
                            <th>{{ $column['label'] }}</th>
                        @endforeach
                    </tr>
                    </thead>
                    <tbody id="pharmacy-report-body">
                    <tr>
                        <td colspan="{{ count($reportDefinition['columns']) }}" class="text-center text-muted">
                            Sin resultados cargados.
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="d-flex align-items-center justify-content-between mt-3" id="pharmacy-report-pagination">
                <small class="text-muted" id="pharmacy-report-meta">0 registros</small>
                <div>
                    <button type="button" class="btn btn-light btn-sm border" data-page-action="prev">Anterior</button>
                    <button type="button" class="btn btn-light btn-sm border" data-page-action="next">Siguiente</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.getElementById('pharmacy-report-filters');
            const body = document.getElementById('pharmacy-report-body');
            const meta = document.getElementById('pharmacy-report-meta');
            const loading = document.getElementById('pharmacy-report-loading');
            const excel = document.getElementById('pharmacy-report-excel');
            const reset = document.getElementById('pharmacy-report-reset');
            const columns = @json($reportDefinition['columns']);
            const recordsUrl = @json($recordsUrl);
            let currentPage = 1;
            let lastPage = 1;

            const serialize = () => {
                const params = new URLSearchParams(new FormData(form));
                params.set('page', String(currentPage));
                return params;
            };

            const updateExcelLink = () => {
                const params = new URLSearchParams(new FormData(form));
                excel.href = '{{ $excelUrl }}' + '?' + params.toString();
            };

            const renderRows = (rows) => {
                if (!rows.length) {
                    body.innerHTML = `<tr><td colspan="${columns.length}" class="text-center text-muted">Sin resultados.</td></tr>`;
                    return;
                }

                body.innerHTML = rows.map((row) => {
                    const cells = columns.map((column) => `<td>${row[column.key] ?? ''}</td>`).join('');
                    return `<tr>${cells}</tr>`;
                }).join('');
            };

            const load = async () => {
                loading.classList.remove('d-none');
                updateExcelLink();

                try {
                    const response = await fetch(recordsUrl + '?' + serialize().toString(), {
                        credentials: 'same-origin',
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const payload = await response.json();
                    renderRows(payload.data || []);
                    currentPage = payload.meta?.current_page || 1;
                    lastPage = payload.meta?.last_page || 1;
                    meta.textContent = `${payload.meta?.total || 0} registros`;
                } catch (error) {
                    body.innerHTML = `<tr><td colspan="${columns.length}" class="text-center text-danger">No se pudo cargar el reporte.</td></tr>`;
                    meta.textContent = 'Error';
                } finally {
                    loading.classList.add('d-none');
                }
            };

            form.addEventListener('submit', (event) => {
                event.preventDefault();
                currentPage = 1;
                load();
            });

            reset.addEventListener('click', () => {
                form.reset();
                currentPage = 1;
                load();
            });

            document.querySelectorAll('[data-page-action]').forEach((button) => {
                button.addEventListener('click', () => {
                    const direction = button.getAttribute('data-page-action');
                    if (direction === 'prev' && currentPage > 1) {
                        currentPage--;
                        load();
                    }
                    if (direction === 'next' && currentPage < lastPage) {
                        currentPage++;
                        load();
                    }
                });
            });

            load();
        })();
    </script>
@endpush