@extends('layouts.publicador.default')

{{-- @json($senhas) --}}

@section('content')
    <div class="container my-4 py-3">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h3 class="card-title mb-4">Pesquisar Licenças</h3>
                <form action="{{ route('publicador.licencas.index') }}" method="GET">
                    <div class="row g-3">
                        <div class="col-md-9">
                            <label for="produto" class="form-label">Produtos</label>
                            <select name="produto[]" id="produto" class="form-control" multiple>
                                @foreach ($produtos as $produto)
                                    <option value="{{ $produto }}"
                                        {{ (is_array(request('produto')) && in_array($produto, request('produto'))) ||
                                        (is_string(request('produto')) && $produto == request('produto'))
                                            ? 'selected'
                                            : '' }}>
                                        {{ $produto }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="usuarios_disponiveis" class="form-label">Usuários Disponíveis</label>
                            <select name="users" id="usuarios_disponiveis" class="form-control">
                                <option value="">Todos</option>
                                <option value="sim" {{ request('users') == 'sim' ? 'selected' : '' }}>Sim
                                </option>
                                <option value="nao" {{ request('users') == 'nao' ? 'selected' : '' }}>Não
                                </option>
                            </select>
                        </div>
                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-search me-2"></i>Pesquisar
                            </button>
                            <button type="reset" class="btn btn-outline-secondary ms-2"
                                onclick="window.location.href='{{ route('publicador.licencas.index') }}'">
                                <i class="bi bi-x-circle me-2"></i>Limpar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if (session('status-success'))
            <div class="alert alert-success text-center remove-after-3s" role="alert">
                {{ session('status-success') }}
            </div>
        @endif

        @if (session('status-error'))
            <div class="alert alert-danger text-center remove-after-3s" role="alert">
                {{ session('status-error') }}
            </div>
        @endif

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title m-0">Lista de Licenças</h5>
                    @can('senhas_adicionar')
                        <a href="{{ route('publicador.licencas.form') }}" class="btn btn-sm btn-success">
                            <i class="fa fa-plus"></i> Adicionar
                        </a>
                    @endcan
                </div>
                @if (!empty($senhas) && $senhas->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>Produto</th>
                                    <th>Login</th>
                                    <th>Contrato</th>
                                    <th class="d-none d-sm-table-cell">Data de Expiração</th>
                                    <th class="d-none d-sm-table-cell">Usuários</th>
                                    <th class="d-none d-sm-table-cell">Locais</th>
                                    <th class="d-none d-sm-table-cell">Patrimônios</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($senhas as $senha)
                                    <tr>
                                        <td>{{ $senha->produto }}</td>
                                        <td>{{ $senha->login ?? '--' }}</td>
                                        <td>{{ $senha->contrato ?? '--' }}</td>
                                        <td class="d-none d-sm-table-cell">
                                            {{ $senha->data_expiracao ? $senha->data_expiracao->format('d/m/Y') : '--' }}
                                        </td>
                                        <td class="d-none d-sm-table-cell">
                                            {{ $senha->user_1 ?? '--' }}<br>
                                            {{ $senha->user_2 ? $senha->user_2 : '' }}
                                        </td>
                                        <td class="d-none d-sm-table-cell">
                                            {{ $senha->local_1 ?? '--' }}<br>
                                            {{ $senha->local_2 ? $senha->local_2 : '' }}
                                        </td>
                                        <td class="d-none d-sm-table-cell">
                                            {{ $senha->patrimonio_1 ?? '--' }}<br>
                                            {{ $senha->patrimonio_2 ? $senha->patrimonio_2 : '' }}
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-info"
                                                onclick="showSenhaDetails({{ $senha->id }})" title="Visualizar">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            @can('senhas_alterar')
                                                <a href="{{ route('publicador.licencas.edit', ['id' => $senha->id]) }}"
                                                    class="btn btn-sm btn-outline-primary" title="Alterar">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                            @endcan
                                            @can('senhas_excluir')
                                                <button class="btn btn-sm btn-outline-danger"
                                                    onclick="confirmDelete({{ $senha->id }})" title="Excluir">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="alert alert-info">
                        <p class="mb-0">Não há logins cadastrados.</p>
                    </div>
                @endif

                @if (isset($senhas) && method_exists($senhas, 'links'))
                    <div class="mt-3">
                        {{ $senhas->links() }}
                    </div>
                @endif
            </div>
        </div>

    </div>

    <!-- Modal para visualização detalhada da senha -->
    <div class="modal fade" id="senhaDetailModal" tabindex="-1" aria-labelledby="senhaDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="senhaDetailModalLabel">Detalhes da Senha</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label fw-bold">Produto:</label>
                                <p id="modalProduto" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Login:</label>
                                <div class="input-group">
                                    <input type="text" id="modalLogin" class="form-control" readonly>
                                    <button class="btn btn-outline-secondary" type="button"
                                        onclick="window.copyToClipboard('modalLogin')">
                                        <i class="fa fa-clipboard"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Senha:</label>
                                <div class="input-group">
                                    <input type="password" id="modalSenha" class="form-control" readonly>
                                    <button class="btn btn-outline-secondary" type="button" id="toggleSenha">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="btn btn-outline-secondary" type="button"
                                        onclick="window.copyToClipboard('modalSenha')">
                                        <i class="fa fa-clipboard"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Data de Expiração:</label>
                                <p id="modalDataExpiracao" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Contrato:</label>
                                <p id="modalcontrato" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Usuário 1:</label>
                                <p id="modalUser1" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Usuário 2:</label>
                                <p id="modalUser2" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Local 1:</label>
                                <p id="modalLocal1" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Local 2:</label>
                                <p id="modalLocal2" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Patrimônio 1:</label>
                                <p id="modalPatrimonio1" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Patrimônio 2:</label>
                                <p id="modalPatrimonio2" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label fw-bold">Observações:</label>
                                <p id="modalObs" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Data de Criação:</label>
                                <p id="modalCreatedAt" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Última Atualização:</label>
                                <p id="modalUpdatedAt" class="form-control-plaintext"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />

    <style>
        .modal-header.bg-primary.text-white {
            background-color: #004071 !important;
        }

        .col-12.mt-4 {
            text-align: center;
        }

        .pagination {
            justify-content: center;
        }

        h3.card-title.mb-4 {
            text-align: center;
        }

        .card {
            border-radius: 15px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .form-control,
        .form-select {
            border-radius: 10px;
        }

        .btn {
            border-radius: 10px;
            padding: 0.5rem 1.5rem;
        }

        .select2-container--bootstrap-5 .select2-selection {
            border-radius: 10px;
        }

        .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
            border-radius: 5px;
        }

        .table {
            font-size: 0.9rem;
        }

        .table th {
            font-weight: 600;
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .input-group-text {
            background-color: #f8f9fa;
        }

        .col-12.espaco {
            margin-top: 1%;
        }

        input#modalSenha,
        input#modalLogin {
            border-radius: 10px;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#produto').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: 'Selecione um ou mais produtos',
                allowClear: true
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            window.showSenhaDetails = function(id) {
                fetch(`{{ route('publicador.licencas.show', ['id' => ':id']) }}`.replace(':id', id))
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('modalProduto').textContent = data.produto || '--';
                        document.getElementById('modalLogin').value = data.login || '--';
                        document.getElementById('modalSenha').value = data.senha;
                        document.getElementById('modalDataExpiracao').textContent = data.data_expiracao ||
                            '--';
                        document.getElementById('modalUser1').textContent = data.user_1 || '--';
                        document.getElementById('modalUser2').textContent = data.user_2 || '--';
                        document.getElementById('modalLocal1').textContent = data.local_1 || '--';
                        document.getElementById('modalLocal2').textContent = data.local_2 || '--';
                        document.getElementById('modalPatrimonio1').textContent = data.patrimonio_1 || '--';
                        document.getElementById('modalPatrimonio2').textContent = data.patrimonio_2 || '--';
                        document.getElementById('modalObs').textContent = data.obs || '--';
                        document.getElementById('modalcontrato').textContent = data.contrato || '--';
                        document.getElementById('modalCreatedAt').textContent = data.created_at || '--';
                        document.getElementById('modalUpdatedAt').textContent = data.updated_at || '--';

                        var modal = new bootstrap.Modal(document.getElementById('senhaDetailModal'));
                        $('#senhaDetailModal').modal('show');
                    });
            };

            window.copyToClipboard = function(elementId) {
                var element = document.getElementById(elementId);
                element.select();
                document.execCommand('copy');

                // Feedback visual
                var button = element.nextElementSibling;
                var originalHTML = button.innerHTML;
                button.innerHTML = '<i class="fa fa-check"></i> Copiado!';
                setTimeout(() => {
                    button.innerHTML = originalHTML;
                }, 2000);
            };

            document.getElementById('toggleSenha').addEventListener('click', function() {
                var senhaInput = document.getElementById('modalSenha');
                var icon = this.querySelector('i');
                if (senhaInput.type === "password") {
                    senhaInput.type = "text";
                    icon.classList.remove('oi-eye');
                    icon.classList.add('oi-lock-unlocked');
                } else {
                    senhaInput.type = "password";
                    icon.classList.remove('oi-lock-unlocked');
                    icon.classList.add('oi-eye');
                }
            });

            $('#senhaDetailModal').on('hidden.bs.modal', function(e) {
                // Limpar campos do modal aqui, se necessário
            });

            // Garantir que os botões de fechar funcionem
            $('[data-dismiss="modal"]').on('click', function() {
                $('#senhaDetailModal').modal('hide');
            });

            window.confirmDelete = function(id) {
                Swal.fire({
                    title: 'Tem certeza?',
                    text: "Você não poderá reverter esta ação!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sim, excluir!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href =
                            "{{ route('publicador.licencas.delete', ['id' => ':id']) }}".replace(':id',
                                id);
                    }
                });
            };

            var removeAfter3sElements = document.querySelectorAll(".remove-after-3s");
            var transitionDuration = 0.5;

            setTimeout(function() {
                removeAfter3sElements.forEach(function(element, index) {
                    element.style.transition = "transform " + transitionDuration + "s, opacity " +
                        transitionDuration + "s";
                    element.style.transform = "translateX(-100%)";
                    element.style.opacity = "0";

                    setTimeout(function() {
                        element.style.display = "none";
                    }, transitionDuration * 1000 + (index * 200));
                });
            }, 5000);
        });
    </script>
@endsection