@extends('adminlte::page')

@section('title', 'Detalhes da Guia ' . $guia)

@section('content_header')
    <h1>Guia {{ $guia }} – Procedimentos</h1>
@stop

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Procedimentos do atendimento</span>
            <div>
                <a href="{{ route('operacional.producao.detalhesAtendimentoCobranca.index') }}" class="btn btn-secondary btn-sm">Nova consulta</a>
                @php
                    $totalFotos = array_sum(array_column($procedimentos, 'qtd_fotos'));
                @endphp
                @if($totalFotos > 0)
                    <a href="{{ route('operacional.producao.detalhesAtendimentoCobranca.download', ['guia' => $guia]) }}" class="btn btn-success btn-sm" target="_blank">
                        <i class="fas fa-download"></i> Baixar todas as fotos ({{ $totalFotos }})
                    </a>
                @endif
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-striped table-hover mb-0">
                <thead>
                    <tr>
                        <th>Procedimento</th>
                        <th>Dente/Região</th>
                        <th>Faces</th>
                        <th>Quantidade</th>
                        <th>USO</th>
                        <th>Obs. autorizadora</th>
                        <th style="width: 120px;">Itens</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($procedimentos as $p)
                        <tr>
                            <td>{{ $p['codproced'] ?? '' }} – {{ $p['descproced'] ?? '' }}</td>
                            <td>{{ $p['dente'] ?? '-' }}</td>
                            <td>{{ $p['faces'] ?? '-' }}</td>
                            <td>{{ $p['qtd'] ?? '' }}</td>
                            <td>{{ $p['uso'] ?? '' }}</td>
                            <td>{{ $p['wdaie_obs_da_autorizadora'] ?? '-' }}</td>
                            <td class="text-center">
                                @if(($p['qtd_fotos'] ?? 0) > 0)
                                    <button type="button" class="btn btn-sm btn-outline-primary btn-ver-fotos" data-guia="{{ $guia }}" data-sequencia="{{ $p['seq'] ?? '' }}" data-procedimento="{{ $p['descproced'] ?? '' }}">
                                        <i class="fas fa-images"></i> Ver fotos ({{ $p['qtd_fotos'] }})
                                    </button>
                                @else
                                    <span class="text-muted">–</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">Nenhum procedimento encontrado para esta guia.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: Ver fotos do procedimento --}}
<div class="modal fade" id="modalFotos" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFotosTitle">Fotos do procedimento</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="modalFotosBody">
                <p class="text-muted">Carregando...</p>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
(function() {
    const baseUrl = @json(url('/producao/detalhesAtendimentoCobranca/guia'));
    const guia = @json($guia);

    document.querySelectorAll('.btn-ver-fotos').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const seq = this.dataset.sequencia;
            const procedimento = this.dataset.procedimento;
            const url = baseUrl + '/' + guia + '/fotos?sequencia=' + encodeURIComponent(seq);
            document.getElementById('modalFotosTitle').textContent = 'Fotos – ' + procedimento;
            document.getElementById('modalFotosBody').innerHTML = '<p class="text-muted">Carregando...</p>';
            $('#modalFotos').modal('show');
            fetch(url)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data.fotos || data.fotos.length === 0) {
                        document.getElementById('modalFotosBody').innerHTML = '<p class="text-muted">Nenhuma foto encontrada.</p>';
                        return;
                    }
                    let html = '<div class="row">';
                    data.fotos.forEach(function(f) {
                        const urlImg = f.endereco;
                        const isImg = /\.(jpe?g|png|gif|bmp|webp)$/i.test(urlImg) || (urlImg && !urlImg.endsWith('.pdf'));
                        if (isImg && urlImg.indexOf('http') === 0) {
                            html += '<div class="col-6 col-md-4 mb-3"><div class="card"><img src="' + urlImg + '" class="card-img-top" style="max-height:200px;object-fit:contain" onerror="this.style.display=\'none\'"><div class="card-body py-2"><small>' + (f.tipo || '') + '</small><br><a href="' + urlImg + '" target="_blank" class="btn btn-sm btn-link p-0">Abrir</a></div></div></div>';
                        } else {
                            html += '<div class="col-6 col-md-4 mb-3"><div class="card"><div class="card-body"><small>' + (f.tipo || '') + '</small><br><a href="' + urlImg + '" target="_blank" class="btn btn-sm btn-primary">Abrir / Baixar</a></div></div></div>';
                        }
                    });
                    html += '</div>';
                    document.getElementById('modalFotosBody').innerHTML = html;
                })
                .catch(function() {
                    document.getElementById('modalFotosBody').innerHTML = '<p class="text-danger">Erro ao carregar fotos.</p>';
                });
        });
    });
})();
</script>
@stop