@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('services.edit', $service) !!}
@endsection
@section('content')
    <div class="the-box rounded">
        <div class="row">
            <div class="col-md-12">
                <h3>Editar Serviço: {{ $service->title }}</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.update', $service->id) }}" method="POST">
            @csrf
            @method('PUT')

            <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', $service->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', $service->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', $service->icon_library) == 'MaterialCommunityIcons' ? 'selected' : '' }}>Material Community Icons</option>
                        <option value="FontAwesome5" {{ old('icon_library', $service->icon_library) == 'FontAwesome5' ? 'selected' : '' }}>Font Awesome 5</option>
                        <option value="Ionicons" {{ old('icon_library', $service->icon_library) == 'Ionicons' ? 'selected' : '' }}>Ionicons</option>
                        <option value="FontAwesome6" {{ old('icon_library', $service->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', $service->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', $service->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', $service->category) == 'administrativo' ? 'selected' : '' }}>Administrativo
                        </option>
                        <option value="financeiro"
                            {{ old('category', $service->category) == 'financeiro' ? 'selected' : '' }}>Financeiro</option>
                        <option value="licitacoes"
                            {{ old('category', $service->category) == 'licitacoes' ? 'selected' : '' }}>Licitações</option>
                        <option value="recursos_humanos"
                            {{ old('category', $service->category) == 'recursos_humanos' ? 'selected' : '' }}>Recursos
                            Humanos</option>
                        <option value="transparencia"
                            {{ old('category', $service->category) == 'transparencia' ? 'selected' : '' }}>Transparência
                        </option>
                        <option value="geral" {{ old('category', $service->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', $service->order) }}" 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', $service->color) }}">
                </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', $service->is_active) ? '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> ATUALIZAR
                    </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: {{ $service->color }}; margin-bottom: 10px;">
                        <i class="fa fa-{{ $service->icon }}"></i>
                    </div>
                    <p class="text-muted">Visualização atual do ícone</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;
            const color = document.getElementById('color').value;

            const preview = document.querySelector('.well i');
            if (preview) {
                preview.className = `fa fa-${icon}`;
                preview.style.color = color;
            }
        }
    </script>
@endpush