@extends('painel-admin.menu')
@section('title', 'Controles de Qualidade')
@section('content')
    @if(session('errors'))
            <div class="alert alert-danger">
                <ul>
                    @foreach(session('errors')->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    <div class="row">
        <div class="col-12 mt-3">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center flex-wrap">
                <h2 class="mb-3 mb-sm-0">Controles de Qualidade</h2>

                <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#selecionarEmpresaModal">
                        <i class="fas fa-plus mr-1"></i> Controle de Qualidade
                    </button>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="table-responsive mb-3">
        <table class="table table-striped table-bordered" id="dataTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Data</th>
                    <th>Tipo</th>
                    <th>Empresa</th>
                    <th>Técnico</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($respostas as $resposta)
                    <tr>
                        <td>{{ $resposta->codigo }}</td>
                        <td>{{ \Carbon\Carbon::parse($resposta->data)->format('d/m/Y H:i') }}</td>
                        <td>Controle de Qualidade - {{ $resposta->tipo }}</td>
                        <td>{{ $resposta->nome_empresa }}</td>
                        <td>{{ $usuarios->where('id', $resposta->id_user_inclusao)->first()->nome ?? '' }}</td>
                        <td>
                            <div class="d-flex flex-wrap justify-content-center gap-2">
                                <a title="Editar" href="{{ route('ControleDeQualidade.edit', $resposta->codigo) }}"><i class="fas fa-edit text-info m-1"></i></a>
                                <a title="Visualizar Dados" href="#" data-toggle="modal" data-target="#modalRespostas{{ $resposta->codigo }}" ><i class="fas fa-eye m-1"></i></a>

                                <form method="POST" id="formDelete{{$resposta->codigo}}" action="{{ route('ControleDeQualidade.destroy', $resposta->codigo) }}" enctype="multipart/form-data">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btnDeletar" data-id="{{ $resposta->codigo }}">
                                        <i class="fas fa-trash text-danger m-1"></i>
                                    </button>
                                </form>
                                <a title="Nova Tarefa" href="#" data-toggle="modal" data-target="#CriarTicket" data-cliente="{{ $resposta->id_empresa }}" data-codigo="{{ $resposta->codigo }}" class="btnCriarTicket"><i class="fas fa-plus m-1"></i>Tarefa</a>                         
                            </div>
                        </td>
                    </tr>

                    <div class="modal fade" id="modalRespostas{{ $resposta->codigo }}" tabindex="-1" role="dialog" aria-labelledby="modalRespostasLabel{{ $resposta->codigo }}" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modalRespostasLabel{{ $resposta->codigo }}">
                                        Respostas do Código {{ $resposta->codigo }} - {{ $resposta->tipo }}
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>

                                <div class="modal-body">
                                    <div class="row">
                                        @foreach($respostasDetalhadas[$resposta->codigo] ?? [] as $detalhe)
                                            @php
                                                $perguntaTexto = $perguntas->where('id', $detalhe->id_pergunta)->first()->pergunta ?? 'Pergunta não encontrada';
                                            @endphp
                                            <div class="col-md-12 mb-3">
                                                <label><strong>{{ $perguntaTexto }}</strong></label>
                                                <textarea class="form-control" rows="2" readonly>{{ $detalhe->resposta }}</textarea>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Modal para selecionar empresa -->
    <div class="modal fade" id="selecionarEmpresaModal" tabindex="-1" role="dialog" aria-labelledby="selecionarEmpresaModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="GET" action="" id="formSelecionarEmpresa">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="selecionarEmpresaModalLabel">Selecionar Empresa</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label>Escolha uma empresa:</label>
                        <select id="cliente" class="custom-select @error('cliente') is-invalid @enderror select2" name="cliente" autocomplete="cliente" autofocus>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Iniciar Controle</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Modal para criar tarefa -->
    <form method="POST" id="formCriarTicket" action="{{route('tickets.store')}}" enctype="multipart/form-data">
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif  
        @method('POST')
        @csrf
        <div class="modal fade" id="CriarTicket" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Criação do Registro</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">           
                                <label>Data de Abertura</label>
                                <input type="date" class="form-control" id="data_aberturaticket" name="data_abertura" value="{{ $dataAtual }}" required oninput="validarAno(this)">
                                @if ($errors->has('data_abertura'))
                                    <p class="text-danger">{{ $errors->first('data_abertura') }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <label>Prioridade</label>
                                <select class="form-control" id="prioridadeticket" name="prioridade" value="{{ old('prioridade') }}" required>
                                    <option value="1" {{ old('prioridade') == '1' ? 'selected' : '' }}>Sugestão</option>
                                    <option value="2" {{ old('prioridade') == '2' ? 'selected' : '' }}>Baixo</option>
                                    <option value="3" {{ old('prioridade') == '3' ? 'selected' : '' }}>Médio</option>
                                    <option value="4" {{ old('prioridade') == '4' ? 'selected' : '' }}>Alto</option>
                                    <option value="5" {{ old('prioridade') == '5' ? 'selected' : '' }}>Urgente</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>Status</label>
                                <select class="form-control" id="statusticket" name="status" value="{{ old('status') }}" required> 
                                    <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Aberto</option>
                                    <option value="2" {{ old('status') == '2' ? 'selected' : '' }}>Fazendo</option>
                                </select> 
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label>Título<span title="Campo Obrigatório" style="color:red">*</span></label>
                                <input type="text" class="form-control" id="titulo" name="titulo" value="{{ old('titulo') }}">
                                <input type="hidden" class="form-control" id="id_controle_qualidade" name="id_controle_qualidade" value="{{ old('id_controle_qualidade') }}">
                                @if ($errors->has('titulo'))
                                    <p class="text-danger">{{ $errors->first('titulo') }}</p>
                                @endif          
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">    
                                <label>Sitema</label>
                                <select class="form-control" id="sistema" name="sistema" value="{{ old('sistema') }}" required>
                                    <option value="Finest" {{ old('sistema') == 'Finest' ? 'selected' : '' }}>Finest</option>
                                    <option value="FrenteECF" {{ old('sistema') == 'FrenteECF' ? 'selected' : '' }}>Frente ECF</option>
                                    <option value="FrenteNFCE" {{ old('sistema') == 'FrenteNFCE' ? 'selected' : '' }}>Frente NFC-e</option>
                                    <option value="Cacamba" {{ old('sistema') == 'Cacamba' ? 'selected' : '' }}>Caçamba</option>
                                    <option value="Web" {{ old('sistema') == 'Web' ? 'selected' : '' }}>Web</option>
                                    <option value="nenhum" {{ old('sistema') == 'nenhum' ? 'selected' : '' }}>nenhum</option>
                                </select>         
                            </div>
                            <div class="col-md-6">
                                <label>Setor</label>
                                <select class="form-control" id="setorticket" name="setor" value="{{ old('setor') }}" required>
                                    <option value="Suporte" {{ old('setor') == 'Suporte' ? 'selected' : '' }}>Suporte</option>
                                    <option value="Desenvolvimento" {{ old('setor') == 'Desenvolvimento' ? 'selected' : '' }}>Desenvolvimento</option>
                                    <option value="Comercial" {{ old('setor') == 'Comercial' ? 'selected' : '' }}>Comercial</option>
                                </select>
                            </div>       
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label>Solicitante<span title="Campo Obrigatório" style="color:red">*</span></label>
                                <input type="text" class="form-control" id="solicitante" name="solicitante" value="{{ old('solicitante') }}">
                                <input type="hidden" class="form-control" id="id_cliente" name="cliente" value="{{ old('cliente') }}">
                                @if ($errors->has('solicitante'))
                                    <p class="text-danger">{{ $errors->first('solicitante') }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <label>Motivo<span title="Campo Obrigatório" style="color:red">*</span></label>
                                <textarea class="form-control" id="motivo" name="motivo">{{ old('motivo') }}</textarea>
                                @if ($errors->has('motivo'))
                                    <p class="text-danger">{{ $errors->first('motivo') }}</p>
                                @endif            
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="imagens">Anexo (PNG,JPEG,BMP OU PDF )</label><br>
                                <span style="color: red;">Lembra-se de vincular o anexo nomeado caso tenha!</span>
                                <input type="file" class="form-control-file" name="imagem[]" multiple>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <label>Abertura por</label>
                                <select  class="form-control" id="user_abertura" name="user_abertura" value="{{ old('user_abertura') }}" required="required">
                                    <option value="{{$usuario->id}}">{{$usuario->nome}}</option>
                                    @foreach($responsaveis as $responsavel)
                                        @if($responsavel->id != $usuario->id)
                                            <option value="{{ $responsavel->id }}" {{ old('user_abertura') == $responsavel->id ? 'selected' : ''}}>{{ $responsavel->nome }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">          
                                <label>Responsavel<span title="Campo Obrigatório" style="color:red">*</span></label>
                                <select  class="form-control" id="user_responsavel" name="user_responsavel" value="{{ old('user_responsavel') }}" require>
                                    <option value="{{$usuario->id}}">{{$usuario->nome}}</option>
                                    @foreach($responsaveis as $responsavel)
                                        @if($responsavel->id != $usuario->id)
                                            <option value="{{ $responsavel->id }}" {{ old('user_responsavel') == $responsavel->id ? 'selected' : ''}}>{{ $responsavel->nome }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                @if ($errors->has('user_responsavel'))
                                <p class="text-danger">{{ $errors->first('user_responsavel') }}</p>
                                @endif               
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btnSalvarTicket">Cadastrar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <style>
        .scrollbar-horizontal {
            overflow-x: auto;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 10px;
            height: 40px !important;
            box-sizing: border-box; 
        }

        .select2-selection__arrow {
            height: 38px; 
        }

        .select2-selection__rendered {
            color: #495057; 
            line-height: 40px; 
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 14px;
            color: #6c757d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff; 
        }

        /* Celular */
        @media (max-width: 768px) {
            .table thead {
                display: none;
            }
            .table tbody tr {
                display: block;
                margin-bottom: 10px;
                border: 1px solid #ddd;
                padding: 10px;
                border-radius: 8px;
            }
            .table tbody td {
                display: block;
                text-align: left;
                font-size: 14px;
                padding: 5px 10px;
                position: relative;
                border-bottom: 1px solid #ddd;
            }
            .table tbody td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                font-weight: bold;
                text-align: left;
                top: 5px; 
                padding-right: 5px;
                font-size: 12px;
                white-space: nowrap;
            }
            .table tbody td {
                padding-top: 25px;
            }
            .actions {
                text-align: center;
            }
        }
    </style>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>   
    <script>

        document.getElementById('formSelecionarEmpresa').addEventListener('submit', function(event) {
            event.preventDefault();

            const empresaId = document.getElementById('cliente').value;

            if (empresaId) {
                window.location.href = `/empresas/${empresaId}/edit`;
            }
        });
    

        var tableScroll = document.querySelector('.table-responsive-sm');

        if (tableScroll) {  
            tableScroll.classList.add('scrollbar-horizontal');
        }

        var currentItemId = 'controles-link';

        function validarAno(input) {
            const data = input.value;
            const partes = data.split('-');
            const ano = partes[0];

            if (ano.length > 4) {
                partes[0] = ano.slice(0, 4);

                
                input.value = partes.join('-');

                Swal.fire({
                icon: 'error',
                title: 'Ano inválido!',
                text: 'O ano não pode ter mais de 4 dígitos.',
                confirmButtonText: 'OK'
                });
            }
        }

        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            
            $j('#cliente').select2({
                theme: 'default',
                language: "pt-BR",
                width: '100%',
                ajax: {
                    url: '/buscar-cliente',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term };
                    },
                    processResults: function (data) {
                        return { results: data.results };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Digite a razão social ou fantasia para buscar',
                dropdownParent: $j('#selecionarEmpresaModal')
            });

            $j('#cliente').on('select2:select', function (e) { 
                var data = e.params.data;
            });
        });
        

        document.getElementById('btnSalvarTicket').addEventListener('click', function(event) {
            event.preventDefault();

            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente gravar essa Tarefa?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar',
                didOpen: () => {
                    const confirmButton = Swal.getConfirmButton();
                    if (confirmButton) {
                        confirmButton.focus();
                        
                        document.addEventListener('keydown', function onKeyPress(e) {
                            if (e.key === 'Enter') {
                                confirmButton.click();
                                document.removeEventListener('keydown', onKeyPress);
                            }
                        });
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('formCriarTicket').submit();
                }
            });
        });


        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.btnCriarTicket').forEach(btn => {
                btn.addEventListener('click', function () {
                const codigo = this.getAttribute('data-codigo');
                const id_cliente= this.getAttribute('data-cliente');
                document.getElementById('titulo').value = `Controle de Qualidade : ${codigo} -`;
                document.getElementById('id_controle_qualidade').value = `${codigo}`;
                document.getElementById('id_cliente').value = `${id_cliente}`;
                });
            });
        });

        document.querySelectorAll('.btnDeletar').forEach(function(button) {
            button.addEventListener('click', function(event) {
                event.preventDefault();

                const formId = 'formDelete' + button.getAttribute('data-id');
                const form = document.getElementById(formId);

                Swal.fire({
                    title: 'Confirmação',
                    text: 'Deseja realmente excluir esse Controle de Qualidade?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });

    </script>
@endsection