@extends('adm-embarcador.layout')

@section('title', 'Minhas Cotações - Adm do Embarcados')

@section('content')
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-list me-2"></i>
                        Minhas Cotações
                    </h1>
                    <p class="text-muted mb-0">Gerencie todas as suas solicitações de cotação</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('adm-embarcador.nova-cotacao') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus me-1"></i>
                        Nova Cotação
                    </a>
                    <button class="btn btn-outline-secondary btn-sm" onclick="exportarDados()">
                        <i class="fas fa-download me-1"></i>
                        Exportar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros e Estatísticas -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label for="filtroStatus" class="form-label">Status</label>
                            <select class="form-select" id="filtroStatus">
                                <option value="">Todos</option>
                                <option value="pendente">Pendente</option>
                                <option value="respondida">Respondida</option>
                                <option value="aprovada">Aprovada</option>
                                <option value="rejeitada">Rejeitada</option>
                                <option value="expirada">Expirada</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="filtroData" class="form-label">Período</label>
                            <select class="form-select" id="filtroData">
                                <option value="">Todos</option>
                                <option value="7">Últimos 7 dias</option>
                                <option value="30">Últimos 30 dias</option>
                                <option value="90">Últimos 3 meses</option>
                                <option value="365">Último ano</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="filtroRota" class="form-label">Rota</label>
                            <select class="form-select" id="filtroRota">
                                <option value="">Todas</option>
                                <option value="sp-rj">SP → RJ</option>
                                <option value="mg-sp">MG → SP</option>
                                <option value="rs-pr">RS → PR</option>
                                <option value="ba-pe">BA → PE</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="filtroBusca" class="form-label">Buscar</label>
                            <input type="text" class="form-control" id="filtroBusca" placeholder="Código, origem, destino...">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="row">
                <div class="col-6 mb-3">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                        Total
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">156</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        Aprovadas
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">89</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="card border-left-warning shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                        Pendentes
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">23</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-clock fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        Economia
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">R$ 12.450</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela de Cotações -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">Cotações</h6>
            <div class="dropdown no-arrow">
                <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                    <div class="dropdown-header">Ações:</div>
                    <a class="dropdown-item" href="#" onclick="exportarDados()">
                        <i class="fas fa-download fa-sm fa-fw mr-2 text-gray-400"></i>
                        Exportar
                    </a>
                    <a class="dropdown-item" href="#" onclick="imprimirRelatorio()">
                        <i class="fas fa-print fa-sm fa-fw mr-2 text-gray-400"></i>
                        Imprimir
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" onclick="configurarFiltros()">
                        <i class="fas fa-cog fa-sm fa-fw mr-2 text-gray-400"></i>
                        Configurar Filtros
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="cotacoesTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Origem</th>
                            <th>Destino</th>
                            <th>Peso</th>
                            <th>Valor</th>
                            <th>Status</th>
                            <th>Data</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>#1234</td>
                            <td>São Paulo, SP</td>
                            <td>Rio de Janeiro, RJ</td>
                            <td>500 kg</td>
                            <td>R$ 850,00</td>
                            <td><span class="badge badge-success">Aprovada</span></td>
                            <td>15/01/2024</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('1234')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-success" onclick="aprovarCotacao('1234')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="duplicarCotacao('1234')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>#1235</td>
                            <td>Belo Horizonte, MG</td>
                            <td>São Paulo, SP</td>
                            <td>750 kg</td>
                            <td>R$ 1.200,00</td>
                            <td><span class="badge badge-warning">Pendente</span></td>
                            <td>14/01/2024</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('1235')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="cancelarCotacao('1235')">
                                    <i class="fas fa-times"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="duplicarCotacao('1235')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>#1236</td>
                            <td>Porto Alegre, RS</td>
                            <td>Curitiba, PR</td>
                            <td>300 kg</td>
                            <td>R$ 650,00</td>
                            <td><span class="badge badge-success">Aprovada</span></td>
                            <td>13/01/2024</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('1236')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-success" onclick="aprovarCotacao('1236')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="duplicarCotacao('1236')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>#1237</td>
                            <td>Salvador, BA</td>
                            <td>Recife, PE</td>
                            <td>400 kg</td>
                            <td>R$ 950,00</td>
                            <td><span class="badge badge-danger">Rejeitada</span></td>
                            <td>12/01/2024</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('1237')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-warning" onclick="revisarCotacao('1237')">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="duplicarCotacao('1237')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>#1238</td>
                            <td>Brasília, DF</td>
                            <td>Goiânia, GO</td>
                            <td>200 kg</td>
                            <td>R$ 450,00</td>
                            <td><span class="badge badge-info">Respondida</span></td>
                            <td>11/01/2024</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('1238')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-success" onclick="aprovarCotacao('1238')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="duplicarCotacao('1238')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('extra_js')
