@php
$title = 'Visualizar Serviço';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}`)" class="text-decoration-none text-secondary">Serviços</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Visualizar Serviço</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-eye me-2 text-primary"></i>Detalhes
            </h1>
            <span class="text-muted small">Detalhes completos do serviço</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger me-2" onclick="excluir(`{{ route('servicos.destroy', ['id' => $servico->id]) }}`)">
                <i class="bi bi-trash me-2"></i>Excluir
            </button>
            <button type="button" class="btn btn-sm btn-primary" onclick="carregarConteudo(`{{ route('cadastro.servicos.editar', ['id' => $servico->id]) }}`)">
                <i class="bi bi-pencil-square me-2"></i>Editar
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Detalhes do Serviço</span>
        </div>
        <div class="card-body">

            <div class="form-container">
                <div class="row mb-2">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Código:</label>
                        <p>{{ $servico->codigo ?? '-' }}</p>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-bold">Nome do Serviço:</label>
                        <p>{{ $servico->nome ?? '-' }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Tipo de Serviço:</label>
                        <p>{{ $servico->tipoServico->nome ?? '-' }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Unidade:</label>
                        <p>{{ $servico->unidadeMedida->unidade ?? '-' }}</p>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Valor de Venda:</label>
                        <p>R$ {{ isset($servico) ? number_format($servico->valor_venda, 2, ',', '.') : '-' }}</p>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Valor de Custo:</label>
                        <p>R$ {{ isset($servico) ? number_format($servico->valor_custo, 2, ',', '.') : '-' }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label fw-bold">Descrição:</label>
                        <p>{{ $servico->descricao ?? '-' }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Status:</label>
                        <p>
                            @if(isset($servico) && $servico->status === 'ativo')
                            <span class="badge bg-success">Ativo</span>
                            @else
                            <span class="badge bg-danger">Inativo</span>
                            @endif
                        </p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Data de Cadastro:</label>
                        <p>{{ isset($servico) ? $servico->created_at->format('d/m/Y') : '-' }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Última Atualização:</label>
                        <p>{{ isset($servico) ? $servico->updated_at->format('d/m/Y') : '-' }}</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>