{{--
    TEMPLATE MASTER PARA INDICES CON CARDS INTERACTIVAS
    Migrado a Velzon Corporate (Bootstrap 5.3.6)

    VARIABLES REQUERIDAS:
    - $pageTitle: Titulo de la pagina
    - $items: Collection de elementos
    - $stats: Array con estadisticas [key => valor]
    - $filters: Array con filtros disponibles
    - $searchPlaceholder: Texto del placeholder de busqueda
    - $createRoute: Ruta para crear nuevo elemento
    - $indexRoute: Ruta del indice

    SLOTS REQUERIDOS:
    - @yield('table-headers'): Encabezados de la tabla
    - @yield('table-body'): Contenido de la tabla
    - @yield('filters'): Filtros especificos del modulo
    - @yield('action-buttons'): Botones de accion especificos
--}}

@extends('admin.layouts.app')

@section('content')

<!-- Page Title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ $pageTitle }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Tablero</a></li>
                    <li class="breadcrumb-item active">{{ $pageTitle }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
@if(isset($stats) && count($stats) > 0)
@php $statColXl = max(2, floor(12 / count($stats))); @endphp
<div class="row">
    @foreach($stats as $key => $stat)
    <div class="col-xl-{{ $statColXl }} col-lg-3 col-md-4 col-sm-6">
        <div class="card card-animate" onclick="filterBy('{{ $key }}')" style="cursor:pointer" title="Click para filtrar por {{ $stat['label'] }}">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ $stat['label'] }}</p>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-20 fw-semibold ff-secondary mb-4">{{ number_format($stat['count']) }}</h4>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-{{ $stat['color'] ?? 'primary' }}-subtle rounded fs-3">
                            <i class="ri-{{ $stat['icon'] ?? 'bar-chart-box' }}-line text-{{ $stat['color'] ?? 'primary' }}"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endif

<!-- Main Card -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">
                        Gestion de {{ $module ?? 'Elementos' }}
                    </h5>
                    <div class="flex-shrink-0">
                        <div class="d-flex flex-wrap gap-2">
                            @yield('action-buttons')
                            @yield('header-buttons')

                            @if(isset($createRoute))
                            <a href="{{ $createRoute }}" class="btn btn-primary">
                                <i class="ri-add-line align-bottom me-1"></i> Nuevo
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <!-- Filters & Search -->
                <form action="" method="get">
                    <div class="row g-3">
                        <div class="col-lg-8">
                            <div class="row g-3">
                                @yield('filters')

                                <!-- Per page -->
                                <div class="col-md-2">
                                    <label class="form-label small">Mostrar</label>
                                    @php $currentPerPage = request('per_page', 25); @endphp
                                    <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
                                        <option value="10" {{ $currentPerPage == 10 ? 'selected' : '' }}>10</option>
                                        <option value="25" {{ $currentPerPage == 25 ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ $currentPerPage == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ $currentPerPage == 100 ? 'selected' : '' }}>100</option>
                                    </select>
                                </div>

                                <!-- Clear filters -->
                                <div class="col-md-2 d-flex align-items-end">
                                    <a href="{{ $indexRoute ?? route(Route::currentRouteName()) }}" class="btn btn-secondary btn-sm">
                                        <i class="ri-delete-back-2-line align-bottom me-1"></i> Limpiar
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Search -->
                        <div class="col-lg-4">
                            <label class="form-label small">Buscar</label>
                            <div class="input-group">
                                <input type="text"
                                       name="keyword"
                                       id="searchInput"
                                       value="{{ request('keyword') }}"
                                       class="form-control"
                                       placeholder="{{ $searchPlaceholder ?? 'Buscar...' }}"
                                       autocomplete="off">
                                <button class="btn btn-primary" type="submit">
                                    <i class="ri-search-line"></i> Buscar
                                </button>
                                @if(request('keyword'))
                                    <a href="{{ $indexRoute ?? url()->current() }}" class="btn btn-outline-secondary" title="Limpiar busqueda">
                                        <i class="ri-close-line"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <!-- Table -->
                <div class="table-responsive table-card">
                    <table class="table table-hover table-striped align-middle table-nowrap">
                        <thead class="table-light">
                            @yield('table-headers')
                        </thead>
                        <tbody>
                            @php
                                $collection = $items ?? $discountCoupons ?? $products ?? $categories ?? $brands ?? $quotes ?? $orders ?? collect();
                                $hasItems = method_exists($collection, 'total') ? $collection->total() > 0 : $collection->count() > 0;
                            @endphp
                            @if($hasItems)
                                @yield('table-body')
                                @yield('table_content')
                            @else
                                <tr>
                                    <td colspan="20">
                                        <div class="noresult">
                                            <div class="text-center">
                                                <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
                                                <h5 class="mt-2">{{ $emptyTitle ?? 'No hay elementos' }}</h5>
                                                <p class="text-muted mb-0">{{ $emptyMessage ?? 'No se encontraron registros con los filtros aplicados' }}</p>

                                                @if(request()->anyFilled(['keyword', 'status', 'category', 'subcategory', 'variety', 'subvariety', 'brand', 'featured', 'web_vta']) || request()->except(['page']))
                                                    <a href="{{ $indexRoute ?? route(Route::currentRouteName()) }}" class="btn btn-primary mt-3">
                                                        <i class="ri-delete-back-2-line align-bottom me-1"></i>Limpiar Filtros
                                                    </a>
                                                @elseif(isset($createRoute))
                                                    <a href="{{ $createRoute }}" class="btn btn-primary mt-3">
                                                        <i class="ri-add-line align-bottom me-1"></i>Agregar Primer Elemento
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($collection->hasPages())
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        Mostrando {{ $collection->firstItem() }} a {{ $collection->lastItem() }}
                        de {{ $collection->total() }} registros
                    </div>
                    <div>{{ $collection->links() }}</div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function filterBy(type) {
    const url = new URL(window.location);
    url.searchParams.set('filter', type);
    url.searchParams.delete('page');
    window.location.href = url.toString();
}

document.addEventListener('DOMContentLoaded', function() {
    const filterSelects = document.querySelectorAll('.card-body select:not([name="per_page"])');
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            this.form.submit();
        });
    });

    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        const searchValue = searchInput.value;
        if (searchValue) {
            setTimeout(() => {
                searchInput.focus();
                searchInput.setSelectionRange(searchValue.length, searchValue.length);
            }, 50);
        }
    }
});
</script>
@endpush