@extends('layouts.app')

@section('css')
<style>
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        padding: 24px;
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        transition: transform 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        display: block;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        color: white;
    }
    
    .stats-card.success {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }
    
    .stats-card.warning {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .stats-card.info {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .boleto-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 4px solid #667eea;
    }
    
    .boleto-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        transform: translateX(4px);
    }
    
    .boleto-card.liquidado {
        border-left-color: #38ef7d;
    }
    
    .boleto-card.baixado {
        border-left-color: #f5576c;
    }
    
    .status-badge {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .status-registrado {
        background: #e3f2fd;
        color: #1976d2;
    }
    
    .status-liquidado {
        background: #e8f5e9;
        color: #388e3c;
    }
    
    .status-baixado {
        background: #fce4ec;
        color: #c2185b;
    }
    
    .filter-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 24px;
    }
    
    .btn-action {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    
    .btn-primary-custom {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .btn-primary-custom:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .btn-success-custom {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        color: white;
    }
    
    .btn-danger-custom {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1" style="font-weight: 800; color: #2d3748;">
                        <i class="fas fa-file-invoice-dollar text-primary"></i> Boletos Sicoob
                    </h2>
                    <p class="text-muted mb-0">Gerencie todos os boletos gerados via API Sicoob</p>
                </div>
                <div>
                    <a href="{{ route('sicoob.config') }}" class="btn btn-outline-primary">
                        <i class="fas fa-cog"></i> Configurações
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <a href="{{ route('sicoob.boletos') }}" class="stats-card">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1" style="opacity: 0.9; font-size: 14px;">Total de Boletos</p>
                        <h3 class="mb-0" style="font-weight: 800; font-size: 32px;">{{ $stats['total'] }}</h3>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 12px;">
                        <i class="fas fa-file-invoice text-white" style="font-size: 24px;"></i>
                    </div>
                </div>
            </a>
        </div>
        
        <div class="col-md-3">
            <a href="{{ route('sicoob.boletos', ['status' => 'registrado']) }}" class="stats-card info">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1" style="opacity: 0.9; font-size: 14px;">Registrados</p>
                        <h3 class="mb-0" style="font-weight: 800; font-size: 32px;">{{ $stats['registrados'] }}</h3>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 12px;">
                        <i class="fas fa-clock text-white" style="font-size: 24px;"></i>
                    </div>
                </div>
            </a>
        </div>
        
        <div class="col-md-3">
            <a href="{{ route('sicoob.boletos', ['status' => 'liquidado']) }}" class="stats-card success">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1" style="opacity: 0.9; font-size: 14px;">Liquidados</p>
                        <h3 class="mb-0" style="font-weight: 800; font-size: 32px;">{{ $stats['liquidados'] }}</h3>
                        <p class="mb-0 mt-1" style="font-size: 12px; opacity: 0.9;">
                            R$ {{ number_format($stats['valor_liquidado'], 2, ',', '.') }}
                        </p>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 12px;">
                        <i class="fas fa-check-circle text-white" style="font-size: 24px;"></i>
                    </div>
                </div>
            </a>
        </div>
        
        <div class="col-md-3">
            <a href="{{ route('sicoob.boletos', ['status' => 'baixado']) }}" class="stats-card warning">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1" style="opacity: 0.9; font-size: 14px;">Baixados</p>
                        <h3 class="mb-0" style="font-weight: 800; font-size: 32px;">{{ $stats['baixados'] }}</h3>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 12px;">
                        <i class="fas fa-times-circle text-white" style="font-size: 24px;"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="filter-card">
        <form method="GET" action="{{ route('sicoob.boletos') }}">
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label fw-bold">Status</label>
                    <select name="status" class="form-select">
                        <option value="">Todos</option>
                        <option value="registrado" {{ request('status') == 'registrado' ? 'selected' : '' }}>Registrado</option>
                        <option value="liquidado" {{ request('status') == 'liquidado' ? 'selected' : '' }}>Liquidado</option>
                        <option value="baixado" {{ request('status') == 'baixado' ? 'selected' : '' }}>Baixado</option>
                    </select>
                </div>
                
                <div class="col-md-3">
                    <label class="form-label fw-bold">Número do Boleto</label>
                    <input type="text" name="external_id" class="form-control" placeholder="Digite o número" value="{{ request('external_id') }}">
                </div>
                
                <div class="col-md-2">
                    <label class="form-label fw-bold">Data Início</label>
                    <input type="date" name="data_inicio" class="form-control" value="{{ request('data_inicio') }}">
                </div>
                
                <div class="col-md-2">
                    <label class="form-label fw-bold">Data Fim</label>
                    <input type="date" name="data_fim" class="form-control" value="{{ request('data_fim') }}">
                </div>
                
                <div class="col-md-2">
                    <label class="form-label fw-bold">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary-custom btn-action flex-fill">
                            <i class="fas fa-search"></i> Filtrar
                        </button>
                        <a href="{{ route('sicoob.boletos') }}" class="btn btn-outline-secondary btn-action">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <!-- Boletos List -->
    <div class="row">
        <div class="col-12">
            @if($boletos->count() > 0)
                @foreach($boletos as $boleto)
                <div class="boleto-card {{ $boleto->status }}">
                    <div class="row align-items-center">
                        <div class="col-md-2">
                            <div class="mb-2">
                                <small class="text-muted d-block" style="font-size: 11px; font-weight: 600;">NÚMERO DO BOLETO</small>
                                <strong style="font-size: 16px; color: #2d3748;">{{ $boleto->external_id }}</strong>
                            </div>
                        </div>
                        
                        <div class="col-md-2">
                            <div class="mb-2">
                                <small class="text-muted d-block" style="font-size: 11px; font-weight: 600;">VALOR</small>
                                <strong style="font-size: 18px; color: #667eea;">R$ {{ number_format($boleto->valor, 2, ',', '.') }}</strong>
                            </div>
                        </div>
                        
                        <div class="col-md-2">
                            <div class="mb-2">
                                <small class="text-muted d-block" style="font-size: 11px; font-weight: 600;">STATUS</small>
                                <span class="status-badge status-{{ $boleto->status }}">
                                    @if($boleto->status == 'registrado')
                                        <i class="fas fa-clock"></i> Registrado
                                    @elseif($boleto->status == 'liquidado')
                                        <i class="fas fa-check-circle"></i> Liquidado
                                    @else
                                        <i class="fas fa-times-circle"></i> Baixado
                                    @endif
                                </span>
                            </div>
                        </div>
                        
                        <div class="col-md-2">
                            <div class="mb-2">
                                <small class="text-muted d-block" style="font-size: 11px; font-weight: 600;">DATA CRIAÇÃO</small>
                                <strong style="font-size: 14px; color: #2d3748;">{{ $boleto->created_at->format('d/m/Y H:i') }}</strong>
                            </div>
                        </div>
                        
                        <div class="col-md-4 text-end">
                            <div class="d-flex gap-2 justify-content-end">
                                <button type="button" class="btn btn-primary-custom btn-action btn-consultar" data-id="{{ $boleto->external_id }}">
                                    <i class="fas fa-search"></i> Consultar
                                </button>
                                
                                @if($boleto->status == 'registrado')
                                <button type="button" class="btn btn-success-custom btn-action btn-baixar" data-id="{{ $boleto->external_id }}">
                                    <i class="fas fa-download"></i> Baixar
                                </button>
                                @endif
                                
                                <button type="button" class="btn btn-outline-secondary btn-action btn-detalhes" data-payload="{{ htmlspecialchars(json_encode(json_decode($boleto->payload, true)), ENT_QUOTES, 'UTF-8') }}">
                                    <i class="fas fa-info-circle"></i> Detalhes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                
                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    {{ $boletos->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-file-invoice" style="font-size: 64px; color: #cbd5e0;"></i>
                    </div>
                    <h4 class="text-muted">Nenhum boleto encontrado</h4>
                    <p class="text-muted">Gere seu primeiro boleto para começar</p>
                </div>
            @endif
        </div>
    </div>
    
</div>

<!-- Modal Detalhes -->
<div class="modal fade" id="modalDetalhes" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius: 16px; border: none;">
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 16px 16px 0 0;">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-info-circle"></i> Detalhes do Boleto
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <pre id="detalhesContent" style="background: #f7fafc; padding: 20px; border-radius: 8px; max-height: 500px; overflow-y: auto;"></pre>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
$(document).ready(function() {
    
    // Consultar Boleto
    $('.btn-consultar').click(function() {
        const externalId = $(this).data('id');
        const btn = $(this);
        
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Consultando...');
        
        $.ajax({
            url: '/api/sicoob/consultar-boleto',
            method: 'POST',
            data: {
                external_id: externalId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Boleto Consultado',
                    html: `
                        <div class="text-start">
                            <p><strong>Número:</strong> ${response.numero || externalId}</p>
                            <p><strong>Valor:</strong> R$ ${parseFloat(response.valor || 0).toFixed(2).replace('.', ',')}</p>
                            <p><strong>Situação:</strong> ${response.situacao || response.status || 'N/A'}</p>
                            ${response.linhaDigitavel ? `<p><strong>Linha Digitável:</strong><br><code>${response.linhaDigitavel}</code></p>` : ''}
                        </div>
                    `,
                    confirmButtonText: 'Fechar'
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro ao Consultar',
                    text: xhr.responseJSON?.error || 'Erro desconhecido',
                    confirmButtonText: 'Fechar'
                });
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-search"></i> Consultar');
            }
        });
    });
    
    // Baixar Boleto
    $('.btn-baixar').click(function() {
        const externalId = $(this).data('id');
        const btn = $(this);
        
        Swal.fire({
            title: 'Confirmar Baixa',
            text: 'Deseja realmente dar baixa neste boleto?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sim, baixar',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: '#38ef7d',
            cancelButtonColor: '#f5576c'
        }).then((result) => {
            if (result.isConfirmed) {
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Baixando...');
                
                $.ajax({
                    url: '/api/sicoob/baixar-boleto',
                    method: 'POST',
                    data: {
                        external_id: externalId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Boleto Baixado',
                            text: 'O boleto foi baixado com sucesso!',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erro ao Baixar',
                            text: xhr.responseJSON?.error || 'Erro desconhecido',
                            confirmButtonText: 'Fechar'
                        });
                        btn.prop('disabled', false).html('<i class="fas fa-download"></i> Baixar');
                    }
                });
            }
        });
    });
    
    // Ver Detalhes
    $('.btn-detalhes').click(function() {
        const payload = $(this).data('payload');
        $('#detalhesContent').text(JSON.stringify(payload, null, 2));
        $('#modalDetalhes').modal('show');
    });
    
});
</script>
@endsection