@extends('layouts.master')

@section('title') @lang('translation.creators') @endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1') TudKabir @endslot
@slot('title')Gestão de Empresas @endslot
@endcomponent

<div class="row g-4 mb-3">
    <div class="col-sm-auto">
        <div>
            <a href="#" class="btn btn-success"><i class="ri-add-line align-bottom me-1"></i> Criar Empresa</a>
        </div>
    </div>
    <div class="col-sm">
        <div class="d-flex justify-content-sm-end gap-2">
            <div class="search-box ms-2">
                <input type="text" class="form-control" placeholder="Pesquisar...">
                <i class="ri-search-line search-icon"></i>
            </div>
            <select class="form-control w-md" data-choices data-choices-search-false>
                <option value="All">All</option>
                <option value="Today">Today</option>
                <option value="Yesterday" selected>Yesterday</option>
                <option value="Last 7 Days">Last 7 Days</option>
                <option value="Last 30 Days">Last 30 Days</option>
                <option value="This Month">This Month</option>
                <option value="Last Year">Last Year</option>
            </select>
        </div>
    </div>
</div>

<div class="row">
    <!-- Exibe os 8 cards mais recentes -->
    @foreach($topCompanies as $company)
        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <img src="{{ $company->image_url ?? asset('build/images/default-company.png') }}" 
                                 class="avatar-sm object-fit-cover rounded">
                        </div>
                        <div class="ms-3 flex-grow-1">
                            <a href="javascript:void(0)">
                                <h5 class="mb-1">{{ $company->name }}</h5>
                            </a>
                            <p class="text-muted mb-0">NIF: {{ $company->nif }}</p>
                        </div>
                        <div>
                            <div class="dropdown float-end">
                                <button class="btn btn-ghost-primary btn-icon dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ri-more-fill align-middle fs-16"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item view-item-btn" href="#">Ver detalhes</a></li>
                                    <li><a class="dropdown-item edit-item-btn" href="#">Editar</a></li>
                                    <li><a class="dropdown-item text-danger delete-item-btn" href="#">Eliminar</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row">
    <div class="col-lg-12">
        <h5 class="card-title mb-4 fw-bold fs-17">Listas das Empresas</h5>
    </div>
</div>

<div class="mb-3 d-flex gap-2">
    <button id="btn-todos" class="btn btn-outline-primary active">Todos</button>
    <button id="btn-formais" class="btn btn-outline-primary">Empresas Formais</button>
    <button id="btn-informais" class="btn btn-outline-secondary">Empresas Informais</button>
    <button id="btn-fabricantes" class="btn btn-outline-success">Fabricantes</button>
</div>


<div id="all-companies">
    <div class="row row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">
        @foreach($companies as $company)
        <div class="col">
            <div class="card">
                <!--img src="{{ URL::asset('build/images/users/avatar-2.jpg') }}" alt="" class="avatar-md rounded-circle object-fit-cover mt-n5 img-thumbnail border-light border-5 border-white mx-auto d-block">
                    <a href="pages-profile"-->
                <div class="card-body text-center">
                    <img src="{{ asset($company->image_url ?? 'build/images/users/avatar-2.jpg') }}" class="avatar-sm object-fit-cover rounded">
                        <h5 class="mt-2 mb-1">{{ $company->name }}</h5>
                    </a>
                    
                    <p class="text-muted mb-2">{{ $company->product_count }} Products</p>
                    <p class="text-muted">NIF: {{ $company->nif }}</p>
                    
                    <div class="btn-group w-100">
                        <button class="btn btn-primary w-50">
                            <i class="ri-eye-line"></i> <!-- Ícone para detalhes -->
                        </button>
                        <button class="btn btn-warning w-50">
                            <i class="ri-edit-line"></i> <!-- Ícone para editar -->
                        </button>
                        <button class="btn btn-danger w-50">
                            <i class="ri-delete-bin-5-line"></i> <!-- Ícone para eliminar -->
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- Adicione jQuery antes do script que utiliza $ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function () {
    // Ao clicar nos botões de filtro
    $('#btn-todos').click(function () {
        filtrarEmpresas('todos');
    });

    $('#btn-formais').click(function () {
        filtrarEmpresas('formal');
    });

    $('#btn-informais').click(function () {
        filtrarEmpresas('informal');
    });

    $('#btn-fabricantes').click(function () {
        filtrarEmpresas('fabricante');
    });

    // Função para filtrar as empresas
    function filtrarEmpresas(tipo) {
        // Desabilita os botões enquanto a requisição está sendo feita
        $('#btn-todos, #btn-formais, #btn-informais, #btn-fabricantes').prop('disabled', true);

        $.ajax({
            url: '{{ route("companies.filter") }}',
            type: 'POST',
            data: {
                tipo: tipo,
                _token: '{{ csrf_token() }}'
            },
            beforeSend: function() {
                $('#all-companies').html('<div class="text-center py-5 w-100">Carregando...</div>');
            },
            success: function (data) {
                // Atualiza a div com as empresas filtradas
                if (data.html.trim() === '') {
                    $('#all-companies').html('<div class="text-center py-5 w-100">Nenhuma empresa encontrada para este filtro.</div>');
                } else {
                    $('#all-companies').html(data.html);  
                }
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                $('#all-companies').html('<div class="text-center py-5 w-100">Ocorreu um erro ao carregar os dados. Tente novamente.</div>');
            },
            complete: function () {
                // Habilita os botões novamente após a requisição ser concluída
                $('#btn-todos, #btn-formais, #btn-informais, #btn-fabricantes').prop('disabled', false);
            }
        });
    }
});

</script>

@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>