@php
    $leftButtons = $data['left_buttons'] ?? [];
    $rightButtons = $data['right_buttons'] ?? [];
    $friendlyIcons = [
        'fa fa-star' => 'Estrela',
        'bi bi-info-circle-fill' => 'Informação',
        'fa fa-check-circle' => 'Sucesso/Check',
        'fa fa-exclamation-circle' => 'Alerta',
        'fa fa-phone' => 'Telefone',
        'fa fa-envelope' => 'E-mail',
        'fa fa-calendar' => 'Calendário',
        'fa fa-user' => 'Usuário',
        'fa fa-map-marker' => 'Localização',
        'fa fa-file-text-o' => 'Documento',
        'fa fa-globe' => 'Globo/Internet',
        'fa fa-shield' => 'Segurança',
        'fa fa-cogs' => 'Configurações',
        'fa fa-trophy' => 'Troféu',
        'fa fa-university' => 'Governo/Institucional',
        'fa fa-money' => 'Financeiro',
        'fa fa-bullhorn' => 'Notícias/Avisos',
        'fa fa-question-circle' => 'Ajuda/FAQ',
        'fa fa-cube' => 'Cubo/Módulo',
        'bi bi-link-45deg' => 'Link/Conexão',
        'fa fa-terminal' => 'Terminal/Linha de Comando',
        'fa fa-sliders' => 'Controles/Sliders',
    ];
@endphp

<div class="row">
    <div class="col-md-12">
        <div class="mb-3">
            {!! Form::label('parameters[background_color]', 'Cor de Fundo da Barra', ['for' => 'command-line-bg-color-hex']) !!}
            <div class="input-group">
                {!! Form::text('parameters[background_color]', $data['background_color'] ?? '#ffffff', ['class' => 'form-control', 'id' => 'command-line-bg-color-hex', 'placeholder' => 'Ex: #ffffff']) !!}
                <span class="input-group-text p-0">
                    <input type="color" id="command-line-bg-color-picker" value="{{ $data['background_color'] ?? '#ffffff' }}" style="width: 38px; height: 36px; border: none; cursor: pointer;" aria-label="Seletor de cor de fundo da barra">
                </span>
            </div>
        </div>
    </div>
</div>

<hr>

