@extends('layouts.app')

@section('css')
    @vite(['node_modules/nestable2/dist/jquery.nestable.min.css'])
@endsection

@section('content')

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">Info</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item">info</li>
                        <li class="breadcrumb-item active">info</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- Mensaje de success -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <!-- Mensaje de success -->

    <!-- Mensaje de error -->
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <!-- Mensaje de error -->


    

    {{--@dd($tituloDestacados)--}}


   

    <!-- start row content -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row row d-flex justify-content-end align-items-center mb-2">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            {{--<h4 class="header-title mb-0">
                                 {{ __('Ordenar los info ') }} {{ $tituloDestacados }}</h4>--}}
                            <h4 class="header-title mb-0">{{ $tituloDestacados }}</h4>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                           

                            <select id="info_section_dest" name="info_section_dest" class="form-select">
                                <option value="" selected disabled>{{ __('Filtrar por sección') }}</option>
                                <option value="10" {{ request('info_section_dest') == 10 ? 'selected' : '' }}>Destacados Home</option>
                                <option value="52" {{ request('info_section_dest') == 52 ? 'selected' : '' }}>Destacados Nuevos Profesionales</option>
                                <option value="53" {{ request('info_section_dest') == 53 ? 'selected' : '' }}>Destacados Tus Aportes</option>
                                <option value="54" {{ request('info_section_dest') == 54 ? 'selected' : '' }}>Destacados Tu Jubilación</option>
                                <option value="45" {{ request('info_section_dest') == 45 ? 'selected' : '' }}>Destacados Salud</option>
                                <option value="60" {{ request('info_section_dest') == 60 ? 'selected' : '' }}>Gestión Institucional</option>
                                <option value="70" {{ request('info_section_dest') == 70 ? 'selected' : '' }}>Me siento bien</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mt-1">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">

                                    {{ csrf_field() }}

                                    @if ($informations->isEmpty())
                                        <div style="text-align: center; font-size: 16px; color: #888; padding: 20px;">
                                            No hay datos para mostrar.
                                        </div>
                                    @else
                                        <div class="dd" id="nestable_list" style="max-width: 100%;">
                                            <ol class="dd-list" id="nestable_list_ol">
                                                @foreach ($informations as $information)
                                                    <li class="dd-item" data-id="{{ $information->id }}"
                                                        data-order="{{ $information->order }}" style="font-size: 16px;">
                                                        <div class="dd-handle"
                                                            style="display:flex;justify-content: space-between;align-items: center;height: 45px;">
                                                            <span style="font-weight: 500;">{{ $information->title }}</span>
                                                            <span class="badge bg-primary rounded-pill">{{ $information->order }}</span>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ol>
                                        </div>
                                    @endif
                                </div> <!-- end card body-->
                            </div> <!-- end card -->
                        </div><!-- end col-->
                    </div>

                    <!-- end row-->
                </div>
            </div> <!-- end card -->
        </div><!-- end col -->
    </div>
    <!-- end row -->

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
@endsection

@section('script')
    <script>
        let sectionId = @json(request('info_section_dest'));
        const infoSectionDest = sectionId ? sectionId : 10;

        const updateOrderUrl = `{{ route('informations.updateOrder') }}?info_section_dest=${infoSectionDest}`;

        document.getElementById('info_section_dest').addEventListener('change', function() {
            const selectedValue = this.value;
            window.location.href = `{{ route('informations.sortlist') }}?info_section_dest=${selectedValue}`;
        });
    </script>

    @vite(['resources/js/pages/nestable.init.js'])
@endsection