@extends('adm-embarcador.layout')

@section('title', 'Solicitações Programadas - 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-calendar-check me-2"></i>
                        Solicitações Programadas
                    </h1>
                    <p class="text-muted mb-0">Gerencie suas cotações automáticas e recorrentes</p>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary btn-sm" onclick="novaProgramacao()">
                        <i class="fas fa-plus me-1"></i>
                        Nova Programação
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" onclick="exportarDados()">
                        <i class="fas fa-download me-1"></i>
                        Exportar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <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 de Programações
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">12</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <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">
                                Ativas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-play-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <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">
                                Pausadas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">3</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-pause-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <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">
                                Execuções Este Mês
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">45</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela de Solicitações Programadas -->
    <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">Programaçõ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>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="programacoesTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Rota</th>
                            <th>Frequência</th>
                            <th>Próxima Execução</th>
                            <th>Status</th>
                            <th>Execuções</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Cotacao Semanal SP-RJ</td>
                            <td>São Paulo → Rio de Janeiro</td>
                            <td>Semanal</td>
                            <td>22/01/2024 09:00</td>
                            <td><span class="badge badge-success">Ativa</span></td>
                            <td>156</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('1')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-warning" onclick="pausarProgramacao('1')">
                                    <i class="fas fa-pause"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="editarProgramacao('1')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>Cotacao Quinzenal MG-SP</td>
                            <td>Belo Horizonte → São Paulo</td>
                            <td>Quinzenal</td>
                            <td>25/01/2024 14:00</td>
                            <td><span class="badge badge-success">Ativa</span></td>
                            <td>89</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('2')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-warning" onclick="pausarProgramacao('2')">
                                    <i class="fas fa-pause"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="editarProgramacao('2')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>Cotacao Mensal RS-PR</td>
                            <td>Porto Alegre → Curitiba</td>
                            <td>Mensal</td>
                            <td>01/02/2024 10:00</td>
                            <td><span class="badge badge-warning">Pausada</span></td>
                            <td>23</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('3')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-success" onclick="ativarProgramacao('3')">
                                    <i class="fas fa-play"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="editarProgramacao('3')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>Cotacao Diaria BA-PE</td>
                            <td>Salvador → Recife</td>
                            <td>Diária</td>
                            <td>16/01/2024 08:00</td>
                            <td><span class="badge badge-success">Ativa</span></td>
                            <td>45</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhes('4')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-warning" onclick="pausarProgramacao('4')">
                                    <i class="fas fa-pause"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-info" onclick="editarProgramacao('4')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('extra_js')
<script>
    $(document).ready(function() {
        // Inicializar DataTable
        $('#programacoesTable').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Portuguese-Brasil.json"
            },
            "order": [[3, "asc"]], // Ordenar por próxima execução
            "pageLength": 25,
            "responsive": true
        });
    });

    function novaProgramacao() {
        Swal.fire({
            title: 'Nova Programação',
            html: `
                <div class="text-left">
                    <div class="mb-3">
                        <label class="form-label">Nome da Programação</label>
                        <input type="text" class="form-control" id="nomeProgramacao" placeholder="Ex: Cotação Semanal SP-RJ">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Frequência</label>
                        <select class="form-select" id="frequencia">
                            <option value="diaria">Diária</option>
                            <option value="semanal">Semanal</option>
                            <option value="quinzenal">Quinzenal</option>
                            <option value="mensal">Mensal</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Horário de Execução</label>
                        <input type="time" class="form-control" id="horarioExecucao">
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Criar Programação',
            cancelButtonText: 'Cancelar',
            preConfirm: () => {
                const nome = document.getElementById('nomeProgramacao').value;
                const frequencia = document.getElementById('frequencia').value;
                const horario = document.getElementById('horarioExecucao').value;

                if (!nome || !horario) {
                    Swal.showValidationMessage('Por favor, preencha todos os campos obrigatórios');
                    return false;
                }

                return { nome, frequencia, horario };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Programação Criada!',
                    text: 'Sua programação foi criada com sucesso.',
                    icon: 'success'
                });
            }
        });
    }

    function verDetalhes(id) {
        Swal.fire({
            title: 'Detalhes da Programação',
            html: `
                <div class="text-left">
                    <p><strong>Nome:</strong> Cotação Semanal SP-RJ</p>
                    <p><strong>Rota:</strong> São Paulo → Rio de Janeiro</p>
                    <p><strong>Frequência:</strong> Semanal</p>
                    <p><strong>Próxima Execução:</strong> 22/01/2024 09:00</p>
                    <p><strong>Status:</strong> Ativa</p>
                    <p><strong>Total de Execuções:</strong> 156</p>
                    <p><strong>Última Execução:</strong> 15/01/2024 09:00</p>
                    <p><strong>Próxima Execução:</strong> 22/01/2024 09:00</p>
                </div>
            `,
            icon: 'info',
            confirmButtonText: 'Fechar'
        });
    }

    function pausarProgramacao(id) {
        Swal.fire({
            title: 'Pausar Programação?',
            text: 'Deseja pausar esta programação?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sim, pausar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Pausada!',
                    text: 'Programação pausada com sucesso.',
                    icon: 'success'
                });
            }
        });
    }

    function ativarProgramacao(id) {
        Swal.fire({
            title: 'Ativar Programação?',
            text: 'Deseja ativar esta programação?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sim, ativar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Ativada!',
                    text: 'Programação ativada com sucesso.',
                    icon: 'success'
                });
            }
        });
    }

    function editarProgramacao(id) {
        Swal.fire({
            title: 'Editar Programação',
            text: 'Funcionalidade em desenvolvimento',
            icon: 'info'
        });
    }

    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();
    }
</script>
@endsection