<div class="row">
    {{-- Lado Esquerdo --}}
    <div class="col-md-6" style="border-right: 1px solid #eee;">
        <h4>Botões à Esquerda</h4>
        <div id="left-buttons-container">
            @foreach($leftButtons as $index => $btn)
                <div class="button-item left-button-item card border shadow-sm mb-3" data-index="{{ $index }}">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-left-text-{{ $index }}">Texto <span class="text-danger" aria-hidden="true">*</span></label>
                                    {!! Form::text("parameters[left_buttons][$index][text]", $btn['text'] ?? '', ['class' => 'form-control', 'id' => "command-left-text-$index", 'placeholder' => 'Digite o texto', 'required' => 'required', 'aria-required' => 'true']) !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-left-style-{{ $index }}">Estilo</label>
                                    {!! Form::select("parameters[left_buttons][$index][style]", ['limpo' => 'Limpo', 'padrao' => 'Padrão'], $btn['style'] ?? 'limpo', ['class' => 'form-select', 'id' => "command-left-style-$index"]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-left-icon-{{ $index }}">Ícone <span class="text-danger" aria-hidden="true">*</span></label>
                                    <div class="input-group">
                                        {!! Form::select("parameters[left_buttons][$index][icon]", $friendlyIcons, $btn['icon'] ?? 'fa fa-circle', ['class' => 'form-select icon-selector', 'id' => "command-left-icon-$index", 'required' => 'required', 'aria-required' => 'true']) !!}
                                        <span class="input-group-text"><i class="{{ $btn['icon'] ?? 'fa fa-circle' }}" aria-hidden="true"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-left-link-{{ $index }}">Link</label>
                                    {!! Form::text("parameters[left_buttons][$index][link]", $btn['link'] ?? '', ['class' => 'form-control', 'id' => "command-left-link-$index", 'placeholder' => 'Ex: /link ou https://...']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="text-right remove-item-wrapper">
                            <button type="button" class="btn btn-danger btn-sm btn-remove-left-button" aria-label="Remover botão esquerdo"><i class="bi bi-trash-fill" aria-hidden="true"></i> Remover</button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn-info btn-block" id="btn-add-left-button">
            <i class="bi bi-plus-lg" aria-hidden="true"></i> Adicionar Botão à Esquerda
        </button>
    </div>

    {{-- Lado Direito --}}
    <div class="col-md-6">
        <h4>Botões à Direita</h4>
        <div id="right-buttons-container">
            @foreach($rightButtons as $index => $btn)
                <div class="button-item right-button-item card border shadow-sm mb-3" data-index="{{ $index }}">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-right-text-{{ $index }}">Texto <span class="text-danger" aria-hidden="true">*</span></label>
                                    {!! Form::text("parameters[right_buttons][$index][text]", $btn['text'] ?? '', ['class' => 'form-control', 'id' => "command-right-text-$index", 'placeholder' => 'Digite o texto', 'required' => 'required', 'aria-required' => 'true']) !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-right-style-{{ $index }}">Estilo</label>
                                    {!! Form::select("parameters[right_buttons][$index][style]", ['limpo' => 'Limpo', 'padrao' => 'Padrão'], $btn['style'] ?? 'limpo', ['class' => 'form-select', 'id' => "command-right-style-$index"]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-right-icon-{{ $index }}">Ícone <span class="text-danger" aria-hidden="true">*</span></label>
                                    <div class="input-group">
                                        {!! Form::select("parameters[right_buttons][$index][icon]", $friendlyIcons, $btn['icon'] ?? 'fa fa-circle', ['class' => 'form-select icon-selector', 'id' => "command-right-icon-$index", 'required' => 'required', 'aria-required' => 'true']) !!}
                                        <span class="input-group-text"><i class="{{ $btn['icon'] ?? 'fa fa-circle' }}" aria-hidden="true"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="command-right-link-{{ $index }}">Link</label>
                                    {!! Form::text("parameters[right_buttons][$index][link]", $btn['link'] ?? '', ['class' => 'form-control', 'id' => "command-right-link-$index", 'placeholder' => 'Ex: /link ou https://...']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="text-right remove-item-wrapper">
                            <button type="button" class="btn btn-danger btn-sm btn-remove-right-button" aria-label="Remover botão direito"><i class="bi bi-trash-fill" aria-hidden="true"></i> Remover</button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn-info btn-block" id="btn-add-right-button">
            <i class="bi bi-plus-lg" aria-hidden="true"></i> Adicionar Botão à Direita
        </button>
    </div>
</div>

{{-- Template para clonagem --}}
<div id="command-line-template" style="display: none;">
    <div class="button-item card border shadow-sm mb-3" data-index="__INDEX__">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="command-__SIDE__-text-__INDEX__">Texto <span class="text-danger" aria-hidden="true">*</span></label>
                        <input type="text" name="parameters[__SIDE__][__INDEX__][text]" id="command-__SIDE__-text-__INDEX__" class="form-control" placeholder="Digite o texto" required aria-required="true">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="command-__SIDE__-style-__INDEX__">Estilo</label>
                        <select name="parameters[__SIDE__][__INDEX__][style]" id="command-__SIDE__-style-__INDEX__" class="form-control">
                            <option value="limpo">Limpo</option>
                            <option value="padrao">Padrão</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="command-__SIDE__-icon-__INDEX__">Ícone <span class="text-danger" aria-hidden="true">*</span></label>
                        <div class="input-group">
                            <select name="parameters[__SIDE__][__INDEX__][icon]" id="command-__SIDE__-icon-__INDEX__" class="form-control icon-selector" required aria-required="true">
                                @foreach($friendlyIcons as $icon => $label)
                                    <option value="{{ $icon }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            <span class="input-group-text"><i class="fa fa-circle" aria-hidden="true"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="command-__SIDE__-link-__INDEX__">Link</label>
                        <input type="text" name="parameters[__SIDE__][__INDEX__][link]" id="command-__SIDE__-link-__INDEX__" class="form-control" placeholder="Ex: /link ou https://...">
                    </div>
                </div>
            </div>
            <div class="text-right remove-item-wrapper">
                <button type="button" class="btn btn-danger btn-sm btn-remove-button" aria-label="Remover botão"><i class="bi bi-trash-fill" aria-hidden="true"></i> Remover</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        ColorManager.initColorListeners('command-line', '#command-line-bg-color-picker', '#command-line-bg-color-hex');

        const addButton = (side) => {
            const $container = $(`#${side}-buttons-container`);
            const index = $container.find('.button-item').length;
            let html = $('#command-line-template').html();
            
            html = html.replace(/__INDEX__/g, index);
            html = html.replace(/__SIDE__/g, `${side}_buttons`);
            
            const $newHtml = $(html);
            $newHtml.addClass(`${side}-button-item`);
            $newHtml.find('.btn-remove-button').addClass(`btn-remove-${side}-button`);
            
            $container.append($newHtml);
            
            DynamicItemManager.reindexItems(`#${side}-buttons-container`, `.${side}-button-item`, {});
        };

        $('#btn-add-left-button').on('click', function() { addButton('left'); });
        $('#btn-add-right-button').on('click', function() { addButton('right'); });

        $(document).on('click', '.btn-remove-left-button', function() {
            DynamicItemManager.removeItem(this, '.left-button-item', '#left-buttons-container');
        });

        $(document).on('click', '.btn-remove-right-button', function() {
            DynamicItemManager.removeItem(this, '.right-button-item', '#right-buttons-container');
        });
    });
</script>