@extends('layouts.app')

@section('title', 'Detalhes do Mercado')

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-store"></i>
                {{ $mercado->name }}
            </h4>
            <div class="d-flex gap-2">
                <a href="{{ route('mercado.mercados.bancadas', $mercado) }}" class="btn btn-outline-info btn-sm">
                    <i class="fas fa-grid-3x3-gap"></i>
                    Bancadas ({{ $statistics['total_stalls'] }})
                </a>
                <a href="{{ route('mercado.mercados.comerciantes', $mercado) }}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-users"></i>
                    Comerciantes
                </a>
                <a href="{{ route('mercado.mercados.fiscais', $mercado) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-user-shield"></i>
                    Fiscais ({{ $statistics['active_fiscals'] }})
                </a>
                <a href="{{ route('mercado.mercados.edit', $mercado) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-edit"></i>
                    Editar
                </a>
                <a href="{{ route('mercado.mercados.index') }}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-arrow-left"></i>
                    Voltar
                </a>
            </div>
        </div>

        <div class="s-card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-building"></i>
                            Informações Gerais
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Nome</th>
                                <td>{{ $mercado->name }}</td>
                            </tr>
                            <tr>
                                <th>Localização</th>
                                <td>{{ $mercado->location }}</td>
                            </tr>
                            <tr>
                                <th>Endereço</th>
                                <td>{{ $mercado->address ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Bairro</th>
                                <td>{{ $mercado->neighborhood->name ?? '-' }} ({{
                                    $mercado->neighborhood->municipality->name ?? '-'
                                }} - {{
                                    $mercado->neighborhood->municipality->province->name ?? '-'
                                }})</td>
                            </tr>
                            <tr>
                                <th>Capacidade</th>
                                <td>{{ $mercado->capacity ?? '-' }} bancadas</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td>
                                    <span class="badge {{ $mercado->status === 'active' ? 'badge-success' : 'badge-danger' }}">
                                        <i class="fas {{ $mercado->status === 'active' ? 'fa-check-circle' : 'fa-ban' }}"></i>
                                        {{ $mercado->status === 'active' ? 'Ativo' : 'Inativo' }}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-phone"></i>
                            Contactos
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Telefone</th>
                                <td>{{ $mercado->contact_phone ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>{{ $mercado->contact_email ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-chart-pie"></i>
                            Estatísticas
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Total de Bancadas</th>
                                <td>{{ $statistics['total_stalls'] }}</td>
                            </tr>
                            <tr>
                                <th>Bancadas Ocupadas</th>
                                <td>{{ $statistics['occupied_stalls'] }}</td>
                            </tr>
                            <tr>
                                <th>Bancadas Disponíveis</th>
                                <td>{{ $statistics['available_stalls'] }}</td>
                            </tr>
                            <tr>
                                <th>Bancadas em Manutenção</th>
                                <td>{{ $statistics['maintenance_stalls'] ?? 0 }}</td>
                            </tr>
                            <tr>
                                <th>Taxa de Ocupação</th>
                                <td>
                                    <div class="progress-bar-container">
                                        <div class="progress">
                                            <div class="progress-fill" style="width: {{ $statistics['occupation_rate'] }}%"></div>
                                        </div>
                                        <span class="ms-2">{{ $statistics['occupation_rate'] }}%</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>Receita Mensal Estimada</th>
                                <td>KZ {{ number_format($statistics['monthly_revenue'] ?? 0, 2, ',', '.') }}</td>
                            </tr>
                        </table>
                    </div>

                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-calendar-alt"></i>
                            Datas
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Criado em</th>
                                <td>{{ $mercado->created_at ? $mercado->created_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Última atualização</th>
                                <td>{{ $mercado->updated_at ? $mercado->updated_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            @if($mercado->administration)
            <div class="row mt-3">
                <div class="col-12">
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-users-cog"></i>
                            Administração
                        </h5>
                        <pre class="administration-preview">{{ json_encode($mercado->administration, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .info-section {
        margin-bottom: 1.5rem;
    }

    .info-section-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary, #1a1a2e);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--sinagem-red, #e03030);
        display: inline-block;
    }

    .info-section-title i {
        color: var(--sinagem-red, #e03030);
        margin-right: 0.5rem;
    }

    .info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .info-table tr {
        border-bottom: 1px solid var(--border-light, #f1f5f9);
    }

    .info-table th {
        width: 35%;
        padding: 0.75rem 0;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary, #6b7280);
        text-align: left;
    }

    .info-table td {
        width: 65%;
        padding: 0.75rem 0;
        font-size: 0.85rem;
        color: var(--text-primary, #1a1a2e);
    }

    .progress-bar-container {
        display: flex;
        align-items: center;
    }

    .progress {
        flex: 1;
        height: 8px;
        background: var(--border-light, #e5e7eb);
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(135deg, var(--sinagem-red, #e03030) 0%, var(--sinagem-red-dark, #c02020) 100%);
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .administration-preview {
        background: var(--bg-table-alt, #f8fafc);
        padding: 1rem;
        border-radius: var(--radius-sm, 6px);
        font-size: 0.7rem;
        overflow-x: auto;
    }
</style>
@endpush
