@extends('donamarmita-admin')
@section('title', 'Gerir Pratos da 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-utensils"></i> Gerir Pratos da Ementa</h1>
            <p class="text-muted">Adicione ou remova pratos da ementa: <strong>{{ $menu->mnu_title_pt }}</strong></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>
                <a href="{{ route('admin.menu.weekly.edit', $menu->mnu_id) }}" class="btn btn-info btn-sm">
                    <i class="fa fa-edit"></i> Editar Ementa
                </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">Gerir Pratos: {{ Str::limit($menu->mnu_title_pt, 30) }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Stats & Info Cards -->
    <div class="row tile_count">
        <div class="col-md-5 col-sm-6 col-xs-12 tile_stats_count">
            <span class="count_top"><i class="fa fa-calendar text-primary"></i> Ementa</span>
            <div class="count text-primary" style="font-size: 20px;">{{ $menu->mnu_title_pt }}</div>
            <span class="count_bottom">
                <i class="fa fa-clock"></i> 
                @if($menu->mnu_start_date)
                {{ \Carbon\Carbon::parse($menu->mnu_start_date)->format('d/m/Y') }}
                @else
                Sem data
                @endif
            </span>
        </div>

        <div class="col-md-1 col-sm-3 col-xs-6 tile_stats_count" style="flex: 0 0 14.58%; max-width: 14.58%;">
            <span class="count_top"><i class="fa fa-utensils" style="color: #3498DB;"></i> Total Pratos</span>
            <div class="count" style="color: #3498DB;">{{ $menu->dishes->count() }}</div>
            <span class="count_bottom">na ementa</span>
        </div>

        <div class="col-md-1 col-sm-3 col-xs-6 tile_stats_count" style="flex: 0 0 14.58%; max-width: 14.58%;">
            <span class="count_top"><i class="fa fa-drumstick-bite" style="color: #E74C3C;"></i> Normais</span>
            <div class="count" style="color: #E74C3C;">{{ $normalDishesCount }}</div>
            <span class="count_bottom">{{ $normalPercentage ?? 0 }}%</span>
        </div>

        <div class="col-md-1 col-sm-3 col-xs-6 tile_stats_count" style="flex: 0 0 14.58%; max-width: 14.58%;">
            <span class="count_top"><i class="fa fa-leaf" style="color: #1ABB9C;"></i> Vegetarianos</span>
            <div class="count" style="color: #1ABB9C;">{{ $vegetarianDishesCount }}</div>
            <span class="count_bottom">{{ $vegetarianPercentage ?? 0 }}%</span>
        </div>

        <div class="col-md-1 col-sm-3 col-xs-6 tile_stats_count" style="flex: 0 0 14.58%; max-width: 14.58%;">
            <span class="count_top"><i class="fa fa-eye" style="color: {{ $menu->mnu_visible ? '#1ABB9C' : '#E74C3C' }};"></i> Estado</span>
            <div class="count" style="color: {{ $menu->mnu_visible ? '#1ABB9C' : '#E74C3C' }}; font-size: 18px;">
                {{ $menu->mnu_visible ? 'Visível' : 'Oculto' }}
            </div>
            <span class="count_bottom">
                <a href="{{ route('admin.menu.weekly.edit', $menu->mnu_id) }}" class="small-box-footer">
                    Alterar <i class="fa fa-arrow-circle-right"></i>
                </a>
            </span>
        </div>
    </div>

    <div class="clearfix"></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(session('error'))
    <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> {{ session('error') }}
            </div>
        </div>
    </div>
    @endif

    <!-- Adicionar Pratos -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-plus-circle"></i> Adicionar Pratos à Ementa</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">
                    <!-- Filtros e Pesquisa -->
                    <div class="row" style="margin-bottom: 20px;">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="filterType">Filtrar por Tipo:</label>
                                <select id="filterType" class="form-control">
                                    <option value="all">Todos os Tipos</option>
                                    <option value="normal">Pratos Normais</option>
                                    <option value="vegetarian">Pratos Vegetarianos</option>
                                </select>
                            </div>
                        </div>                        
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="availableDishes">Prato:</label>
                                <select id="availableDishes" class="form-control select2">
                                    <option value="">Selecione um prato...</option>
                                    @foreach($availableDishes as $dish)
                                    <option value="{{ $dish->dsh_id }}" 
                                            data-type="{{ $dish->type->typ_name ?? 'normal' }}"
                                            data-image="{{ $dish->dsh_img ? asset('images/dish/' . $dish->dsh_img) : asset('images/dish/default-dish.png') }}">
                                        {{ $dish->dsh_name_pt }} 
                                        @if($dish->type)
                                        - {{ $dish->type->typ_name }}
                                        @endif
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center">
                            <button type="button" id="addDishToMenu" class="btn btn-primary">
                                <i class="fa fa-plus"></i> Adicionar Prato Selecionado
                            </button>
                            <button type="button" id="addMultipleDishes" class="btn btn-info" data-toggle="modal" data-target="#multipleDishesModal">
                                <i class="fa fa-layer-group"></i> Adicionar Múltiplos Pratos
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de Pratos na Ementa -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-list"></i> Pratos na Ementa ({{ $menu->dishes->count() }})</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <span class="badge badge-primary" style="font-size: 14px; padding: 5px 10px;">
                                <i class="fa fa-sort"></i> Ordem: Drag & Drop
                            </span>
                        </li>
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <!-- Tabs para Normais vs Vegetarianos -->
                    <ul class="nav nav-tabs bar_tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="normal-tab" data-toggle="tab" href="#normal" role="tab">
                                <i class="fa fa-drumstick-bite"></i> Pratos Normais
                                <span class="badge badge-danger">{{ $normalDishesCount }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="vegetarian-tab" data-toggle="tab" href="#vegetarian" role="tab">
                                <i class="fa fa-leaf"></i> Pratos Vegetarianos
                                <span class="badge badge-success">{{ $vegetarianDishesCount }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab">
                                <i class="fa fa-th-list"></i> Todos os Pratos
                                <span class="badge badge-primary">{{ $menu->dishes->count() }}</span>
                            </a>
                        </li>
                    </ul>
                    
                    <input type="hidden" id="menuId" value="{{ $menu->mnu_id }}">
                        
                    <div class="tab-content">
                        <!-- Tab: Pratos Normais -->
                        <div class="tab-pane fade show active" id="normal" role="tabpanel">
                            @if($normalDishes->isEmpty())
                            <div class="text-center py-5">
                                <i class="fa fa-drumstick-bite fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">Nenhum prato normal na ementa</h4>
                                <p class="text-muted">Adicione pratos normais usando o seletor acima</p>
                            </div>
                            @else
                            <div class="table-responsive">
                                <table class="table table-hover" id="normalDishesTable">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th style="width: 60px;">#</th>
                                            <th style="width: 80px;">Imagem</th>
                                            <th>Prato</th>
                                            <th style="width: 120px;">Tipo</th>
                                            <th style="width: 100px;">Ordem</th>
                                            <th style="width: 120px;" class="text-center">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="normalDishesList" class="sortable-list" data-type="normal">
                                        @foreach($normalDishes as $index => $dish)
                                        <tr data-id="{{ $dish->dsh_id }}" data-pivot-id="{{ $dish->pivot->mnd_id }}">
                                            <td class="text-center" style="vertical-align: middle;">
                                                <span class="handle" style="cursor: move;">
                                                    <i class="fa fa-arrows-alt"></i>
                                                </span>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                @php
                                                    $img = $dish->dsh_img;
                                                    $path = "dish/$img";
                                                @endphp

                                                <img src="{{ ($img && Storage::disk('public_images')->exists($path))
                                                            ? asset('images/dish/' . $img)
                                                            : asset('images/dish/default-dish.png') }}"
                                                     alt="{{ $dish->dsh_name_pt }}"
                                                     class="img-thumbnail" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <h5 style="margin: 0; color: #2A3F54;">{{ $dish->dsh_name_pt }}</h5>
                                                @if($dish->dsh_name_en)
                                                <small class="text-muted">{{ $dish->dsh_name_en }}</small>
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <span class="badge badge-danger">
                                                    <i class="fa fa-drumstick-bite"></i> Normal
                                                </span>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <div class="input-group input-group-sm" style="width: 120px;">
                                                    <div class="input-group-prepend" style="margin-right: -5px;">
                                                        <button class="btn btn-outline-secondary btn-sort-up" type="button" 
                                                                data-id="{{ $dish->dsh_id }}" title="Mover para cima">
                                                            <i class="fa fa-arrow-up"></i>
                                                        </button>
                                                    </div>
                                                    <input type="number" 
                                                           class="form-control form-control-sm order-input" 
                                                           value="{{ $dish->pivot->mnd_sort ?? ($index + 1) }}"
                                                           min="1"
                                                           style="text-align: center;">
                                                    <div class="input-group-append">
                                                        <button class="btn btn-outline-secondary btn-sort-down" type="button"
                                                                data-id="{{ $dish->dsh_id }}" title="Mover para baixo">
                                                            <i class="fa fa-arrow-down"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center" style="vertical-align: middle;">
                                                <button class="btn btn-danger btn-sm btn-remove-dish" 
                                                        data-id="{{ $dish->dsh_id }}"
                                                        data-name="{{ $dish->dsh_name_pt }}">
                                                    <i class="fa fa-trash"></i> Remover
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @endif
                        </div>

                        <!-- Tab: Pratos Vegetarianos -->
                        <div class="tab-pane fade" id="vegetarian" role="tabpanel">
                            @if($vegetarianDishes->isEmpty())
                            <div class="text-center py-5">
                                <i class="fa fa-leaf fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">Nenhum prato vegetariano na ementa</h4>
                                <p class="text-muted">Adicione pratos vegetarianos usando o seletor acima</p>
                            </div>
                            @else
                            <div class="table-responsive">
                                <table class="table table-hover" id="vegetarianDishesTable">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th style="width: 60px;">#</th>
                                            <th style="width: 80px;">Imagem</th>
                                            <th>Prato</th>
                                            <th style="width: 120px;">Tipo</th>
                                            <th style="width: 100px;">Ordem</th>
                                            <th style="width: 120px;" class="text-center">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="vegetarianDishesList" class="sortable-list" data-type="vegetarian">
                                        @foreach($vegetarianDishes as $index => $dish)
                                        <tr data-id="{{ $dish->dsh_id }}" data-pivot-id="{{ $dish->pivot->mnd_id }}">
                                            <td class="text-center" style="vertical-align: middle;">
                                                <span class="handle" style="cursor: move;">
                                                    <i class="fa fa-arrows-alt"></i>
                                                </span>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                @php
                                                    $img = $dish->dsh_img;
                                                    $path = "dish/$img";
                                                @endphp

                                                <img src="{{ ($img && Storage::disk('public_images')->exists($path))
                                                            ? asset('images/dish/' . $img)
                                                            : asset('images/dish/default-dish.png') }}"
                                                     alt="{{ $dish->dsh_name_pt }}"
                                                     class="img-thumbnail" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <h5 style="margin: 0; color: #2A3F54;">{{ $dish->dsh_name_pt }}</h5>
                                                @if($dish->dsh_name_en)
                                                <small class="text-muted">{{ $dish->dsh_name_en }}</small>
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <span class="badge badge-success">
                                                    <i class="fa fa-leaf"></i> Vegetariano
                                                </span>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <div class="input-group input-group-sm" style="width: 120px;">
                                                    <div class="input-group-prepend" style="margin-right: -5px;">
                                                        <button class="btn btn-outline-secondary btn-sort-up" type="button" 
                                                                data-id="{{ $dish->dsh_id }}" title="Mover para cima">
                                                            <i class="fa fa-arrow-up"></i>
                                                        </button>
                                                    </div>
                                                    <input type="number" 
                                                           class="form-control form-control-sm order-input" 
                                                           value="{{ $dish->pivot->mnd_sort ?? ($index + 1) }}"
                                                           min="1"
                                                           style="text-align: center;">
                                                    <div class="input-group-append">
                                                        <button class="btn btn-outline-secondary btn-sort-down" type="button"
                                                                data-id="{{ $dish->dsh_id }}" title="Mover para baixo">
                                                            <i class="fa fa-arrow-down"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center" style="vertical-align: middle;">
                                                <button class="btn btn-danger btn-sm btn-remove-dish" 
                                                        data-id="{{ $dish->dsh_id }}"
                                                        data-name="{{ $dish->dsh_name_pt }}">
                                                    <i class="fa fa-trash"></i> Remover
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @endif
                        </div>

                        <!-- Tab: Todos os Pratos -->
                        <div class="tab-pane fade" id="all" role="tabpanel">
                            @if($menu->dishes->isEmpty())
                            <div class="text-center py-5">
                                <i class="fa fa-utensils fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">Nenhum prato na ementa</h4>
                                <p class="text-muted">Adicione pratos usando o seletor acima</p>
                            </div>
                            @else
                            <div class="table-responsive">
                                <table class="table table-hover" id="allDishesTable">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th style="width: 60px;">#</th>
                                            <th style="width: 80px;">Imagem</th>
                                            <th>Prato</th>
                                            <th style="width: 120px;">Tipo</th>
                                            <th style="width: 100px;">Ordem</th>
                                            <th style="width: 120px;" class="text-center">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="allDishesList" class="sortable-list-disabled" data-type="all">
                                        @foreach($menu->dishes->sortBy('pivot.mnd_sort') as $index => $dish)
                                        <tr data-id="{{ $dish->dsh_id }}" data-pivot-id="{{ $dish->pivot->mnd_id }}">
                                            <td class="text-center" style="vertical-align: middle;">
                                                <span class="handle" style="cursor: move;">
                                                    <i class="fa fa-arrows-alt"></i>
                                                </span>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                @php
                                                    $img = $dish->dsh_img;
                                                    $path = "dish/$img";
                                                @endphp

                                                <img src="{{ ($img && Storage::disk('public_images')->exists($path))
                                                            ? asset('images/dish/' . $img)
                                                            : asset('images/dish/default-dish.png') }}"
                                                     alt="{{ $dish->dsh_name_pt }}"
                                                     class="img-thumbnail" 
                                                     style="width: 60px; height: 60px; object-fit: cover;">
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <h5 style="margin: 0; color: #2A3F54;">{{ $dish->dsh_name_pt }}</h5>
                                                @if($dish->dsh_name_en)
                                                <small class="text-muted">{{ $dish->dsh_name_en }}</small>
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">
                                                @if($dish->dsh_type == 1)
                                                <span class="badge badge-success">
                                                    <i class="fa fa-leaf"></i> Vegetariano
                                                </span>
                                                @else
                                                <span class="badge badge-danger">
                                                    <i class="fa fa-drumstick-bite"></i> Normal
                                                </span>
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">
                                                {{ $dish->pivot->mnd_sort }}
                                            </td>
                                            <td class="text-center" style="vertical-align: middle;">
                                                <button class="btn btn-danger btn-sm btn-remove-dish" 
                                                        data-id="{{ $dish->dsh_id }}"
                                                        data-name="{{ $dish->dsh_name_pt }}">
                                                    <i class="fa fa-trash"></i> Remover
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Botões de ação -->
                    <div class="ln_solid"></div>
                    <div class="form-group">
                        <div class="col-md-12 text-center">
