@extends('layouts.app')

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

@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>
                {{ $escamador->full_name }}
            </h4>
            <div class="d-flex gap-2">
                @if($escamador->status === 'pending')
                    <form action="{{ route('mercado.escamadores.approve', $escamador) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="fas fa-check-circle"></i>
                            Aprovar
                        </button>
                    </form>
                @endif

                @if($escamador->status === 'active')
                    <form action="{{ route('mercado.escamadores.suspend', $escamador) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-warning btn-sm">
                            <i class="fas fa-ban"></i>
                            Suspender
                        </button>
                    </form>
                @elseif($escamador->status === 'suspended')
                    <form action="{{ route('mercado.escamadores.activate', $escamador) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="fas fa-play-circle"></i>
                            Ativar
                        </button>
                    </form>
                @endif

                <a href="{{ route('mercado.escamadores.edit', $escamador) }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-edit"></i>
                    Editar
                </a>
                <a href="{{ route('mercado.escamadores.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-user"></i>
                            Informações Pessoais
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Nome Completo</th>
                                <td>{{ $escamador->full_name }}</td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>{{ $escamador->user->email ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Nº Badge</th>
                                <td>{{ $escamador->badge_number }}</td>
                            </tr>
                            <tr>
                                <th>Telefone</th>
                                <td>{{ $escamador->phone }}</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td>
                                    @php
                                        $statusClass = $escamador->status === 'active' ? 'badge-success' : ($escamador->status === 'pending' ? 'badge-warning' : 'badge-danger');
                                        $statusIcon = $escamador->status === 'active' ? 'fa-check-circle' : ($escamador->status === 'pending' ? 'fa-clock' : 'fa-ban');
                                        $statusText = $escamador->status === 'active' ? 'Ativo' : ($escamador->status === 'pending' ? 'Pendente' : ucfirst($escamador->status));
                                    @endphp
                                    <span class="badge {{ $statusClass }}">
                                        <i class="fas {{ $statusIcon }}"></i>
                                        {{ $statusText }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Endereço</th>
                                <td>{{ json_decode($escamador->metadata ?? '{}', true)['address'] ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="info-section">
                        <h5 class="info-section-title">
                            <i class="fas fa-store"></i>
                            Mercados de Atuação
                        </h5>
                        <table class="info-table">
                            <tr>
                                <th>Mercados</th>
                                <td>
                                    @forelse($escamador->markets as $market)
                                        <span class="badge-market">
                                            <i class="fas fa-store"></i> {{ $market->name }}
                                        </span>
                                    @empty
                                        <span class="text-muted">Nenhum mercado atribuído</span>
                                    @endforelse
                                </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>{{ $escamador->created_at ? $escamador->created_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Última atualização</th>
                                <td>{{ $escamador->updated_at ? $escamador->updated_at->format('d/m/Y H:i') : '-' }}</td>
                            </tr>
                            @if($escamador->approved_at)
                            <tr>
                                <th>Aprovado em</th>
                                <td>{{ $escamador->approved_at ? date('d/m/Y H:i', strtotime($escamador->approved_at)) : '-' }}</td>
                            </tr>
                            @endif
                            @if($escamador->approved_by)
                            <tr>
                                <th>Aprovado por</th>
                                <td>{{ $escamador->approver->name ?? '-' }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </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);
    }

    .badge-market {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        background: #dbeafe;
        color: #1e40af;
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        margin: 0.125rem;
    }

    .badge-market i {
        font-size: 0.65rem;
    }
</style>
@endpush
