@extends('donamarmita-admin')
@section('title', 'Editar Ementa - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Cabeçalho da Página -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fa fa-calendar-edit"></i> Editar Ementa</h1>
            <p class="text-muted">Atualize os dados da ementa semanal</p>
        </div>
        <div class="title_right">
            <div class="pull-right">
                <a href="{{ route('admin.menu.weekly.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fa fa-arrow-left"></i> Voltar à Lista
                </a>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.menu.weekly.index') }}">Ementa Semanal</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Editar: {{ $menu->mnu_title_pt }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong><i class="fa fa-check-circle"></i> Sucesso!</strong> {{ session('success') }}
            </div>
        </div>
    </div>
    @endif

    @if($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong><i class="fa fa-exclamation-circle"></i> Erro!</strong>
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    <!-- Main Form Card -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-edit"></i> Formulário de Edição</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form id="edit-menu-form" method="POST" action="{{ route('admin.menu.weekly.update', $menu->mnu_id) }}" class="form-horizontal form-label-left">
                        @csrf
                        @method('PUT')
                        
                        <!-- Informação de identificação -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>ID da Ementa:</strong> {{ $menu->mnu_id }}</p>
                                            <p class="mb-1"><strong>Criada em:</strong> {{ $menu->created_at ? $menu->created_at->format('d/m/Y H:i') : 'N/A' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Atualizada em:</strong> {{ $menu->updated_at ? $menu->updated_at->format('d/m/Y H:i') : 'N/A' }}</p>
                                            <p class="mb-1"><strong>Slug:</strong> <code>{{ $menu->mnu_slug }}</code></p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Pratos associados:</strong> {{ $menu->dishes->count() }}</p>
                                            <p class="mb-0">
                                                <a href="{{ route('admin.menu.weekly.dishes', $menu->mnu_id) }}" class="btn btn-xs btn-primary">
                                                    <i class="fa fa-utensils"></i> Gerir Pratos
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Seção: Identificação e Datas -->
                        <div class="section-title">
                            <h4><i class="fa fa-info-circle"></i> Identificação e Datas</h4>
                            <p class="text-muted">Informações básicas e período da ementa</p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Campo: Data de Início -->
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mnu_start">
                                        Data de Início * <span class="required">*</span>
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <div class="input-group date">
                                            <input type="text" 
                                                   id="mnu_start" 
                                                   name="mnu_start" 
                                                   required="required" 
                                                   class="form-control @error('mnu_start_date') is-invalid @enderror"
                                                   placeholder="DD/MM/AAAA"
                                                   value="{{ old('mnu_start', $menu->mnu_start_date ? \Carbon\Carbon::parse($menu->mnu_start_date)->format('d/m/Y') : '') }}"
                                                   autocomplete="off">
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </span>
                                        </div>
                                        @error('mnu_start')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">
                                            Data em que a ementa entra em vigor (normalmente uma quarta-feira)
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <!-- Campo: Slug (editável agora) -->
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mnu_slug">
                                        Slug * <span class="required">*</span>
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" 
                                               id="mnu_slug" 
                                               name="mnu_slug" 
                                               required="required" 
                                               class="form-control @error('mnu_slug') is-invalid @enderror"
                                               placeholder="Ex: semana-25-2024"
                                               value="{{ old('mnu_slug', $menu->mnu_slug) }}">
                                        @error('mnu_slug')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">
                                            Identificador único para URLs. Pode ser editado manualmente.
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Informações da ementa -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-warning">
                                    <h5><i class="fa fa-calendar-check"></i> Informações da Ementa</h5>
                                    <div class="row">
                                        @php
                                            $startDate = $menu->mnu_start_date ? \Carbon\Carbon::parse($menu->mnu_start_date) : null;
                                            $endDate = $startDate ? $startDate->copy()->addDays(6) : null;
                                            $weekNumber = $startDate ? $startDate->week() : null;
                                        @endphp
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Semana do ano:</strong> {{ $weekNumber ?? 'N/A' }}</p>
                                            <p class="mb-1"><strong>Data de início:</strong> {{ $startDate ? $startDate->format('d/m/Y') : 'N/A' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Data de término:</strong> {{ $endDate ? $endDate->format('d/m/Y') : 'N/A' }}</p>
                                            <p class="mb-1"><strong>Período:</strong> 
                                                @if($startDate && $endDate)
                                                    {{ $startDate->format('d/m') }} a {{ $endDate->format('d/m/Y') }}
                                                @else
                                                    N/A
                                                @endif
                                            </p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Estado atual:</strong> 
                                                @if($menu->mnu_visible)
                                                    <span class="badge badge-success"><i class="fa fa-eye"></i> Visível</span>
                                                @else
                                                    <span class="badge badge-danger"><i class="fa fa-eye-slash"></i> Oculto</span>
                                                @endif
                                            </p>
                                            <p class="mb-0"><strong>Duração:</strong> 7 dias</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Seção: Visibilidade -->
                        <div class="section-title">
                            <h4><i class="fa fa-eye"></i> Visibilidade</h4>
                            <p class="text-muted">Configurar a visibilidade da ementa</p>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12">
                                        Estado da Ementa
                                    </label>
                                    <div class="col-md-10 col-sm-10 col-xs-12">
                                        <div class="checkbox" style="margin-top: 8px;">
                                            @php
                                                $isChecked = old('mnu_visible', $menu->mnu_visible) ? true : false;
                                            @endphp
                                            <label style="font-size: 14px;">
                                                <input type="checkbox" 
                                                       class="js-switch" 
                                                       name="mnu_visible" 
                                                       value="1" 
                                                       {{ $isChecked ? 'checked' : '' }}> 
                                                <span style="margin-left: 8px;">Ementa visível no site/app</span>
                                            </label>
                                        </div>
                                        <small class="form-text text-muted">
                                            Se desativado, a ementa não será exibida aos utilizadores
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Seção: Títulos Multilingue -->
                        <div class="section-title">
                            <h4><i class="fa fa-language"></i> Títulos Multilingue</h4>
                            <p class="text-muted">Títulos da ementa em diferentes idiomas</p>
                        </div>

                        <!-- Português (PT) -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12" for="mnu_title_pt">
                                        Português (PT) * <span class="required">*</span>
                                    </label>
                                    <div class="col-md-10 col-sm-10 col-xs-12">
                                        <input type="text" 
                                               id="mnu_title_pt" 
                                               name="mnu_title_pt" 
                                               required="required" 
                                               class="form-control @error('mnu_title_pt') is-invalid @enderror"
                                               placeholder="Ex: Ementa Semana 25 - 17 a 23 Junho 2024"
                                               value="{{ old('mnu_title_pt', $menu->mnu_title_pt) }}"
                                               style="height: 38px;">
                                        @error('mnu_title_pt')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">
                                            Título principal em português (obrigatório)
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Inglês (EN) -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12" for="mnu_title_en">
                                        Inglês (EN)
                                    </label>
                                    <div class="col-md-10 col-sm-10 col-xs-12">
                                        <input type="text" 
                                               id="mnu_title_en" 
                                               name="mnu_title_en" 
                                               class="form-control @error('mnu_title_en') is-invalid @enderror"
                                               placeholder="Ex: Week 25 Menu - June 17 to 23, 2024"
                                               value="{{ old('mnu_title_en', $menu->mnu_title_en) }}"
                                               style="height: 38px;">
                                        @error('mnu_title_en')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">
                                            Título em inglês (opcional)
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Espanhol (ES) -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12" for="mnu_title_es">
                                        Espanhol (ES)
                                    </label>
                                    <div class="col-md-10 col-sm-10 col-xs-12">
                                        <input type="text" 
                                               id="mnu_title_es" 
                                               name="mnu_title_es" 
                                               class="form-control @error('mnu_title_es') is-invalid @enderror"
                                               placeholder="Ex: Menú Semana 25 - 17 al 23 de Junio de 2024"
                                               value="{{ old('mnu_title_es', $menu->mnu_title_es) }}"
                                               style="height: 38px;">
                                        @error('mnu_title_es')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">
                                            Título em espanhol (opcional)
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Francês (FR) -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12" for="mnu_title_fr">
                                        Francês (FR)
                                    </label>
                                    <div class="col-md-10 col-sm-10 col-xs-12">
                                        <input type="text" 
                                               id="mnu_title_fr" 
                                               name="mnu_title_fr" 
                                               class="form-control @error('mnu_title_fr') is-invalid @enderror"
                                               placeholder="Ex: Menu Semaine 25 - 17 au 23 Juin 2024"
                                               value="{{ old('mnu_title_fr', $menu->mnu_title_fr) }}"
                                               style="height: 38px;">
                                        @error('mnu_title_fr')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">
                                            Título em francês (opcional)
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Nota sobre idiomas -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i> 
                                    <strong>Informação:</strong> Apenas o título em Português é obrigatório. 
                                    Os outros idiomas são opcionais, mas recomendados para internacionalização.
                                </div>
                            </div>
                        </div>

                        <!-- Footer do Formulário -->
                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                                <button type="reset" class="btn btn-warning">
                                    <i class="fa fa-undo"></i> Reverter Alterações
                                </button>
                                <a href="{{ route('admin.menu.weekly.index') }}" class="btn btn-secondary">
                                    <i class="fa fa-times"></i> Cancelar
                                </a>
                                <button type="submit" class="btn btn-success">
                                    <i class="fa fa-save"></i> Atualizar Ementa
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
    <style>
        .section-title {
            border-bottom: 2px solid #2A3F54;
            padding-bottom: 10px;
            margin-bottom: 20px;
            margin-top: 30px;
        }

        .section-title h4 {
            color: #2A3F54;
            font-weight: 600;
        }

        .section-title .text-muted {
            font-size: 13px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .alert {
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .input-group.date .input-group-addon {
            cursor: pointer;
            background-color: #2A3F54;
            color: white;
            border-color: #2A3F54;
        }

        .input-group.date .input-group-addon:hover {
            background-color: #1a2c3e;
        }

        /* Estilo para o switch igual ao dishes */
        .js-switch {
            margin-right: 8px;
        }

        /* Melhor espaçamento para os campos de título */
        .form-control[style*="height: 38px"] {
            height: 38px !important;
            padding: 8px 12px;
        }

        .badge {
            padding: 5px 10px;
            font-size: 12px;
        }

        @media (max-width: 768px) {
            .control-label {
                text-align: left !important;
                margin-bottom: 5px;
                padding-left: 15px;
            }

            .col-md-offset-3 {
                margin-left: 0;
            }

            .col-md-10, .col-md-9 {
                width: 100%;
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .alert .row .col-md-4 {
                margin-bottom: 10px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Inicializar datepicker para a data de início
            $('#mnu_start').datetimepicker({ 
                format: 'DD/MM/YYYY',
                locale: 'pt'
            });

            // Auto-gerar slug a partir do título português (se vazio)
            $('#mnu_title_pt').on('input', function() {
                var title = $(this).val();
                var slugField = $('#mnu_slug');
                
                // Apenas gerar se o slug estiver vazio ou for igual ao antigo
                var currentSlug = '{{ $menu->mnu_slug }}';
                if (title && (!slugField.val() || slugField.val() === currentSlug)) {
                    var slug = title
                        .toLowerCase()
                        .normalize('NFD').replace(/[\u0300-\u036f]/g, '') // Remove acentos
                        .replace(/[^\w\s-]/gi, '') // Remove caracteres especiais
                        .replace(/\s+/g, '-')
                        .replace(/--+/g, '-')
                        .replace(/-$/g, '') // Remove hífen final
                        .trim();
                    
                    slugField.val(slug);
                }
            });

            // Quando a data é selecionada, sugerir título se estiver vazio
            $('#mnu_start').on('change', function() {
                var dateValue = $(this).val();
                var titleField = $('#mnu_title_pt');
                
                // Apenas sugerir se o título estiver vazio ou for o padrão
                var currentTitle = '{{ $menu->mnu_title_pt }}';
                if (dateValue && (!titleField.val() || titleField.val() === currentTitle)) {
                    // Converter data para objeto
                    var parts = dateValue.split('/');
                    if (parts.length === 3) {
                        var day = parseInt(parts[0]);
                        var month = parseInt(parts[1]);
                        var year = parseInt(parts[2]);
                        var date = new Date(year, month - 1, day);

                        if (!isNaN(date.getTime())) {
                            // Obter número da semana ISO
                            var weekNumber = getWeekNumber(date);

                            // Calcular data de fim (6 dias depois - terça-feira seguinte)
                            var endDate = new Date(date);
                            endDate.setDate(endDate.getDate() + 6);

                            // Nomes dos meses
                            var monthNames = [
                                'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
                                'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
                            ];

                            var startMonth = monthNames[date.getMonth()];
                            var endMonth = monthNames[endDate.getMonth()];

                            // Formatar título sugerido
                            var suggestedTitle = 'Ementa Semana ' + weekNumber + ' - ' + 
                                                day + ' a ' + endDate.getDate() + ' ' + 
                                                (startMonth === endMonth ? startMonth : startMonth + ' a ' + endMonth) + 
                                                ' ' + year;

                            titleField.val(suggestedTitle);
                            titleField.trigger('input'); // Disparar geração do slug
                        }
                    }
                }
            });

            // Função para obter número da semana ISO
            function getWeekNumber(date) {
                var d = new Date(date);
                d.setHours(0, 0, 0, 0);
                d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
                var week1 = new Date(d.getFullYear(), 0, 4);
                return 1 + Math.round(((d.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
            }

            // Botão para reverter alterações
            $('button[type="reset"]').click(function() {
                if (confirm('Tem a certeza que deseja reverter todas as alterações? Os dados serão repostos aos valores originais.')) {
                    location.reload();
                }
            });

            // Auto-hide alerts
            setTimeout(function() {
                $('.alert').alert('close');
            }, 10000);
        });
    </script>
@endpush