<!--                            <button type="button" id="saveOrder" class="btn btn-primary">
                                <i class="fa fa-save"></i> Guardar Ordenação
                            </button>-->
                            <a href="{{ route('admin.menu.weekly.index') }}" class="btn btn-secondary">
                                <i class="fa fa-check"></i> Concluir
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Adicionar Múltiplos Pratos -->
<div class="modal fade" id="multipleDishesModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-layer-group"></i> Adicionar Múltiplos Pratos</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>Pratos Disponíveis</h5>
                        <div class="form-group">
                            <label>Filtrar por Tipo:</label>
                            <select id="modalFilterType" class="form-control">
                                <option value="all">Todos</option>
                                <option value="normal">Normais</option>
                                <option value="vegetarian">Vegetarianos</option>
                            </select>
                        </div>
                        <div class="available-dishes-list" style="max-height: 300px; overflow-y: auto;">
                            @foreach($availableDishes as $dish)
                                <div class="checkbox dish-checkbox" 
                                     data-type="{{ $dish->dsh_type == 1 ? 'vegetarian' : 'normal' }}">
                                    <label>
                                        <input type="checkbox" 
                                               name="dish_ids[]" 
                                               value="{{ $dish->dsh_id }}"
                                               class="dish-select-checkbox">

                                        <strong>{{ $dish->dsh_name_pt }}</strong>

                                        <small class="text-muted">
                                            - {{ $dish->dsh_type == 1 ? 'Vegetariano' : 'Normal' }}
                                        </small>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5>Pratos Selecionados <span id="selectedCount" class="badge badge-primary">0</span></h5>
                        <div id="selectedDishesList" style="max-height: 300px; overflow-y: auto; padding: 10px; border: 1px dashed #ddd; border-radius: 5px;">
                            <p class="text-muted text-center">Nenhum prato selecionado</p>
                        </div>
                        <div class="form-group mt-3">
                            <label>Ordem inicial:</label>
                            <input type="number" id="startingOrder" class="form-control" value="1" min="1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="addSelectedDishes">
                    <i class="fa fa-plus"></i> Adicionar Selecionados
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Remover Prato -->
<div class="modal fade" id="removeDishModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger"><i class="fa fa-exclamation-triangle"></i> Remover Prato</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="removeDishMessage"></p>
                <form id="removeDishForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" id="removeDishId" name="dish_id">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-danger" id="confirmRemoveDish">
                    <i class="fa fa-trash"></i> Remover
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.css" rel="stylesheet" />
<style>
    .sortable-list tr {
        cursor: move;
    }

    .sortable-list tr.sortable-chosen {
        background-color: rgba(26, 187, 156, 0.1);
    }

    .sortable-list tr.sortable-ghost {
        opacity: 0.4;
        background-color: #f8f9fa;
    }

    .handle {
        color: #2A3F54;
        font-size: 16px;
    }

    .order-input {
        width: 50px !important;
        text-align: center;
    }

    .dish-checkbox {
        padding: 8px;
        border-bottom: 1px solid #eee;
    }

    .dish-checkbox:hover {
        background-color: #f8f9fa;
    }

    .nav-tabs .badge {
        margin-left: 5px;
        font-size: 10px;
    }

    #selectedDishesList .selected-dish {
        padding: 8px;
        margin-bottom: 5px;
        background-color: #f8f9fa;
        border-radius: 4px;
        border-left: 4px solid #1ABB9C;
    }

    .tab-pane {
        padding-top: 20px;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
$(document).ready(function () {
    // Inicializar Select2
    $('.select2').select2({
        placeholder: "Selecione um prato...",
        allowClear: true
    });

    // Inicializar Sortable para todas as listas
    $('.sortable-list').each(function () {
        new Sortable(this, {
            handle: '.handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',

            onEnd: function () {
                let list = $(this.el);

                // Atualiza números visuais da UI
                updateOrderNumbers(list);

                // Guarda automaticamente no servidor
                saveOrderAutomatically(list);
            }
        });

    });

    // Atualizar números de ordem
    function updateOrderNumbers(tableBody) {
        tableBody.find('tr').each(function (index) {
            $(this).find('.order-input').val(index + 1);
        });
    }

    // Build orders payload from a given list
    function collectOrders(listElement) {
        let orders = [];
        let type = listElement.data('type'); // "normal" ou "vegetarian"

        listElement.find('tr').each(function (index) {
            let dishId = $(this).data('id');
            let pivotId = $(this).data('pivot-id');

            if (!dishId) return;

            orders.push({
                dish_id: dishId,
                pivot_id: pivotId,
                order: index + 1,
                type: type
            });
        });

        return orders;
    }

    // Auto-save order via AJAX
    function saveOrderAutomatically(listElement) {
        let orders = collectOrders(listElement);

        if (!orders.length) {
            return;
        }

        $.ajax({
            url: '{{ route("admin.menu.weekly.save-order", $menu->mnu_id) }}', // rota que já tens para saveOrder
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                orders: orders
            },
            success: function (response) {
                console.log(response.message || 'Ordenação gravada automaticamente.');
                // Aqui, se quiseres, podes meter um toast em vez de console.log
            },
            error: function (xhr) {
                console.error(xhr.responseJSON || xhr.responseText || xhr);
                alert('Erro ao guardar ordenação. Por favor, tente novamente.');
            }
        });
    }

    // Filtrar pratos disponíveis
    $('#filterType, #modalFilterType').on('change', function () {
        var filter = $(this).val();

        if ($(this).is('#filterType')) {
            // Filtrar select2
            if (filter === 'all') {
                $('#availableDishes option').show();
            } else {
                $('#availableDishes option').hide();
                $('#availableDishes option[data-type="' + filter + '"]').show();
            }
        } else {
            // Filtrar checkboxes no modal
            $('.dish-checkbox').hide();
            if (filter === 'all') {
                $('.dish-checkbox').show();
            } else {
                $('.dish-checkbox[data-type="' + filter + '"]').show();
            }
        }
    });

    // Pesquisar pratos
    $('.select2').select2({
        placeholder: "Pesquise ou selecione um prato...",
        allowClear: true
    });

    // Adicionar prato à ementa
    $('#addDishToMenu').click(function () {
        var dishId = $('#availableDishes').val();
        var dishName = $('#availableDishes option:selected').text();

        if (!dishId) {
            alert('Por favor, selecione um prato.');
            return;
        }

        addDishToMenu(dishId, dishName);
    });

    // Função para adicionar prato
    function addDishToMenu(dishId, dishName) {
        $.ajax({
            url: '{{ route("admin.menu.weekly.add-dish", $menu->mnu_id) }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                dish_id: dishId
            },
            success: function (response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Erro: ' + response.message);
                }
            },
            error: function (xhr) {
                alert('Erro ao adicionar prato.');
            }
        });
    }

    // Remover prato
    $('.btn-remove-dish').click(function () {
        var dishId = $(this).data('id');
        var dishName = $(this).data('name');

        $('#removeDishMessage').html('Tem a certeza que deseja remover o prato <strong>"' + dishName + '"</strong> desta ementa?');
        $('#removeDishId').val(dishId);
        $('#removeDishForm').attr('action', '{{ route("admin.menu.weekly.remove-dish", $menu->mnu_id) }}');

        $('#removeDishModal').modal('show');
    });
    
    function updateDishCounters() {
        // Contar pratos normais existentes no DOM
        let normalCount = $('#normalDishesList tr').length;
        $('#normal-tab .badge-danger').text(normalCount);

        // Contar pratos vegetarianos existentes no DOM
        let vegCount = $('#vegetarianDishesList tr').length;
        $('#vegetarian-tab .badge-success').text(vegCount);

        // Contar total
        let total = normalCount + vegCount;
        $('#all-tab .badge-primary').text(total);
    }
    
    function fixLocalOrder() {
        $('.sortable-list').each(function () {
            let pos = 1; 
            $(this).find('tr').each(function () {
                $(this).find('.order-input').val(pos);
                pos++;
            });
        });
    }


    // Confirmar remoção
    $('#confirmRemoveDish').click(function () {
        let dishId = $('#removeDishId').val();
        let url = '{{ route("admin.menu.weekly.remove-dish", $menu->mnu_id) }}';

        $.ajax({
            url: url,
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}',
                dish_id: dishId
            },
            success: function (response) {

                // Remover linha da tabela
                $('tr[data-id="' + dishId + '"]').fadeOut(200, function () {
                    $(this).remove();
                    
                    updateDishCounters();
                    // Recalcular ordenação local
                    fixLocalOrder();
                });

                // Fechar modal
                $('#removeDishModal').modal('hide');                
            },
            error: function () {
                alert('Erro ao remover o prato.');
            }
        });
    });


    // Move dish up
    $(document).on('click', '.btn-sort-up', function (e) {
        e.preventDefault();

        let row = $(this).closest('tr');
        let prev = row.prev('tr');

        if (!prev.length) {
            return; // já está no topo
        }

        row.insertBefore(prev);

        let list = row.closest('.sortable-list');
        updateOrderNumbers(list);
        saveOrderAutomatically(list);
    });

    // Move dish down
    $(document).on('click', '.btn-sort-down', function (e) {
        e.preventDefault();

        let row = $(this).closest('tr');
        let next = row.next('tr');

        if (!next.length) {
            return; // já está no fundo
        }

        row.insertAfter(next);

        let list = row.closest('.sortable-list');
        updateOrderNumbers(list);
        saveOrderAutomatically(list);
    });

    // Função para chamar o endpoint sortMenuDish
    function sortDish(dishId, direction) {
        $.ajax({
            url: '{{ route("admin.menu.weekly.sortMenuDish", [$menu->mnu_id, "__DIRECTION__"]) }}'
                    .replace('__DIRECTION__', direction),
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                dish_id: dishId
            },
            success: function (response) {
                if (response.success) {
                    location.reload(); // Ou atualiza só a linha/ordem
                } else {
                    alert('Erro: ' + response.message);
                }
            },
            error: function (xhr) {
                alert('Erro ao mover prato.');
            }
        });
    }

    // Guardar ordenação
    function saveOrderAutomatically(listElement) {
        let orders = [];
        let menuId = $('#menuId').val(); // cria um hidden input no blade com o ID da ementa

        listElement.find('tr').each(function (index) {
            orders.push({
                dish_id: $(this).data('id'),
                pivot_id: $(this).data('pivot-id'),
                order: index + 1,
                type: listElement.data('type') // normal ou vegetarian
            });
        });

        $.ajax({
            url: `/donamarmita-admin/menu/weekly/${menuId}/save-order`,
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                orders: orders,
            },
            success: function () {
                console.log("Ordenação gravada automaticamente!");
            },
            error: function () {
                alert("Erro ao gravar ordenação.");
            }
        });
    }

    // Modal: Adicionar múltiplos pratos
    $('.dish-select-checkbox').change(function () {
        updateSelectedDishesList();
    });

    function updateSelectedDishesList() {
        var selected = $('.dish-select-checkbox:checked');
        var container = $('#selectedDishesList');
        var count = selected.length;

        $('#selectedCount').text(count);

        if (count === 0) {
            container.html('<p class="text-muted text-center">Nenhum prato selecionado</p>');
            return;
        }

        var html = '';
        selected.each(function () {
            var checkbox = $(this);
            var dishName = checkbox.closest('label').find('strong').text();
            var dishType = checkbox.closest('.dish-checkbox').data('type');

            html += '<div class="selected-dish">';
            html += '<strong>' + dishName + '</strong>';
            html += '<span class="badge ' + (dishType === 'vegetarian' ? 'badge-success' : 'badge-danger') + ' float-right">';
            html += dishType === 'vegetarian' ? 'Vegetariano' : 'Normal';
            html += '</span>';
            html += '</div>';
        });

        container.html(html);
    }

    // Adicionar pratos selecionados
    $('#addSelectedDishes').click(function () {
        var selected = $('.dish-select-checkbox:checked');
        var dishIds = [];

        if (selected.length === 0) {
            alert('Por favor, selecione pelo menos um prato.');
            return;
        }

        selected.each(function () {
            dishIds.push($(this).val());
        });

        var startingOrder = $('#startingOrder').val();

        $.ajax({
            url: '{{ route("admin.menu.weekly.add-multiple-dishes", $menu->mnu_id) }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                dish_ids: dishIds,
                starting_order: startingOrder
            },
            success: function (response) {
                if (response.success) {
                    $('#multipleDishesModal').modal('hide');
                    location.reload();
                } else {
                    alert('Erro: ' + response.message);
                }
            },
            error: function (xhr) {
                alert('Erro ao adicionar pratos.');
            }
        });
    });

    // Atualizar ordem quando input é alterado
    $('.order-input').on('change', function () { 
        var value = parseInt($(this).val());
        if (value < 1) {
            $(this).val(1);
        }
    });
});
</script>
@endpush