@extends('layouts.simple.master')

@push('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/chartist.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/prism.css') }}">
<style>
.filter-collapse {
    transition: all 0.3s ease;
}
.btn-link .bi-caret-down-fill {
    transition: transform 0.3s ease;
}
.btn-link.collapsed .bi-caret-down-fill {
    transform: rotate(-90deg);
}
.bi-funnel {
    font-size: 1.2rem;
    color: #6c757d;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
$(document).ready(function() {
    $('.filter-collapse').on('show.bs.collapse', function () {
        console.log('Showing filters');
    });
    
    $('.filter-collapse').on('shown.bs.collapse', function () {
        console.log('Filters shown');
    });
});
</script>
@endpush

@section('main_content')
    @include('operations.comercial.ofertas.navigation_explotacion')

    <div class="container-fluid">
        <div class="accordion mb-4" id="accordionFiltros">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFiltros">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                            data-bs-target="#collapseFiltros" aria-expanded="false" aria-controls="collapseFiltros">
                        <i class="bi bi-funnel"></i>
                    </button>
                </h2>
                <div id="collapseFiltros" class="accordion-collapse collapse" aria-labelledby="headingFiltros" 
                     data-bs-parent="#accordionFiltros">
                    <div class="accordion-body">
                        <form method="GET" action="{{ route('operations.explotacion.competidores.general') }}">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="fecha_desde">Fecha Desde:</label>
                                        <input type="date" id="fecha_desde" name="fecha_desde" class="form-control" 
                                               value="{{ request('fecha_desde') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="fecha_hasta">Fecha Hasta:</label>
                                        <input type="date" id="fecha_hasta" name="fecha_hasta" class="form-control" 
                                               value="{{ request('fecha_hasta') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="estado">Estado:</label>
                                        <select id="estado" name="estado" class="form-control">
                                            <option value="">Todos</option>
                                            @foreach($filterOptions['estados'] as $estado)
                                                <option value="{{ $estado }}" {{ request('estado') == $estado ? 'selected' : '' }}>
                                                    {{ $estado }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="linea_negocio">Línea de Negocio:</label>
                                        <select id="linea_negocio" name="linea_negocio" class="form-control">
                                            <option value="">Todas</option>
                                            @foreach($filterOptions['lineas_negocio'] as $linea)
                                                <option value="{{ $linea }}" {{ request('linea_negocio') == $linea ? 'selected' : '' }}>
                                                    {{ $linea }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="actividad_cliente">Actividad Cliente:</label>
                                        <select id="actividad_cliente" name="actividad_cliente" class="form-control">
                                            <option value="">Todas</option>
                                            @foreach($filterOptions['actividades_cliente'] as $actividad)
                                                <option value="{{ $actividad }}" {{ request('actividad_cliente') == $actividad ? 'selected' : '' }}>
                                                    {{ $actividad }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="renovable">Renovable:</label>
                                        <select id="renovable" name="renovable" class="form-control">
                                            <option value="">Todos</option>
                                            @foreach($filterOptions['renovables'] as $renovable)
                                                <option value="{{ $renovable }}" {{ request('renovable') == $renovable ? 'selected' : '' }}>
                                                    {{ $renovable }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="fidelizacion">Fidelización:</label>
                                        <select id="fidelizacion" name="fidelizacion" class="form-control">
                                            <option value="">Todos</option>
                                            @foreach($filterOptions['fidelizacion'] as $fidelizacion)
                                                <option value="{{ $fidelizacion }}" {{ request('fidelizacion') == $fidelizacion ? 'selected' : '' }}>
                                                    {{ $fidelizacion }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <button type="submit" class="btn btn-primary w-100">Filtrar</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Widgets Row -->
        <div class="row">
            @include('operations.widgets.average-competitors-chart')
            @include('operations.widgets.average-discount-chart')
        </div>
        <div class="row mt-4">
            @include('operations.widgets.spain-competitors-map')
            @include('operations.widgets.spain-discounts-map')
        </div>
        <div class="row mt-4">
        @include('operations.widgets.competitors-discount-evolution')
        @include('operations.widgets.competitors-discount-ln')
        </div>
        <div class="row">
        @include('operations.widgets.top-competitors')
        @include('operations.widgets.top-winners')
        @include('operations.widgets.top-excluded')
        @include('operations.widgets.top-cheapest')

        <!-- Add other ranking widgets here -->
    </div>
    </div>
@endsection