<script>
    $(document).ready(function() {
        // Inicializar DataTable
        $('#cotacoesTable').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Portuguese-Brasil.json"
            },
            "order": [[6, "desc"]], // Ordenar por data decrescente
            "pageLength": 25,
            "responsive": true
        });

        // Filtros
        $('#filtroStatus, #filtroData, #filtroRota').on('change', aplicarFiltros);
        $('#filtroBusca').on('keyup', aplicarFiltros);
    });

    function aplicarFiltros() {
        const status = $('#filtroStatus').val();
        const data = $('#filtroData').val();
        const rota = $('#filtroRota').val();
        const busca = $('#filtroBusca').val();

        // Simulação de filtros
        console.log('Aplicando filtros:', { status, data, rota, busca });

        // Aqui você aplicaria os filtros na tabela
        // Por enquanto, apenas mostra um alerta
        if (status || data || rota || busca) {
            Swal.fire({
                title: 'Filtros Aplicados',
                text: 'Os filtros foram aplicados com sucesso!',
                icon: 'success',
                timer: 1500,
                showConfirmButton: false
            });
        }
    }

    function verDetalhes(codigo) {
        Swal.fire({
            title: `Detalhes da Cotação #${codigo}`,
            html: `
                <div class="text-left">
                    <p><strong>Origem:</strong> São Paulo, SP</p>
                    <p><strong>Destino:</strong> Rio de Janeiro, RJ</p>
                    <p><strong>Peso:</strong> 500 kg</p>
                    <p><strong>Volume:</strong> 2.5 m³</p>
                    <p><strong>Valor:</strong> R$ 850,00</p>
                    <p><strong>Status:</strong> Aprovada</p>
                    <p><strong>Data:</strong> 15/01/2024</p>
                </div>
            `,
            icon: 'info',
            confirmButtonText: 'Fechar'
        });
    }

    function aprovarCotacao(codigo) {
        Swal.fire({
            title: 'Aprovar Cotação?',
            text: `Deseja aprovar a cotação #${codigo}?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sim, aprovar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Aprovada!',
                    text: 'Cotação aprovada com sucesso.',
                    icon: 'success'
                });
            }
        });
    }

    function cancelarCotacao(codigo) {
        Swal.fire({
            title: 'Cancelar Cotação?',
            text: `Deseja cancelar a cotação #${codigo}?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sim, cancelar',
            cancelButtonText: 'Não'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Cancelada!',
                    text: 'Cotação cancelada com sucesso.',
                    icon: 'success'
                });
            }
        });
    }

    function duplicarCotacao(codigo) {
        Swal.fire({
            title: 'Duplicar Cotação?',
            text: `Deseja criar uma nova cotação baseada na #${codigo}?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sim, duplicar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = '{{ route("adm-embarcador.nova-cotacao") }}';
            }
        });
    }

    function revisarCotacao(codigo) {
        Swal.fire({
            title: 'Revisar Cotação?',
            text: `Deseja revisar a cotação #${codigo}?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sim, revisar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = '{{ route("adm-embarcador.nova-cotacao") }}';
            }
        });
    }

    function exportarDados() {
        Swal.fire({
            title: 'Exportando...',
            text: 'Preparando arquivo para download',
            icon: 'info',
            timer: 2000,
            showConfirmButton: false
        }).then(() => {
            Swal.fire({
                title: 'Exportado!',
                text: 'Arquivo exportado com sucesso.',
                icon: 'success'
            });
        });
    }

    function imprimirRelatorio() {
        window.print();
    }

    function configurarFiltros() {
        Swal.fire({
            title: 'Configurar Filtros',
            text: 'Funcionalidade em desenvolvimento',
            icon: 'info'
        });
    }
</script>
@endsection