@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('documents.list') !!}
@endsection
@section('content')
    <div class="the-box rounded">
        <form id="search-form" method="GET">
            <input type="hidden" name="has-filter" value="true">
            {{-- Linha 1 --}}
            <div class="row mb-3">
                <div class="form-group col-md-2">
                    {!! Form::label('document_type_id', 'Tipo:') !!}
                    {!! Form::select('document_type_id', $documents_type, $form->input('document_type_id'), [
                        'class' => 'form-control',
                    ]) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('date', 'Ano:') !!}
                    {!! Form::text('date', $form->input('date'), ['class' => 'form-control', 'placeholder' => 'Digite o ano']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('assemblyman_inactive', 'Responsável Inativo:') !!}
                    <div class="form-check pt-2">
                        <label class="form-check-label">
                            {!! Form::checkbox('assemblyman_inactive', null, $form->input('assemblyman_inactive'), [
                                'id' => 'assemblymanInactiveCheckbox',
                                'class' => 'form-check-input',
                            ]) !!}
                            Mostrar
                        </label>
                    </div>
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('owner_id', 'Responsável:') !!}
                    {!! Form::select('owner_id', $assemblymensList, $form->input('owner_id'), [
                        'class' => 'form-control',
                        'id' => 'assemblymanSelect',
                    ]) !!}
                    {!! Form::select('owner_id_inactive', $assemblymensListInactive, $form->input('owner_id_inactive'), [
                        'class' => 'form-control mt-1',
                        'style' => 'display: none;',
                        'id' => 'assemblymanInactiveSelect',
                    ]) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('status', 'Status:') !!}
                    {!! Form::select(
                        'status',
                        [
                            0 => 'Selecione...',
                            1 => 'Aberto',
                            2 => 'Protocolado',
                            3 => 'Lido',
                            4 => 'Aprovado',
                            5 => 'Re-provado',
                            6 => 'Sem Pauta',
                        ],
                        $form->input('status'),
                        ['class' => 'form-control'],
                    ) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('origin_document_id', 'Origem do documento:') !!}
                    {!! Form::select(
                        'origin_document_id',
                        [null => 'Selecione...', 0 => 'Expedido', 1 => 'Digitalizado'],
                        $form->input('origin_document_id'),
                        ['class' => 'form-control', 'id' => 'origin_document_id'],
                    ) !!}
                </div>
            </div>
            {{-- Linha 2 --}}
            <div class="row mb-3">
                <div class="form-group col-md-2">
                    {!! Form::label('code', 'Código de barras:') !!}
                    {!! Form::text('code', $form->input('code'), ['class' => 'form-control']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('number', 'Número:') !!}
                    {!! Form::number('number', $form->input('number'), ['class' => 'form-control']) !!}
                </div>
                {{-- <div class="form-group col-md-3">
                    {!! Form::label('sem_sessao', 'Vinculado à Sessão:') !!}
                    {!! Form::select(
                        'sem_sessao',
                        [
                            '' => 'Selecione...',
                            '1' => 'Não (Sem Sessão)',
                            '0' => 'Sim (Com Sessão)',
                        ],
                        request('sem_sessao'),
                        ['class' => 'form-control'],
                    ) !!}
                </div> --}}
                {{-- Aqui o campo content maior --}}
                <div class="form-group col-md-2">
                    {!! Form::label('content', 'Que contenha (texto):') !!}
                    {!! Form::text('content', $form->input('content'), ['class' => 'form-control']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('start_date', 'De:') !!}
                    {!! Form::text('start_date', $form->input('start_date') ?: null, ['class' => 'form-control datetimepicker6']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('end_date', 'Até:') !!}
                    {!! Form::text('end_date', $form->input('end_date') ?: null, ['class' => 'form-control datetimepicker6']) !!}
                </div>
                <div class="orm-group col-md-2">
                    <button id="toggle-filters" type="button" class="botao-input-ocult"
                        style="font-size:14px;margin-top:25px;background-color: #38bb9b;">
                        Mostrar/Ocultar filtros
                    </button>
                </div>
            </div>
            {{-- Linha 3 - OCR (oculto) - fica logo após Linha 2 --}}
            <div class="row search-ocr mb-3" style="display:none;">
                <div class="form-group col-md-2">
                    {!! Form::label('title_ocr', 'Título do anexo contenha (OCR):') !!}
                    {!! Form::text('title_ocr', $form->input('title_ocr'), ['class' => 'form-control']) !!}
                </div>
                <div class="form-group col-md-2">
                    {!! Form::label('content_ocr', 'Que contenha (texto) OCR:') !!}
                    {!! Form::text('content_ocr', $form->input('content_ocr'), ['class' => 'form-control']) !!}
                </div>
            </div>
            {{-- Filtros avançados ocultos (depois do OCR) --}}
            <div id="advanced-filters" style="display: none;">
                <div class="row mb-3">
                    <div class="form-group col-md-2">
                        {!! Form::label('id_entidade', 'Entidade:') !!}
                        {!! Form::select('id_entidade', $entitys, $form->input('id_entidade'), ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-md-2">
                        {!! Form::label('id_people', 'Fornecedor:') !!}
                        {!! Form::select('id_people', $people, $form->input('id_people'), ['class' => 'form-control']) !!}
                    </div>

                    <div class="form-group col-md-2">
                        {!! Form::label('number_process', 'Número/Ano Processo:') !!}
                        {!! Form::text('number_process', $form->input('number_process'), [
                            'class' => 'form-control',
                            'placeholder' => 'Ex: 1/2025 ou 01/2025',
                        ]) !!}
                    </div>
                </div>
            </div>
            {{-- Linha 4 - Datas e Botões --}}
            <div class="container-buttons-search">
                <div class="container-btn">
                    <button type="reset" onclick="limparURLERecarregar()" class="botao-reset" style="margin-right: 10px;">
                        <i class="fa fa-recycle" aria-hidden="true"></i> Reset
                    </button>
                </div>
                <div class="container-btn">
                    <button type="submit" class="botao-submit">
                        <i class="fa fa-search" aria-hidden="true"></i> Pesquisar
                    </button>
                </div>
            </div>
            <script>
                document.getElementById('toggle-filters').addEventListener('click', function() {
                    const filters = document.getElementById('advanced-filters');
                    filters.style.display = filters.style.display === 'none' ? 'block' : 'none';
                });
            </script>
        </form>
        <div class="clearfix"></div>
    </div>
    <div class="the-box rounded">
        <div class="row">
            <div class="col-md-6">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group">
                        @shield('documents.delete')
                            <a href="javascript:void(0)" onclick="deletaBash()" style="display: none;" class="deleteAll">
                                <button type="button" class="btn btn-danger">
                                    <i class="fa fa-trash"></i> DELETAR SELECIONADOS
                                </button>
                            </a>
                        @endshield
                        @shield('documents.create')
                            <a href="{!! route('documents.create') !!}">
                                <button type="button" class="btn btn-primary" style="z-index: 10; position: relative">
                                    <i class="fa fa-plus-circle"></i> Novo registro
                                </button>
                            </a>
                        @endshield
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="container-grid-button">
                    <a href="/documents" onclick="changeViewDocuments(0)"><i class="fa fa-check list-custom-check"
                            aria-hidden="true"></i><i class="fa fa-th-large custom-icon" aria-hidden="true"></i></a>

                    <a href="/documents/table/show" onclick="changeViewDocuments(1)"><i class="fa fa-list custom-icon"
                            aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
        <div class="row">
            <br>
            <div class="col-12">
                @include('flash::message')
                @if ($documents->isEmpty())
                    <div class="well text-center">Sem dados. Insira um novo registro.</div>
                @else
                    @include('documents.table')
                @endif
            </div>
        </div>

    </div>
    <script src="https://cdn.asprise.com/scannerjs/scanner.js" type="text/javascript"></script>

    <script type="text/javascript">
        function changeViewDocuments(param) {
            var url = '/toggle/change/view/documents/' + param;

            $.ajax({
                url: url,
                method: "GET",
                dataType: "json"
            }).success((data) => {
                //
            })
        }


        $(function() {
            $('.datetimepicker6').datetimepicker({
                defaultDate: '',
                locale: 'pt-br',
                format: 'DD/MM/YYYY',
                widgetPositioning: {
                    horizontal: 'left',
                    vertical: 'bottom'
                }
            });
        });

        function limparURLERecarregar() {
            window.location = '{{ url()->current() }}';
        }

        $(document).ready(function() {
            $('#mostrar-ocr').click(function(e) {
                e.preventDefault();
                $('.search-ocr').show();
            });
        });

        $('#show-id-entidade').hide()
        $('#show-id-people').hide()

        id = $("#document_type_id").val();
        url = '/documents/models/get/active/inputs';
        data = {
            'id': id,
            '_token': '{{ csrf_token() }}'
        };

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: url,
            data: data,
            method: 'GET'
        }).success(function(data) {
            var result = JSON.parse(data);

            /*hiden inputs*/
            $('#show-id-entidade').hide()
            $('#show-id-people').hide()

            console.log(result)
            if (result[0]) {

                var id_entidade = result[0].id_entidade
                var id_people = result[0].id_people

                if (id_entidade == 1) {
                    $('#show-id-entidade').show()
                }
                if (id_people == 1) {
                    $('#show-id-people').show()
                }

            } else {
                console.log('não possui inputs vinculados a esse modelo')
            }
        });

        $(document).ready(function() {

            $('#document_type_id').on('change', function() {

                id = $("#document_type_id").val();
                url = '/documents/models/get/active/inputs';
                data = {
                    'id': id,
                    '_token': '{{ csrf_token() }}'
                };

                $.ajax({
                    url: url,
                    data: data,
                    method: 'GET'
                }).success(function(data) {
                    var result = JSON.parse(data);

                    /*hiden inputs*/
                    $('#show-id-entidade').hide()
                    $('#show-id-people').hide()

                    console.log(result)
                    if (result[0]) {

                        var id_entidade = result[0].id_entidade
                        var id_people = result[0].id_people

                        if (id_entidade == 1) {
                            $('#show-id-entidade').show()
                        }
                        if (id_people == 1) {
                            $('#show-id-people').show()
                        }
                    } else {
                        console.log('não possui inputs vinculados a esse modelo')
                    }
                });
            });
        });
    </script>
    <script>
        var limparBtn = document.getElementById('limpar-btn');
        limparBtn.addEventListener('click', function() {
            history.pushState({}, document.title, window.location.pathname);
        });

        var selectElement = document.getElementById('origin_document_id');
        selectElement.selectedIndex = 0;
    </script>

    <script>
        $(document).ready(function() {
            var isChecked = $('#assemblymanInactiveCheckbox').prop('checked');

            if (isChecked) {
                $('#assemblymanSelect').hide();
                $('#assemblymanInactiveSelect').show();
            } else {
                $('#assemblymanSelect').show();
                $('#assemblymanInactiveSelect').hide();
            }

            $('#assemblymanInactiveCheckbox').on('change', function() {
                var isChecked = $(this).prop('checked');
                if (isChecked) {
                    $('#assemblymanSelect').hide();
                    $('#assemblymanInactiveSelect').show();
                } else {
                    $('#assemblymanSelect').show();
                    $('#assemblymanInactiveSelect').hide();
                }
            });
        });
    </script>

    <script>
        //
        // Please read scanner.js developer's guide at: http://asprise.com/document-scan-upload-image-browser/ie-chrome-firefox-scanner-docs.html
        //
        //action into modal scanner
        $('#modalScanner').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var documentId = button.data('id');
            $('#document-scanner-id').val(documentId);
        });

        $('#formScannerCard').submit(function(e) {
            e.preventDefault();

            var actionForm = '/documents/' + $('#document-scanner-id').val() + '/attachament-scanner-upload';

            $('#formScannerCard').attr('action', actionForm);

            scannerSubmit();
        });

        /** Scan: output PDF original and JPG thumbnails */
        function scanToPdfWithThumbnails() {
            imagesScanned = [];

            scanner.scan(displayImagesOnPage, {
                "output_settings": [{
                        "type": "return-base64",
                        "format": "pdf",
                        "pdf_text_line": "By ${USERNAME} on ${DATETIME}"
                    },
                    {
                        "type": "return-base64-thumbnail",
                        "format": "jpg",
                        "thumbnail_height": 200
                    }
                ]
            });
        }

        /** Processes the scan result */
        function displayImagesOnPage(successful, mesg, response) {
            if (!successful) { // On error
                console.error('Failed: ' + mesg);
                return;
            }

            if (successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
                console.info('Usuário cancelou');
                return;
            }

            var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
            for (var i = 0;
                (scannedImages instanceof Array) && i < scannedImages.length; i++) {
                var scannedImage = scannedImages[i];
                processOriginal(scannedImage);
            }

        }

        /** Images scanned so far. */
        var imagesScanned = [];

        /** Processes an original */
        function processOriginal(scannedImage) {

            var exists = imagesScanned.some(function(image) {
                return image.src === scannedImage.src;
            });

            if (!exists) {
                imagesScanned.push(scannedImage);
            }
        }

        /** Processes a thumbnail */
        function processThumbnail(scannedImage) {
            var elementImg = scanner.createDomElementFromModel({
                'name': 'img',
                'attributes': {
                    'class': 'scanned',
                    'src': scannedImage.src
                }
            });
            document.getElementById('images').appendChild(elementImg);
        }

        function scannerSubmit() {
            /** Upload scanned images by submitting the form */
            if (scanner.submitFormWithImages('formScannerCard', imagesScanned, function(xhr) {
                    if (xhr.readyState == 4) { // 4: request finished and response is ready
                        document.getElementById('server_response').innerHTML =
                            '<div class="alert alert-success" role="alert">Dados enviados com sucesso</div>'
                        //xhr.responseText;
                        document.getElementById('images').innerHTML = ''; // clear images
                        imagesScanned = [];

                        location.reload();
                    }
                })) {
                document.getElementById('server_response').innerHTML =
                    '<div class="alert alert-warning" role="alert">Aguarde processando dados ...</div>';
            } else {
                document.getElementById('server_response').innerHTML =
                    '<div class="alert alert-danger" role="alert">Ooops! é preciso digitalizar um documento, tente novamente</div>';
            }
        }
    </script>
    <style>
        .btn-custom {
            width: 220px;
            color: white;
            display: flex;
            font-size: 14px;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            margin-top: 18px;
            margin-left: 6px;
        }

        .reset-btn {
            background-color: orange;
        }

        .search-btn {
            background-color: #007bff;
        }

        .form-control {
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: none;
            background-color: #f9faff;
        }

        .form-control:focus {
            border-color: #0056b3;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
            outline: none;
            background-color: #fff;
        }

        label {
            font-size: 14px;
            margin-bottom: 6px;
            display: inline-block;
        }

        .checkbox-custom {
            position: relative;
            padding-left: 30px;
            cursor: pointer;
            user-select: none;
            color: #333;
            display: inline-block;
        }

        .checkbox-custom input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 20px;
            width: 20px;
            top: 0;
            left: 0;
            margin: 0;
            z-index: 2;
        }

        .checkbox-custom .checkmark {
            position: absolute;
            left: 0;
            top: 0;
            height: 20px;
            width: 20px;
            background-color: #f9faff;
            border: 2px solid #007bff;
            border-radius: 5px;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            z-index: 1;
        }

        .checkbox-custom input[type="checkbox"]:checked~.checkmark {
            background-color: #007bff;
            border-color: #0056b3;
        }

        .checkbox-custom .checkmark::after {
            content: "";
            position: absolute;
            display: none;
        }

        .checkbox-custom input[type="checkbox"]:checked~.checkmark::after {
            display: block;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

        .checkbox-custom:hover .checkmark {
            border-color: #0056b3;
        }

        .checkbox-custom input[type="checkbox"]:focus~.checkmark {
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
        }

        .container-buttons-search {
            display: flex;
            flex-direction: row;
            gap: 20px;
            width: 100%;
            margin-left: -20px;
        }

        .botao-reset {
            height: 38px;
            width: 100%;
            border: none;
            font-weight: bold;
            font-size: 13px;
            color: #fff;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 6px;
            margin-top: 18px;
            margin-left: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .container-btn {
            width: 100%;
        }

        .botao-submit {
            height: 38px;
            width: 100%;
            border: none;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 6px;
            margin-top: 18px;
            margin-left: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .botao-reset {
            background-color: #f6bb43;
        }

        .botao-reset:hover,
        .botao-reset:focus {
            background-color: #f6bb43;
            box-shadow: 0 6px 12px rgba(190, 108, 0, 0.6);
            outline: none;
        }

        .botao-submit {
            background-color: #38bb9b;
        }

        .botao-submit:hover,
        .botao-submit:focus {
            background-color: #38bb9b;
            box-shadow: 0 6px 12px rgba(0, 86, 179, 0.6);
            outline: none;
        }

        .botao-submit i {
            margin-right: 6px;
        }

        .botao-reset i {
            margin-right: 6px;
        }

        .botao-input-ocult {
            height: 38px;
            width: 100%;
            border: none;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 15px;
            margin-top: 18px;
            margin-left: 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .botao-input-ocult:hover,
        .botao-input-ocult:focus {
            background-color: #38bb9b;
            box-shadow: 0 6px 12px rgba(0, 86, 179, 0.6);
            outline: none;
        }
    </style>
@endsection