@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('services.create') !!}
@endsection
@section('content')
    <div class="the-box rounded">
        <div class="row">
            <div class="col-md-12">
                <h3>Cadastrar Novo Serviço</h3>
                <hr>
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('services.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="form-group col-sm-12">
                    <label for="title" class="required">Nome do Serviço:</label>
                    <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}"
                        required>
                </div>

                {{-- <div class="form-group col-sm-6">
                    <label for="icon" class="required">Ícone:</label>
                    <input type="text" name="icon" id="icon" class="form-control" value="{{ old('icon') }}" required placeholder="Ex: office-building">
                    <small class="text-muted">Nome do ícone (MaterialCommunityIcons, FontAwesome5, etc)</small>
                </div> --}}

                {{-- <div class="form-group col-sm-6">
                    <label for="icon_library">Biblioteca do Ícone:</label>
                    <select name="icon_library" id="icon_library" class="form-control">
                        <option value="MaterialCommunityIcons"
                            {{ old('icon_library') == 'MaterialCommunityIcons' ? 'selected' : '' }}>Material Community Icons
                        </option>
                        <option value="FontAwesome5" {{ old('icon_library') == 'FontAwesome5' ? 'selected' : '' }}>Font
                            Awesome 5</option>
                        <option value="Ionicons" {{ old('icon_library') == 'Ionicons' ? 'selected' : '' }}>Ionicons</option>
                        <option value="FontAwesome6" {{ old('icon_library') == 'FontAwesome6' ? 'selected' : '' }}>Font
                            Awesome 6</option>
                    </select>
                </div> --}}

                <div class="form-group col-sm-12">
                    <label for="url">URL do Serviço:</label>
                    <input type="url" name="url" id="url" class="form-control" value="{{ old('url') }}"
                        placeholder="https://exemplo.com.br/servico">
                </div>

                <div class="form-group col-sm-12">
                    <label for="description">Descrição:</label>
                    <textarea name="description" id="description" class="form-control" rows="3">{{ old('description') }}</textarea>
                </div>

                <div class="form-group col-sm-6">
                    <label for="category">Categoria:</label>
                    <select name="category" id="category" class="form-control">
                        <option value="administrativo" {{ old('category') == 'administrativo' ? 'selected' : '' }}>
                            Administrativo</option>
                        <option value="financeiro" {{ old('category') == 'financeiro' ? 'selected' : '' }}>Financeiro
                        </option>
                        <option value="licitacoes" {{ old('category') == 'licitacoes' ? 'selected' : '' }}>Licitações
                        </option>
                        <option value="recursos_humanos" {{ old('category') == 'recursos_humanos' ? 'selected' : '' }}>
                            Recursos Humanos</option>
                        <option value="transparencia" {{ old('category') == 'transparencia' ? 'selected' : '' }}>
                            Transparência</option>
                        <option value="geral" {{ old('category') == 'geral' ? 'selected' : '' }}>Geral</option>
                    </select>
                </div>

                <div class="form-group col-sm-6">
                    <label for="order">Ordem de Exibição:</label>
                    <input type="number" name="order" id="order" class="form-control" value="{{ old('order', 0) }}"
                        min="0">
                </div>

                {{-- <div class="form-group col-sm-6">
                    <label for="color">Cor do Ícone:</label>
                    <input type="color" name="color" id="color" class="form-control"
                        value="{{ old('color', '#2F4F4F') }}">
                </div> --}}

                <div class="form-group col-sm-6">
                    <div class="checkbox" style="margin-top: 25px;">
                        <label>
                            <input type="checkbox" name="is_active" value="1"
                                {{ old('is_active', true) ? 'checked' : '' }}>
                            Serviço Ativo
                        </label>
                    </div>
                </div>

                <div class="form-group col-sm-12">
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-save"></i> SALVAR
                    </button>
                    <a href="{{ route('services.index') }}" class="btn btn-default">
                        <i class="fa fa-arrow-left"></i> CANCELAR
                    </a>
                </div>
            </div>
        </form>

        <!-- Preview do Ícone  -->
        {{-- <div class="row">
            <div class="col-md-12">
                <hr>
                <h4>Preview do Ícone:</h4>
                <div class="well text-center">
                    <div style="font-size: 48px; color: #2F4F4F; margin-bottom: 10px;">
                        <i class="fa fa-question-circle"></i>
                    </div>
                    <p class="text-muted">Visualização do ícone (atualiza em tempo real)</p>
                </div>
            </div>
        </div>    --}}
    </div>
@endsection

@push('scripts')
    <script>
        // Atualizar preview quando mudar o ícone ou cor
        document.getElementById('icon').addEventListener('input', updatePreview);
        document.getElementById('color').addEventListener('input', updatePreview);

        function updatePreview() {
            const icon = document.getElementById('icon').value || 'question-circle';
            const color = document.getElementById('color').value || '#2F4F4F';

            const preview = document.querySelector('.well i');
            if (preview) {
                preview.className = `fa fa-${icon}`;
                preview.style.color = color;
            }
        }

        // Inicializar preview
        updatePreview();
    </script>
@endpush