@extends('adminlte::page')

@section('title', 'Platos' . ' | ' . config('app.name'))

@section('content_header')
    <div class="w-100">

        @php
            $breadcrumbs = [
                ['name' => 'Inicio', 'route' => 'dashboard', 'icon' => 'fa-home'],
                ['name' => 'Platos', 'route' => 'platos.index'],
                ['name' => 'Lista de Platos'],
            ];
        @endphp

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-light p-2 rounded shadow-sm">
                @foreach ($breadcrumbs as $breadcrumb)
                    @if (isset($breadcrumb['route']))
                        <li class="breadcrumb-item">
                            <a href="{{ route($breadcrumb['route']) }}">
                                @if (isset($breadcrumb['icon']))
                                    <i class="fas {{ $breadcrumb['icon'] }} mr-1"></i>
                                @endif
                                {{ $breadcrumb['name'] }}
                            </a>
                        </li>
                    @else
                        <li class="breadcrumb-item active" aria-current="page">{{ $breadcrumb['name'] }}</li>
                    @endif
                @endforeach
            </ol>
        </nav>

    </div>
@stop

@section('content')
    <div class="m-0">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <!-- Título -->
                            <div class="col-12 col-md-6 mb-2 mb-md-0">
                                <h5 class="mb-0">Gestión de Platos</h5>
                            </div>

                            <!-- Select + Botón -->
                            <div class="col-12 col-md-6">
                                <div class="row">
                                    <div class="col-12 col-md-8 mb-2 mb-md-0">
                                        <select id="filtroCarta" class="form-control form-control-sm">
                                            <option value="">Todas las cartas</option>
                                            @foreach ($cartas as $carta)
                                                <option value="{{ $carta->id }}">
                                                    {{ $carta->translate(app()->getLocale())->nombre ?? $carta->id }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-4 text-md-right">
                                        <button type="button" class="btn btn-success btn-sm w-100 w-md-auto"
                                            id="btnNuevoPlato">
                                            <i class="fas fa-plus"></i> Nuevo Plato
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>
                    <div class="card-body p-2">


                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">

                                        <div class="card-body">
                                            <div class="row mb-3">


                                            </div>

                                            <!-- Cards agrupadas por carta -->
                                            <div id="platos-container">
                                                @foreach ($cartas as $carta)
                                                    <div class="carta-group mb-4" data-carta-id="{{ $carta->id }}">
                                                        <h3 class="border-bottom pb-2 mb-3">
                                                            <i class="fas fa-folder me-2"></i>
                                                            {{ $carta->translate(app()->getLocale())->nombre ?? 'Carta ' . $carta->id }}
                                                        </h3>
                                                        <div class="row platos-row" id="platos-carta-{{ $carta->id }}">
                                                            <!-- Los platos se cargarán via AJAX -->
                                                            <div class="col-12 text-center">
                                                                <div class="spinner-border text-primary" role="status">
                                                                    <span class="sr-only">Cargando...</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal para agregar/editar -->
                        @include('platos.modal')

                        <!-- Modal para ver detalles -->
                        @include('platos.modal-ver')
                    </div>
                </div>
            </div>
        </div>
    </div>


@stop

@section('css')
    <style>
        .carta-group {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #007bff;
        }

        .plato-card {
            transition: transform 0.2s;
            height: 100%;
        }

        .plato-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .plato-imagen {
            height: 200px;
            object-fit: cover;
        }

        .badge-alergeno {
            font-size: 0.7em;
            margin: 2px;
        }
    </style>
@stop

@push('js')
    <script>
        $('#carta_id').on('change', function() {
            let cartaId = $(this).val();

            if (cartaId) {
                $.get('/admin/cartas/' + cartaId + '/subcartas', function(data) {
                    let $subCarta = $('#sub_carta_id');
                    $subCarta.empty().append('<option value="">-- Seleccione SubCarta --</option>');

                    $.each(data, function(i, subcarta) {
                        $subCarta.append('<option value="' + subcarta.id + '">' + subcarta.nombre +
                            '</option>');
                    });
                });
            } else {
                $('#sub_carta_id').empty().append('<option value="">-- Seleccione SubCarta --</option>');
            }
        });
    </script>
    <script>
        $(document).on('click', '#btnNuevoPlato', function() {
            // Limpiar formulario
            $('#platoForm')[0].reset();
            // Abrir modal
            $('#platoModal').modal('show');
            $('.modal-title').text('Nuevo Plato'); // 👈 agrega texto al título del modal
        });
        // Configurar CSRF token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            // Cargar platos iniciales
            loadPlatosByCarta();

            // Filtro por carta
            $('#filtroCarta').on('change', function() {
                const cartaId = $(this).val();

                if (cartaId) {
                    $('.carta-group').hide();
                    $(`.carta-group[data-carta-id="${cartaId}"]`).show();
                } else {
                    $('.carta-group').show();
                }
            });

            // Cargar platos por carta
            function loadPlatosByCarta() {
                @foreach ($cartas as $carta)
                    $.ajax({
                        url: "{{ route('platos.byCarta', ':id') }}".replace(':id', '{{ $carta->id }}'),
                        type: 'GET',
                        success: function(response) {
                            if (response.success) {
                                renderPlatos(response.carta, response.platos);
                            }
                        },
                        error: function(xhr) {
                            console.error('Error loading platos:', xhr);
                            $('#platos-carta-{{ $carta->id }}').html(`
                    <div class="col-12">
                        <div class="alert alert-danger">
                            Error al cargar los platos
                        </div>
                    </div>
                `);
                        }
                    });
                @endforeach
            }

            // Renderizar platos en cards
            function renderPlatos(carta, platos) {
                const container = $('#platos-carta-' + carta.id);

                if (platos.length === 0) {
                    container.html(`
                    <div class="col-12">
                        <div class="alert alert-info">
                            No hay platos en esta carta
                        </div>
                    </div>
                `);
                    return;
                }

                let html = '';

                platos.forEach(plato => {
                    html += `
                    <div class="col-md-4 mb-4">
                        <div class="card plato-card">
                            <img src="/${plato.imagen || 'images/no_image.jpg'}" 
                                class="card-img-top plato-imagen" 
                                alt="${plato.nombre}">
                            <div class="card-body">
                                <h5 class="card-title">${plato.nombre}</h5>
                                <p class="card-text text-muted">${plato.descripcion || 'Sin descripción'}</p>
                                
                                <div class="mb-2">
                                    <strong>Precio: €${parseFloat(plato.precio).toFixed(2)}</strong>
                                </div>
                                
                                ${plato.alergenos && plato.alergenos.length > 0 ? `
                                                                            <div class="mb-2">
                                                                                <small class="text-muted">Alérgenos:</small>
                                                                                <div>
                                                                                    ${plato.alergenos.map(alergeno => 
                                                                                        `<span class="badge badge-warning badge-alergeno">${alergeno.nombre}</span>`
                                                                                    ).join(' ')}
                                                                                </div>
                                                                            </div>
                                                                            ` : ''}
                                
                                <div class="btn-group btn-group-sm">
                                    
                                    <button class="btn btn-warning btn-editar" data-id="${plato.id}">
                                        <i class="fas fa-edit"></i> Editar
                                    </button>
                                    <button class="btn btn-danger btn-eliminar" data-id="${plato.id}">
                                        <i class="fas fa-trash"></i> Eliminar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                });

                container.html(html);
            }

            $('#platoForm').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                $.ajax({
                    url: '{{ route('platos.store') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if (res.success) {
                            $('#platoModal').modal('hide');
                            Toast.fire({
                                icon: 'success',
                                title: res.message
                            });
                            // 👇 refrescar platos dinámicamente
                            loadPlatosByCarta();
                        } else {
                            Toast.fire({
                                icon: 'error',
                                title: res.message
                            });
                        }
                    },
                    error: function(xhr) {
                        Toast.fire({
                            icon: 'error',
                            title: xhr.responseJSON?.message || 'Error al guardar'
                        });
                    }
                });
            });
            // Resto del código para el modal y acciones (similar al de alergenos)
            // ... [Aquí iría el código JavaScript para manejar el modal, similar al ejemplo anterior de alergenos]

            // Eliminar
            $(document).on('click', '.btn-eliminar', function() {
                let id = $(this).data('id');

                Swal.fire({
                    title: '¿Está seguro?',
                    text: "Este plato será eliminado permanentemente",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/admin/platos/' + id,
                            method: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(res) {
                                Toast.fire({
                                    icon: 'success',
                                    title: res.message
                                });
                                // 👇 Recargamos las bebidas
                                loadPlatosByCarta();
                            },
                            error: function() {
                                Toast.fire({
                                    icon: 'error',
                                    title: 'Error al eliminar'
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>

    <script>
        
        $(document).on('click', '.btn-ver', function() {
            let id = $(this).data('id');

            $.get(`/admin/platos/${id}`, function(data) {
                $('#detalle-carta').text(data.carta ?? '-');
                $('#detalle-subcarta').text(data.subcarta ?? '-');
                $('#detalle-precio').text(data.precio + ' €');
                $('#detalle-orden').text(data.orden);
                $('#detalle-activo').text(data.activo ? 'Activo' : 'Inactivo');
                $('#detalle-alergenos').text(data.alergenos.join(', ') || '-');
                $('#detalle-nombre').text(data.nombre ?? '-');
                $('#detalle-descripcion').text(data.descripcion ?? '-');

                if (data.imagen) {
                    $('#detalle-imagen').html(
                        `<img src="${data.imagen_url}" class="img-thumbnail" width="200">`
                    );
                } else {
                    $('#detalle-imagen').html('');
                }

                $('#verPlatoModal').modal('show');
            });
        });

        // Nuevo plato
        $('#btnNuevo').on('click', function() {
            $('#platoForm')[0].reset();
            $('#plato_id').val('');
            $('#imagen-preview').html('');
            $('#eliminar-imagen-container').hide();
            $('.modal-title').text('Nuevo Plato'); // 👈 agrega texto al título del modal
        });
        // Editar
        $(document).on('click', '.btn-editar', function() {
            $('.modal-title').text('Editar Plato'); // 👈 agrega texto al título del modal
            let id = $(this).data('id');
            $.get('/admin/platos/' + id + '/edit', function(res) {
                $('#plato_id').val(res.id);
                $('#carta_id').val(res.carta_id);
                $('#sub_carta_id').val(res.sub_carta_id);
                $('#precio').val(res.precio);
                $('#orden').val(res.orden);
                $('#activo').prop('checked', res.activo);

                if (res.imagen) {
                    $('#imagen-preview').html('<img src="' + res.imagen +
                        '" class="img-thumbnail" width="150">');
                    $('#eliminar-imagen-container').show();
                } else {
                    $('#imagen-preview').html('');
                    $('#eliminar-imagen-container').hide();
                }
                /* if (res.imagen) {
                    $('#imagen-preview').html('<img src="/' + res.imagen +
                        '" class="img-thumbnail" width="150">');
                    $('#eliminar-imagen-container').show();
                } */

                $.each(res.translations, function(locale, t) {
                    $('#nombre_' + locale).val(t.nombre);
                    $('#descripcion_' + locale).val(t.descripcion);
                });

                $('input[name="alergenos[]"]').prop('checked', false);
                $.each(res.alergenos, function(_, a) {
                    $('#alergeno_' + a.id).prop('checked', true);
                });

                $('#platoModal').modal('show');
            });
        });

        // Guardar
    </script>
@endpush