@extends('layouts.app')

@section('title', 'Comerciantes')

@section('content')
<div class="sinagem-main">
    
    <!-- Cards de Estatísticas -->
    <div class="stats-grid mb-4">
        <!-- Total -->
        <div class="stat-card stat-card-total">
            <div class="stat-icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">{{ $stats['total'] }}</div>
                <div class="stat-label">Total de Comerciantes</div>
            </div>
        </div>

        <!-- Ativos -->
        <div class="stat-card stat-card-active">
            <div class="stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">{{ $stats['active'] }}</div>
                <div class="stat-label">Ativos</div>
                <div class="stat-percent">{{ $stats['percent_active'] }}% do total</div>
            </div>
        </div>

        <!-- Aprovados -->
        <div class="stat-card stat-card-approved">
            <div class="stat-icon">
                <i class="fas fa-user-check"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">{{ $stats['approved'] }}</div>
                <div class="stat-label">Aprovados</div>
                <div class="stat-percent">{{ $stats['percent_approved'] }}% do total</div>
            </div>
        </div>

        <!-- Pendentes -->
        <div class="stat-card stat-card-pending">
            <div class="stat-icon">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">{{ $stats['pending'] }}</div>
                <div class="stat-label">Pendentes</div>
                <div class="stat-percent">{{ $stats['percent_pending'] }}% do total</div>
            </div>
        </div>

        <!-- Suspensos -->
        <div class="stat-card stat-card-suspended">
            <div class="stat-icon">
                <i class="fas fa-pause-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">{{ $stats['suspended'] }}</div>
                <div class="stat-label">Suspensos</div>
                <div class="stat-percent">{{ $stats['percent_suspended'] }}% do total</div>
            </div>
        </div>

        <!-- Bloqueados -->
        <div class="stat-card stat-card-blocked">
            <div class="stat-icon">
                <i class="fas fa-ban"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">{{ $stats['blocked'] }}</div>
                <div class="stat-label">Bloqueados</div>
                <div class="stat-percent">{{ $stats['percent_blocked'] }}% do total</div>
            </div>
        </div>
    </div>
    
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-store"></i>
                Comerciantes
            </h4>
            <a href="{{ route('mercado.comerciantes.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus-circle"></i>
                Novo Comerciante
            </a>
        </div>

        <div class="s-card-body">
            <!-- Filtros -->
            <form method="GET" class="row g-3 mb-4" id="filter-form">
                <div class="col-md-2">
                    <label for="market_id" class="form-label">Mercado</label>
                    <select name="market_id" id="market_id" class="form-control">
                        <option value="">Todos</option>
                        @foreach($markets ?? [] as $market)
                            <option value="{{ $market->id }}">{{ $market->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="business_type_id" class="form-label">Tipo de Negócio</label>
                    <select name="business_type_id" id="business_type_id" class="form-control">
                        <option value="">Todos</option>
                        @foreach($businessTypes ?? [] as $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="province_id" class="form-label">Província</label>
                    <select name="province_id" id="province_id" class="form-control">
                        <option value="">Todas</option>
                        @foreach($provinces ?? [] as $province)
                            <option value="{{ $province->id }}">{{ $province->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="municipality_id" class="form-label">Município</label>
                    <select name="municipality_id" id="municipality_id" class="form-control">
                        <option value="">Todos</option>
                        @foreach($municipalities ?? [] as $municipality)
                            <option value="{{ $municipality->id }}">{{ $municipality->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select name="status" id="status" class="form-control">
                        <option value="">Todos</option>
                        <option value="pending">Pendente</option>
                        <option value="approved">Aprovado</option>
                        <option value="active">Ativo</option>
                        <option value="suspended">Suspenso</option>
                        <option value="blocked">Bloqueado</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100" id="apply-filters">
                        <i class="fas fa-search"></i> Filtrar
                    </button>
                    <button type="button" class="btn btn-outline-secondary w-100 ms-2" id="clear-filters">
                        <i class="fas fa-eraser"></i> Limpar
                    </button>
                </div>
            </form>

            <!-- DataTable Server-side -->
            <div class="sinagem-datatable-wrapper">
                <div class="table-responsive">
                    <table id="comerciantes-table" class="s-table">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Identidade</th>
                                <th>Telefone</th>
                                <th>Status</th>
                                <th class="text-center">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables preenche via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* ===== Stats Grid ===== */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card {
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: default;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        opacity: 0.1;
        transform: translate(30px, -30px);
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .stat-card:hover::before {
        transform: translate(30px, -30px) scale(1.2);
    }

    /* Total */
    .stat-card-total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }

    .stat-card-total .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card-total .stat-number {
        color: #fff;
    }

    .stat-card-total .stat-label {
        color: rgba(255, 255, 255, 0.85);
    }

    .stat-card-total .stat-percent {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Ativos */
    .stat-card-active {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        color: #fff;
    }

    .stat-card-active .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card-active .stat-number {
        color: #fff;
    }

    .stat-card-active .stat-label {
        color: rgba(255, 255, 255, 0.85);
    }

    .stat-card-active .stat-percent {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Aprovados */
    .stat-card-approved {
        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
        color: #fff;
    }

    .stat-card-approved .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card-approved .stat-number {
        color: #fff;
    }

    .stat-card-approved .stat-label {
        color: rgba(255, 255, 255, 0.85);
    }

    .stat-card-approved .stat-percent {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Pendentes */
    .stat-card-pending {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: #fff;
    }

    .stat-card-pending .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card-pending .stat-number {
        color: #fff;
    }

    .stat-card-pending .stat-label {
        color: rgba(255, 255, 255, 0.85);
    }

    .stat-card-pending .stat-percent {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Suspensos */
    .stat-card-suspended {
        background: linear-gradient(135deg, #a8a8a8 0%, #636363 100%);
        color: #fff;
    }

    .stat-card-suspended .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card-suspended .stat-number {
        color: #fff;
    }

    .stat-card-suspended .stat-label {
        color: rgba(255, 255, 255, 0.85);
    }

    .stat-card-suspended .stat-percent {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Bloqueados */
    .stat-card-blocked {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: #fff;
    }

    .stat-card-blocked .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-card-blocked .stat-number {
        color: #fff;
    }

    .stat-card-blocked .stat-label {
        color: rgba(255, 255, 255, 0.85);
    }

    .stat-card-blocked .stat-percent {
        color: rgba(255, 255, 255, 0.7);
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .stat-content {
        flex: 1;
        min-width: 0;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 0.1rem;
    }

    .stat-label {
        font-size: 0.85rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 0.1rem;
    }

    .stat-percent {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
    }

    /* ===== Responsive ===== */
    @media (max-width: 1400px) {
        .stats-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .stat-card {
            padding: 1rem;
        }

        .stat-number {
            font-size: 1.6rem;
        }
    }

    /* ===== Badge Styles ===== */
    .badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .badge-success {
        background-color: #d4edda;
        color: #155724;
    }

    .badge-info {
        background-color: #cce5ff;
        color: #004085;
    }

    .badge-warning {
        background-color: #fff3cd;
        color: #856404;
    }

    .badge-danger {
        background-color: #f8d7da;
        color: #721c24;
    }

    .badge-neutral {
        background-color: #e2e3e5;
        color: #383d41;
    }

    /* ===== Action Buttons ===== */
    .btn-action {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        transition: all 0.15s ease;
        cursor: pointer;
        text-decoration: none;
        background: transparent;
        color: #6c757d;
    }

    .btn-action:hover {
        transform: scale(1.1);
    }

    .btn-view {
        color: #0d6efd;
    }

    .btn-view:hover {
        background: #e3f2fd;
        color: #0d6efd;
    }

    .btn-edit {
        color: #ffc107;
    }

    .btn-edit:hover {
        background: #fff3cd;
        color: #ffc107;
    }

    .btn-success {
        color: #28a745;
        background: transparent;
    }

    .btn-success:hover {
        background: #d4edda;
        color: #28a745;
    }

    .btn-danger {
        color: #dc3545;
        background: transparent;
    }

    .btn-danger:hover {
        background: #f8d7da;
        color: #dc3545;
    }

    .btn-warning {
        color: #fd7e14;
        background: transparent;
    }

    .btn-warning:hover {
        background: #fff3cd;
        color: #fd7e14;
    }

    /* ===== Form Controls ===== */
    .form-control {
        border-radius: 8px;
        border: 1px solid #dee2e6;
        font-size: 0.9rem;
        padding: 0.45rem 0.75rem;
        transition: border-color 0.15s ease;
    }

    .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    .form-label {
        font-weight: 500;
        font-size: 0.85rem;
        color: #495057;
        margin-bottom: 0.25rem;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar DataTable Server-side
    const table = $('#comerciantes-table').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 15,
        ajax: {
            url: '{{ route("mercado.comerciantes.table-data") }}',
            type: 'GET',
            data: function(d) {
                // Adicionar filtros à requisição
                d.market_id = $('#market_id').val();
                d.business_type_id = $('#business_type_id').val();
                d.province_id = $('#province_id').val();
                d.municipality_id = $('#municipality_id').val();
                d.status = $('#status').val();
            }
        },
        columns: [
            { data: 'name', name: 'full_name' },
            { data: 'identity_number', name: 'identity_number' },
            { data: 'phone', name: 'phone' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        pageLength: 15,
        language: {
            processing: '<i class="fas fa-spinner fa-spin"></i> Processando...',
            search: '<i class="fas fa-search"></i> Pesquisar:',
            lengthMenu: 'Mostrar _MENU_ registros por página',
            info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
            infoEmpty: 'Mostrando 0 a 0 de 0 registros',
            infoFiltered: '(filtrado de _MAX_ registros no total)',
            loadingRecords: '<i class="fas fa-spinner fa-spin"></i> Carregando...',
            zeroRecords: '<i class="fas fa-database"></i> Nenhum registro encontrado',
            emptyTable: '<i class="fas fa-table"></i> Nenhum dado disponível na tabela',
            paginate: {
                first: '<i class="fas fa-angle-double-left"></i>',
                previous: '<i class="fas fa-angle-left"></i>',
                next: '<i class="fas fa-angle-right"></i>',
                last: '<i class="fas fa-angle-double-right"></i>'
            }
        },
        responsive: true,
        order: [[0, 'asc']],
        drawCallback: function() {
            // Reinicializar tooltips após cada redraw
            initTooltips();
        }
    });

    // Aplicar filtros
    $('#apply-filters').on('click', function(e) {
        e.preventDefault();
        table.ajax.reload();
    });

    // Limpar filtros
    $('#clear-filters').on('click', function() {
        $('#market_id').val('');
        $('#business_type_id').val('');
        $('#province_id').val('');
        $('#municipality_id').val('');
        $('#status').val('');
        table.ajax.reload();
    });

    // Função para inicializar tooltips
    function initTooltips() {
        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
            $('[title]').each(function() {
                const tooltip = bootstrap.Tooltip.getInstance(this);
                if (tooltip) tooltip.dispose();
                new bootstrap.Tooltip(this, { placement: 'top', trigger: 'hover' });
            });
        }
    }
});
</script>
@endpush