@extends('layouts.publicador.novo_padrao')

@section('content')
    <style>
        .impressao-only {
            display: none;
        }

        @media print {
            .impressao-only {
                display: table-cell;
            }
        }
    </style>

    <div class="d-flex justify-content-between filtrosmachinne">
        <form action="{{ route('publicador.maquinas.index') }}" method="GET" class="d-inline">
            <input type="text" class="form-control form-control-sm" name="search" value="{{ $search }}"
                placeholder="Buscar...">
            <button type="submit" class="btn btn-sm btn-primary mt-2"><i class="fa-solid fa-magnifying-glass"></i>
                Pesquisar</button>
        </form>
        <div>
            <select class="form-select" id="orderBy" name="orderBy">
                <option selected value="">Ordenar por</option>
                <option value="incompleto_asc"
                    {{ $orderBy === 'incompleto' && $orderDirection === 'asc' ? 'selected' : '' }}>Incompleto (A-Z)
                </option>
                <option value="incompleto_desc"
                    {{ $orderBy === 'incompleto' && $orderDirection === 'desc' ? 'selected' : '' }}>Incompleto (Z-A)
                </option>
                <option value="updated_asc" {{ $orderBy === 'updated_at' && $orderDirection === 'asc' ? 'selected' : '' }}>
                    Data de atualização
                    (Antigo-Novo)</option>
                <option value="updated_desc"
                    {{ $orderBy === 'updated_at' && $orderDirection === 'desc' ? 'selected' : '' }}>Data de atualização
                    (Novo-Antigo)</option>
                <option value="local_asc" {{ $orderBy === 'local_de_uso' && $orderDirection === 'asc' ? 'selected' : '' }}>
                    Local (A-Z)
                </option>
                <option value="local_desc"
                    {{ $orderBy === 'local_de_uso' && $orderDirection === 'desc' ? 'selected' : '' }}>Local (Z-A)
                </option>
                <!-- patrimonio-->
                <option value="patrimonio_asc"
                    {{ $orderBy === 'patrimonio' && $orderDirection === 'asc' ? 'selected' : '' }}>Patrimônio (A-Z)
                </option>
                <option value="patrimonio_desc"
                    {{ $orderBy === 'patrimonio' && $orderDirection === 'desc' ? 'selected' : '' }}>Patrimônio (Z-A)
                </option>
                <!-- mac adress -->
                <option value="mac_asc" {{ $orderBy === 'mac' && $orderDirection === 'asc' ? 'selected' : '' }}>MAC
                    (A-Z)
                </option>
                <option value="mac_desc" {{ $orderBy === 'mac' && $orderDirection === 'desc' ? 'selected' : '' }}>MAC
                    (Z-A)
                </option>
                <!-- mac adress e local de uso-->
                <option value="mac-local_asc"
                    {{ $orderBy === 'mac-local' && $orderDirection === 'asc' ? 'selected' : '' }}>
                    MAC e Local (A-Z)
                </option>
                <option value="mac-local_desc"
                    {{ $orderBy === 'mac-local' && $orderDirection === 'desc' ? 'selected' : '' }}>
                    MAC e Local (Z-A)
                </option>
            </select>

        </div>
        <div class="bloquinhos">
            <label for="order-direction" class="mr-2">Limpar pesquisa:</label>
            <button type="button" class="btn btn-sm btn-primary mt-2" onclick="limparpesquisa()"><i
                    class="fa-solid fa-broom"></i>
                Limpar!</button>
        </div>
    </div>

    <script>
        document.getElementById('orderBy').addEventListener('change', function() {
            const orderByValue = this.value;
            const url = new URL(window.location.href);
            const search = url.searchParams.get('search');

            if (orderByValue) {
                const [orderBy, orderDirection] = orderByValue.split('_');
                url.searchParams.set('orderBy', orderBy);
                url.searchParams.set('orderDirection', orderDirection);
            } else {
                url.searchParams.delete('orderBy');
                url.searchParams.delete('orderDirection');
            }

            if (search) {
                url.searchParams.set('search', search);
            }

            window.location.href = url.href;
        });

        function limparpesquisa() {
            window.location.href = "{{ route('publicador.maquinas.index') }}";
        }
    </script>


    <div class="row">
        <div class="col-md-12">
            <h2>Lista de Máquinas</h2>
            <div class="alin">
                <a href="{{ route('publicador.maquinas.create') }}" class="btn btn-primary mb-3">
                    <i class="fas fa-plus"></i> Cadastrar Máquina
                </a>
                <a class="btn btn-success mb-3" onclick="imprimirTabela()"><i style="filter: invert(1);"
                        class="fas fa-print"></i></a>
            </div>

            <table id="tabela-dados" class="table table-sm table-striped table-bordered table-hover machinnetable">
                <thead class="thead-default small">
                    @php
                        //array com emails de usuarios evandroripka e deimon
                        $emails = ['deimon@assembleia.pr.leg.br', 'rodrigo@assembleia.pr.leg.br'];
                        //se email atual do usuario autenticado estiver no array de emails define a variavel showsensitive como true
                        $showsensitive = in_array(Auth::user()->email, $emails);
                    @endphp
                    <tr>
                        <th class="custom-max-width text-truncate">ID</th>
                        <th class="custom-max-width text-truncate">Matrícula-Nome</th>
                        <th class="custom-max-width text-truncate">MAC</th>
                        <th class="custom-max-width text-truncate">IP</th>
                        <th class="custom-max-width text-truncate">Patrimônio</th>

                        <th class="custom-max-width text-truncate">Local de Uso</th>
                        <th class="custom-max-width text-truncate">Nome do Usuário</th>
                        @if ($showsensitive)
                            <th class="custom-max-width text-truncate">Confirmação</th>
                        @endif
                        <!-- mostra a coluna apenas para um array de emails de usuarios-->

                        <th class="custom-max-width text-truncate">Confirmado em</th>
                        <th class="custom-max-width text-truncate">Observação</th>
                        <th class="custom-max-width text-truncate not">Anotações</th>
                        <th class="custom-max-width text-truncate act">Ações</th>

                    </tr>
                </thead>
                <tbody>
                    @foreach ($maquinas as $maquina)
                        @if ($maquina->incompleto)
                            <tr id="linha{{ $maquina->id }}" class="missinginfos">
                            @else
                            <tr id="linha{{ $maquina->id }}">
                        @endif
                        <td class="small">{{ $maquina->id }}</td>
                        <td class="small custom-max-width text-truncate">{{ $maquina->matricula_nome }}</td>
                        <td class="small">{{ $maquina->mac }}</td>
                        <td class="small">{{ $maquina->ip }}</td>

                        <td class="small">{{ $maquina->patrimonio }}</td>

                        <td class="small">{{ $maquina->local_de_uso }}</td>
                        <td class="small">{{ $maquina->nome_do_usuario }}</td>
                        @if ($showsensitive)
                            <td class="small text-center">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="switch_{{ $maquina->id }}"
                                        onchange="updateStatus({{ $maquina->id }}, this.checked)"
                                        {{ $maquina->confirmacao_manutencao ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="switch_{{ $maquina->id }}"
                                        style="cursor: pointer"></label>
                                </div>
                            </td>
                        @endif
                        <td class="small">{{ $maquina->data_hora_confirmacao }}</td>
                        <td class="small act">{{ $maquina->observacao }}</td>
                        <td class="small not"></td>
                        <td class="small act">
                            <a href="{{ route('publicador.maquinas.edit', $maquina->id) }}" class="btn btn-sm btn-info">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('publicador.maquinas.destroy', $maquina->id) }}" method="POST"
                                class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirmDeletion();">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <style>
                tr.missinginfos {
                    background-color: #ffd00024 !important;
                }

                .custom-max-width {
                    max-width: 150px;
                }

                .table .small {
                    font-size: 0.8rem;
                }

                .imagem-empty.text-center img {
                    width: 100%;
                    opacity: .5;
                    filter: grayscale();
                }

                .filtrosmachinne {
                    border: solid 0px #00000030;
                    border-radius: 10px;
                    padding: 1rem;
                    margin-bottom: 2rem;
                    background-color: #004071;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: flex-start;
                }

                .filtrosmachinne>form,
                .filtrosmachinne>div {
                    width: 100%;
                    margin: 0px 10px;
                }

                .bloquinhos {
                    color: #ffffff;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                }

                .not {
                    display: none;
                }

                .act {
                    width: 10vh;
                    display: table-cell;
                }

                @media print {
                    .not {
                        display: table-column;
                        width: 20vh
                    }

                    .act {
                        display: none;
                    }
                }

                .alin {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: center;
                    align-content: center;
                    flex-direction: row;

                }
            </style>
            <script>
                function updateStatus(maquinaId, isChecked) {
                    // Converter o valor isChecked (boolean) para 1 ou 0
                    var status = isChecked ? 1 : 0;

                    // Enviar uma requisição AJAX para atualizar o status da máquina
                    $.ajax({
                        url: '/publicador/maquinas/update-status/' +
                            maquinaId, // Atualize com a URL correta da sua aplicação
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}", // Adicione o token CSRF
                            confirmacao_manutencao: status
                        },
                        success: function(response) {
                            // Você pode adicionar alguma ação após a atualização bem-sucedida, se necessário
                            console.log('Status atualizado com sucesso:', response);
                        },
                        error: function(error) {
                            // Exibir mensagem de erro ou reverter o botão de chaveamento para o estado anterior
                            console.error('Erro ao atualizar o status:', error);
                        }
                    });
                }

                function confirmDeletion() {
                    return confirm("Tem certeza que deseja excluir o registro?");
                }
            </script>

            <!-- se a tabela não tiver linhas exibe a div abaixo -->
            @if (count($maquinas) == 0)
                <div class="alert alert-warning" role="alert">
                    Nenhuma máquina cadastrada com essas características...
                </div>
                <div class="imagem-empty text-center">
                    <img
                        src="https://e0.pxfuel.com/wallpapers/139/416/desktop-wallpaper-2560%C3%971440-minimalist-desert-dist-minimalist-cactus.jpg">
                </div>
            @endif

        </div>
    </div>
    <div class="d-flex justify-content-center">
        <nav>
            <ul class="pagination">
                {{-- Previous Page Link --}}
                @if ($maquinas->onFirstPage())
                    <li class="page-item disabled">
                        <span class="page-link">&laquo;</span>
                    </li>
                @else
                    <li class="page-item">
                        <a class="page-link" href="{{ $maquinas->previousPageUrl() }}" rel="prev">&laquo;</a>
                    </li>
                @endif

                {{-- Page Number Links --}}
                @foreach (range(1, $maquinas->lastPage()) as $i)
                    @if ($i == $maquinas->currentPage())
                        <li class="page-item active">
                            <span class="page-link">{{ $i }}</span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $maquinas->url($i) }}">{{ $i }}</a>
                        </li>
                    @endif
                @endforeach

                {{-- Next Page Link --}}
                @if ($maquinas->hasMorePages())
                    <li class="page-item">
                        <a class="page-link" href="{{ $maquinas->nextPageUrl() }}" rel="next">&raquo;</a>
                    </li>
                @else
                    <li class="page-item disabled">
                        <span class="page-link">&raquo;</span>
                    </li>
                @endif
            </ul>
        </nav>
    </div>
    <script>
        function imprimirTabela() {
            var tabela = document.getElementById("tabela-dados").outerHTML;
            var janela = window.open('', '', 'width=2000,height=1000');
            janela.document.write('<html><head><title>Lista de Máquinas</title>');
            janela.document.write('</head><body>');
            janela.document.write(tabela);
            janela.document.write(
                '<style>@media print{.act{ display:none;}.not{witdh:10vh;}}button{display:none;}table{border-collapse:collapse}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-sm td,.table-sm th{padding:.3rem}}.table-bordered{border:1px solid #dee2e6}.table-hover tbody tr:hover{color:#212529;background-color:rgba(0,0,0,.075)}</style>'
            );
            janela.document.write('</body></html>');
            janela.document.close();
            janela.print();
        }
    </script>
@endsection