@extends('layouts.app')

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

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-user-circle"></i>
                {{ $comerciante->full_name }}
            </h4>
            <div class="d-flex gap-2">
                @if($comerciante->status === 'pending')
                    <form action="{{ route('mercado.comerciantes.approve', $comerciante) }}" method="POST" class="d-inline">
                        @csrf
                        <input type="hidden" name="approved_by" value="{{ auth()->id() }}">
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="fas fa-check-circle"></i>
                            Aprovar
                        </button>
                    </form>
                @endif

                @if($comerciante->status === 'active')
                    <form action="{{ route('mercado.comerciantes.block', $comerciante) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-danger btn-sm">
                            <i class="fas fa-ban"></i>
                            Bloquear
                        </button>
                    </form>
                @elseif($comerciante->status === 'suspended' || $comerciante->status === 'blocked')
                    <form action="{{ route('mercado.comerciantes.unblock', $comerciante) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-warning btn-sm">
                            <i class="fas fa-unlock-alt"></i>
                            Desbloquear
                        </button>
                    </form>
                @endif

                <a href="{{ route('mercado.comerciantes.edit', $comerciante) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-edit"></i>
                    Editar
                </a>
                <a href="{{ route('mercado.comerciantes.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-7">
                    <!-- Informações Pessoais -->
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-user"></i>
                            Informações Pessoais
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Nome Completo</th>
                                <td>{{ $comerciante->full_name }}</td>
                            </tr>
                            <tr>
                                <th>Tipo de Negócio</th>
                                <td>{{ $comerciante->businessType->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Data de Nascimento</th>
                                <td>{{ $comerciante->birth_date ? $comerciante->birth_date->format('d/m/Y') : '-' }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Documentos -->
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-id-card"></i>
                            Documentos
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Nº Identidade</th>
                                <td>{{ $comerciante->identity_number }}</td>
                            </tr>
                            <tr>
                                <th>Tipo de Identidade</th>
                                <td>{{ $comerciante->identity_type }}</td>
                            </tr>
                            <tr>
                                <th>Nº Cartão RFID</th>
                                <td>{{ $comerciante->card_number ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Licença -->
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-certificate"></i>
                            Licença
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Número da Licença</th>
                                <td>{{ $comerciante->license_number ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Data de Criação</th>
                                <td>{{ $comerciante->license_created_at ? $comerciante->license_created_at->format('d/m/Y') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Data de Aprovação</th>
                                <td>{{ $comerciante->license_approved_at ? $comerciante->license_approved_at->format('d/m/Y') : '-' }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Contactos -->
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-address-card"></i>
                            Contactos
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Telefone</th>
                                <td>{{ $comerciante->phone }}</td>
                            </tr>
                            <tr>
                                <th>Telefone Alternativo</th>
                                <td>{{ $comerciante->alternate_phone ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>{{ $comerciante->email ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Endereço</th>
                                <td>{{ $comerciante->address }}</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Status e Aprovação -->
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-chart-line"></i>
                            Status e Aprovação
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Status</th>
                                <td>
                                    @php
                                        $statusClasses = [
                                            'active' => 'badge-success',
                                            'approved' => 'badge-info',
                                            'pending' => 'badge-warning',
                                            'suspended' => 'badge-danger',
                                            'blocked' => 'badge-danger',
                                        ];
                                        $statusTexts = [
                                            'active' => 'Ativo',
                                            'approved' => 'Aprovado',
                                            'pending' => 'Pendente',
                                            'suspended' => 'Suspenso',
                                            'blocked' => 'Bloqueado',
                                        ];
                                        $statusIcons = [
                                            'active' => 'fa-check-circle',
                                            'approved' => 'fa-check-circle',
                                            'pending' => 'fa-clock',
                                            'suspended' => 'fa-ban',
                                            'blocked' => 'fa-ban',
                                        ];
                                    @endphp
                                    <span class="badge {{ $statusClasses[$comerciante->status] ?? 'badge-neutral' }}">
                                        <i class="fas {{ $statusIcons[$comerciante->status] ?? 'fa-circle' }}"></i>
                                        {{ $statusTexts[$comerciante->status] ?? $comerciante->status }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Aprovado por</th>
                                <td>{{ $comerciante->approvedBy->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Aprovado em</th>
                                <td>{{ $comerciante->approved_at ? $comerciante->approved_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="col-md-5">
                    <!-- Foto -->
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-camera"></i>
                            Foto
                        </h5>
                        @if($comerciante->photo_url)
                            <img src="{{ $comerciante->photo_url }}" alt="Foto do Comerciante" class="merchant-photo">
                        @else
                            <div class="empty-photo">
                                <i class="fas fa-user-circle"></i>
                                <p>Sem foto cadastrada</p>
                            </div>
                        @endif
                    </div>

                    <!-- Cartão RFID (resumo) -->
                    @if($comerciante->card_number)
                    <div class="info-section mb-4">
                        <h5 class="info-section-title">
                            <i class="fas fa-id-card"></i>
                            Cartão RFID
                        </h5>
                        <div class="rfid-card-info">
                            <div class="rfid-number">
                                <span class="rfid-label">Número:</span>
                                <span class="rfid-value">{{ $comerciante->card_number }}</span>
                            </div>
                            @if($comerciante->rfidCard)
                                <div class="rfid-status">
                                    <span class="badge badge-{{ $comerciante->rfidCard->status === 'active' ? 'success' : 'danger' }}">
                                        {{ $comerciante->rfidCard->status === 'active' ? 'Ativo' : 'Inativo' }}
                                    </span>
                                </div>
                            @endif
                        </div>
                    </div>
                    @endif

                    <!-- Metadados -->
                    @if($comerciante->metadata)
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-database"></i>
                            Metadados
                        </h5>
                        <pre class="metadata-pre">{{ json_encode($comerciante->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .info-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        border-left: 4px solid #0d6efd;
    }

    .info-section-title {
        font-size: 1rem;
        font-weight: 600;
        color: #0d6efd;
        margin-bottom: 1rem;
    }

    .info-section-title i {
        margin-right: 0.5rem;
    }

    .info-table {
        width: 100%;
        font-size: 0.9rem;
    }

    .info-table tr {
        border-bottom: 1px solid #e9ecef;
    }

    .info-table tr:last-child {
        border-bottom: none;
    }

    .info-table th {
        width: 35%;
        padding: 0.5rem 0.75rem 0.5rem 0;
        color: #6c757d;
        font-weight: 500;
        text-align: left;
    }

    .info-table td {
        padding: 0.5rem 0;
        color: #212529;
        font-weight: 400;
    }

    .badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        font-weight: 500;
        border-radius: 20px;
    }

    .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;
    }

    .merchant-photo {
        width: 100%;
        max-width: 300px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin: 0 auto;
        display: block;
    }

    .empty-photo {
        text-align: center;
        padding: 2rem 0;
        color: #6c757d;
    }

    .empty-photo i {
        font-size: 4rem;
        display: block;
        margin-bottom: 0.5rem;
    }

    .empty-photo p {
        margin: 0;
        font-size: 0.9rem;
    }

    .metadata-pre {
        background: #e9ecef;
        padding: 1rem;
        border-radius: 4px;
        font-size: 0.8rem;
        max-height: 200px;
        overflow: auto;
        white-space: pre-wrap;
        word-break: break-all;
        margin: 0;
    }

    .rfid-card-info {
        background: #fff;
        border-radius: 8px;
        padding: 1rem;
        border: 1px solid #dee2e6;
    }

    .rfid-number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .rfid-label {
        color: #6c757d;
        font-weight: 500;
    }

    .rfid-value {
        font-family: monospace;
        font-size: 1.1rem;
        font-weight: 600;
        color: #0d6efd;
        letter-spacing: 1px;
    }

    .rfid-status {
        text-align: center;
        padding-top: 0.5rem;
        border-top: 1px solid #e9ecef;
    }
</style>
@endpush