@php
    $url = $_SERVER['HTTP_HOST'];
@endphp
<div class="panel panel-default">
    <div class="panel-heading" style="text-align: center; font-size: 15px;">
        <span class="panel-title text-uppercase">
            <span class="panel-title text-uppercase">
                <label class="pull-right">
                    {{-- chama modal de box --}}
                    <i class="fa fa-info-circle" aria-hidden="true" onclick="getDocumentBoxId('{{ $document->id }}')"
                        style="cursor: pointer;"></i>
                </label>
                <label class="pull-left">
                    <i class="fa fa-file" style="margin-right: 5px;"></i>
                    @if (
                        @$document->document_type &&
                            is_object($document->document_type) &&
                            property_exists($document->document_type, 'name'))
                        {!! Str::limit($document->document_type->name, 14, '...') !!}
                    @endif

                    @if ($document->number)
                        @if (Auth::user()->roleHasPermission('document.editnumero'))
                            {{ Str::limit($document->document_type->name, 14, '...') }}
                            <a href="javascript:void(0)" id="numberEdit{{ $document->id }}"
                                onclick="alteraNumero('{{ $document->id }}');">
                                {!! $document->number . '/' . $document->getYear($document->date) !!}
                            </a>
                        @else
                            {{ Str::limit($document->document_type->name, 14, '...') }}
                            <span style="color: #37BC9B">
                                {!! $document->number . '/' . $document->getYear($document->date) !!}
                            </span>
                        @endif
                    @else
                        {!! Str::limit($document->document_type->name, 14, '...') !!}
                    @endif
                </label>

                <label>
                    <span>
                        {!! $document->date !!}
                    </span>
                </label>
            </span>
        </span>
    </div>

    <div class="panel-body">
        <span style="padding: 0; font-size: 13px;">
            <div class="col-sm-12" style="padding: 0">
                <div class="col-md-7" style="display: flex;  padding: 0;">
                    <span class="text-uppercase">
                        <label>
                            <i class="fa fa-user"></i>
                            @if ($document->owner)
                                {!! $document->owner->short_name !!}
                            @else
                            @endif <br>
                        </label>
                    </span>
                </div>
                <div style="display:flex;">
                    @shield('document.read')
                        <label for="lido_{{ $document->id }}">
                            Lido:
                            <input id="lido_{{ $document->id }}" type="checkbox"
                                onclick="changeRead('{!! $document->id !!}')" {!! $document->read > 0 ? 'checked' : '' !!}>
                        </label>
                    @endshield
                    @shield('document.approved')
                        <span style="margin-left: 10px; margin-right: 1px; !important">
                            <label style="font-weight: normal !important;">
                                Aprovado:
                                <input onchange="changeApproved('{!! $document->id !!}')" type="checkbox"
                                    {!! $document->approved > 0 ? 'checked' : '' !!}>
                            </label>
                        </span>
                    @endshield
                    <br>
                </div>

                <input id="document-scanner-id" type="text" value="{!! $document->id !!}" hidden>

                <button class="btn tooltip-custom btn-xs" data-toggle="modal" data-target="#modalScanner">
                    <i class="fa fa-print"aria-hidden="true"></i>
                    <span class="tooltip-text">Scanner</span>
                </button>
                <br>
                <br>
                <span>
                    <label>
                        <strong>Número:</strong>
                        <span id="tdnumber{{ $document->id }}">
                            @if ($document->number === 0)
                                -
                            @elseif($document->number !== 0)
                                @if (Auth::user()->roleHasPermission('document.editnumero'))
                                    <a href="javascript:void(0)" id="numberEdit{{ $document->id }}"
                                        onclick="alteraNumero('{{ $document->id }}');">
                                        {!! $document->number !!}{!! '/' . $document->getYear($document->date) !!}
                                    </a>
                                @else
                                    <span style="color: #37BC9B">
                                        {!! $document->number . '/' . $document->getYear($document->date) !!}
                                    </span>
                                @endif
                            @else
                                @if (Auth::user()->roleHasPermission('document.editnumero'))
                                    <span style="color: #37BC9B">
                                        {!! $document->number !!}{!! '/' . $document->getYear($document->date) !!}
                                    </span>
                                @endif
                            @endif
                        </span>
                    </label>
                </span>
                <br>
                <span>
                    <label>
                        <strong>Protocolo: </strong>
                        <span id="tdprotocol{{ $document->id }}">
                            @if (!$document->document_protocol && !Auth::user()->roleHasPermission('document.createProtocolNumber'))
                            @elseif (!$document->document_protocol && Auth::user()->roleHasPermission('document.createProtocolNumber'))
                                <button type="button" class='btn btn-default btn-xs btn-protocol'
                                    value="{!! $document->id !!}">
                                    <i class="glyphicon glyphicon-folder-open"></i>
                                </button>
                            @else
                                @if (Auth::user()->roleHasPermission('document.editprotocol'))
                                    <a href="javascript:void(0)" id='linkProtocolo{{ $document->id }}'
                                        onclick="alteraProtocolo(
                                            '{!! $document->id !!}',
                                            '{{ date('d/m/Y H:i:s', strtotime($document->document_protocol->created_at)) }}'
                                            );">
                                        @if ($document->document_protocol)
                                            {{ $document->document_protocol->number }}
                                        @endif
                                    </a>
                                @else
                                    <span style="color: rgb(55, 62, 188)">
                                        @if ($document->document_protocol)
                                            {{ $document->document_protocol->number }}
                                        @endif
                                    </span>
                                @endif
                            @endif
                        </span>
                    </label>
                    <span>
                        <label>
                            <strong>Nº Processo: </strong>
                            @if ($document->nr_process_ano)
                                <a href="javascript:void(0)" onclick="editProcess('{!! $document->id !!}')">
                                    {!! str_replace(['\\', '[', ']', '"'], '', $document->nr_process_ano) !!}
                                </a>
                            @else
                                <button type="button" class='btn btn-default btn-xs btn-process'
                                    value="{!! $document->id !!}">
                                    <i class="glyphicon glyphicon-folder-open"></i>
                                </button>
                            @endif
                        </label>
                    </span>
                </span>
            </div>
            <div class="col-sm-12" style="padding: 0;">
                <label style="margin-top: 10px; min-height: 8rem">
                    <strong>Ementa:</strong>
                    <br />
                    <span>
                        @if ($document->resume === '')
                        @else
                            <div class="resume">
                                @if (strlen($document->resume) >= 200)
                                    {!! substr(strip_tags($document->resume), 0, strrpos(substr(strip_tags($document->resume), 0, 200), ' ')) .
                                        '...' !!}
                                @else
                                    {!! strip_tags($document->resume) !!}
                                @endif
                            </div>
                        @endif
                    </span>
                </label>
            </div>
            <div class="col-sm-6" style="padding: 0">
                <span>
                    <label>
                        <strong>Data Tram:</strong>
                        <span>
                            @if (count($document->processingDocument) === 0)
                            @else
                                {!! $document->processingDocument->first()->processing_document_date !!}
                            @endif
                        </span>
                    </label>
                </span>
                <br>
                <span>
                    <label>
                        <strong>Status:</strong>
                        <span>
                            @if (count($document->processingDocument) === 0)
                            @else
                                {!! $document->processingDocument->first()->documentSituation->name !!}
                            @endif
                        </span>
                    </label>
                </span>
                <br>
                <label>
                    <strong>Destinatário:</strong>
                    <span>
                        @if (count($document->processingDocument) === 0)
                        @else
                            {!! \App\Models\Destination::where('id', $document->processingDocument->first()->destination->id)->pluck('name')->first() !!}
                        @endif
                    </span>
                </label>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <span class="badge {{ $document->document_protocol ? 'badge-protocolado' : 'badge-aberto' }}">
                        {{ $document->document_protocol ? 'Protocolado' : 'Aberto' }}
                    </span>
                </div>

            </div>
            <br>
        </span>
    </div>
    {{-- Modal scanner --}}
    <div id="modalScanner" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Scanner</h4>
                </div>
                <div class="modal-body">

                    <form id="formScannerCard">
                        @csrf
                        <div class="form-group col-sm-12">
                            <h1> Digitalização de documentos </h1>

                            <div style="text-align:center;" id="server_response"></div>
                            <div class="form-group col-md-6">
                                {!! Form::label('filename', 'Nome:') !!}
                                {!! Form::text('filename', null, ['class' => 'form-control']) !!}
                            </div>

                            {!! Form::label('digitalizar', 'Clique no botão para iniciar: ') !!}
                            {!! Form::button('Abrir Scan', [
                                'type' => 'button',
                                'class' => 'btn btn-lixo',
                                'onclick' => 'scanToPdfWithThumbnails();',
                            ]) !!}

                            {!! Form::button('Enviar', [
                                'type' => 'submit',
                                'class' => 'btn btn-primary',
                            ]) !!}
                            <hr class="hr">

                        </div>
                    </form>

                </div>
                <div class="clearfix" style="padding:0;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal"
                        onclick="">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    {{-- TESTE AQUI PLMDS PLMDS PLMDS PLMDS PLMDS PLMDS  --}}
    <div class="panel-footer">
        {!! Form::open(['route' => ['documents.destroy', $document->id], 'method' => 'delete']) !!}
        <div class="btn-group-footer action" id="tdoptions{{ $document->id }}">

            @shield('list.signers')
                @if ($document->downloaded_bry == 1)
                    <a href="{!! route('signature.pdf.download', [$document->id]) !!}" target="_blank" class="btn btn-sm rounded-pill icon-btn shadow-sm"
                        title="Download">
                        <i class="fas fa-download"></i>
                    </a>
                @else
                    <a href="{!! route('documents.signature', [$document->id]) !!}" target="_blank"
                        class="btn btn-editar btn-sm rounded-pill icon-btn shadow-sm" title="Assinar">
                        <i class="fas fa-lock"></i>
                    </a>
                @endif
            @endshield

            @shield('documents.show')
                <a href="{!! route('documents.show', [$document->id]) !!}" target="_blank"
                    class="btn btn-file btn-sm rounded-pill icon-btn shadow-sm" title="Gerar PDF">
                    <i class="fas fa-file-pdf"></i>
                </a>
            @endshield

            @if (
                ($document->read > 0 && $document->approved > 0 && Auth::user()->can_request_executive_not_root) ||
                    Auth::user()->hasRole('root'))
                <a onclick="answer({{ $document }})"
                    class="btn btn-info-footer btn-sm rounded-pill icon-btn shadow-sm" title="Responder">
                    <i class="fas fa-paper-plane"></i>
                </a>
            @endif

            @if (!Auth::user()->can_request_executive_not_root || Auth::user()->hasRole('root'))
                @shield('documents.advices')
                    <a href="{!! route('documents.advices', [$document->id]) !!}" class="btn btn-dark btn-sm rounded-pill icon-btn shadow-sm"
                        title="Tramitação">
                        <i class="fas fa-list-alt"></i>
                    </a>
                @endshield

                @shield('documents.edit')
                    <a href="{!! route('documents.attachament', [$document->id]) !!}" class="btn btn-anexo btn-sm rounded-pill icon-btn shadow-sm"
                        title="Anexar Arquivo">
                        <i class="fas fa-paperclip"></i>
                    </a>
                @endshield

                @shield('documents.advices')
                    <a href="{!! route('documents.legal-option', [$document->id]) !!}" class="btn btn-parecer btn-sm rounded-pill icon-btn shadow-sm"
                        title="Pareceres">
                        <i class="fas fa-clipboard"></i>
                    </a>
                @endshield

                @shield('documents.edit')
                    @if (in_array($url, [
                            'cmcorumba.localhost:8000',
                            'cmcorumba.legissuper.com.br',
                            'cmiguatemi.legissuper.com.br',
                            'iguatemi.localhost:8000',
                            'rioverde.localhost:8000',
                            'rioverde.legissuper.com.br',
                        ]))
                        @if (!$document->document_protocol || Auth::user()->sector_id == 1)
                            <a href="{!! route('documents.edit', [$document->id]) !!}"
                                class="btn btn-editar btn-sm rounded-pill icon-btn shadow-sm" title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>
                        @endif
                    @else
                        <a href="{!! route('documents.edit', [$document->id]) !!}" class="btn btn-editar btn-sm rounded-pill icon-btn shadow-sm"
                            title="Editar">
                            <i class="fas fa-edit"></i>
                        </a>
                    @endif
                @endshield

                @shield('documents.delete')
                    @php
                        $isUsed = \App\Models\MeetingPauta::where('document_id', $document->id)->exists();
                    @endphp
                    <input id="id_document" type="text" value="{{ $document->id }}" hidden>
                    @if (!$isUsed)
                        <a @popper(REMOVER)>
                            {!! Form::button('<i class="fas fa-trash"></i>', [
                                'type' => 'submit',
                                'class' => 'btn btn-lixo btn-sm icon-btn',
                                'onclick' => 'sweet(event)',
                            ]) !!}
                        </a>
                    @else
                        <a @popper(NÃO PODE REMOVER)>
                            {!! Form::button('<i class="fas fa-trash"></i>', [
                                'type' => 'button',
                                'class' => 'btn btn-lixo btn-sm icon-btn disabled',
                                'disabled' => 'disabled',
                            ]) !!}
                        </a>
                    @endif
                @endshield
            @endif
        </div>

        <div class="clearfix"></div>
        {!! Form::close() !!}
    </div>
</div>

@include('documents.modal_boxes')


<script>
    function sweet(e) {
        var url = `/documents/` + documentId;

        var data = {
            '_token': '{{ csrf_token() }}'
        };

        sweetDelete(e, url, data)
    }

    $('label').css('font-weight', 'normal');
</script>


<script src="{!! asset('chosen_v1.8.7/chosen.jquery.js') !!}" type="text/javascript"></script>
<script>
    function searchPost() {

        const url = '/documents/table/search';

        const data = {
            _token: '{{ csrf_token() }}',
            ocr: $('#flexCheckDefault').val(),
            owner_id: $('#assemblymanSelect').val(),
            document_type_id: $('#multiple-select-clear-field').val(),
            first_doc_num: $('#first_num').val(),
            second_doc_num: $('#second_num').val(),
            first_ord_num: $('#first_ord_num').val(),
            second_ord_num: $('#second_ord_num').val(),
            startDate: $('#start-date').val(),
            endDate: $('#end-date').val()
        }


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

    }

    let document_id = 0;

    function getIdocumentTopassScanner(id) {
        document_id = id;
    }

    function getDocumentBoxId(id) {

        fetch(`/api/documents/${id}/boxes`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro ao carregar dados do documento.');
                }
                return response.json();
            })
            .then(data => {
                $('#modal-info-old-card').modal('show');
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(2) div')
                    .innerText =
                    `Local: ${data.location}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(3) div')
                    .innerText =
                    `Prateleira: ${data.shelf}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(4) div')
                    .innerText =
                    `Gaveta: ${data.drawer}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(5) div')
                    .innerText =
                    `Caixa: ${data.box}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(6) div')
                    .innerText =
                    `Data Tramitação: ${data.date}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(7) div')
                    .innerText =
                    `Status: ${data.status}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(8) div')
                    .innerText =
                    `Destinatário: ${data.recipient}`;
            })
    }


    function getIdDocument(id) {
        document_id = id

        const url = `/toggle/get/documents/${id}`;

        const data = {
            _token: '{{ csrf_token() }}'
        }
        $('#titleDocument').html('');
        $('#protocolDocument').html('');
        $('#numberDocument').html('');
        $('#numberProcess').html('');
        $('#dateDocument').html('');

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

            console.log(data.protocol, data.date_protocol);

            $('#document_id_edit').val('');
            $('#date_protocol_edit').val('');
            $('#protocol_date_edit').val('');

            if (data.protocol != 0) {
                $('#is-not-protocoled').hide();
                $('#is-protocoled').show();

                $('#document_id_edit').val(document_id);
                $('#date_protocol_edit').val(data.date_protocol);
                $('#protocol_date_edit').val(data.date_protocol);

            } else {
                $('#is-protocoled').hide();
                $('#is-not-protocoled').show();
            }

            $('#titleDocument').html('');
            $('#protocolDocument').html('');
            $('#numberDocument').html('');
            $('#numberProcess').html('');
            $('#dateDocument').html('');

            $('#titleDocument').prepend(data.title);
            $('#numberDocument').prepend('Número: ' + data.number);
            $('#protocolDocument').prepend('Protocolo: ' + data.protocol);
            $('#numberProcess').prepend('Nº Processo: ' + data.process);
            $('#dateDocument').prepend('Data: ' + data.date);
        });
    }

    function formatdata(data) {
        return data.map(doc => {
            return {
                title: doc.title
            }
        })
    }

    $(document).ready(function() {
        $(".documentChosen").chosen({
            disable_search_threshold: 10,
            no_results_text: "Nada encontrado!",
        });
        $('#document_type_id').on('change', function() {
            updateDocumentInputs();
        });
    });

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

    function limparURLERecarregar() {
        window.location = '/documents/table/show';
    }

    function changeViewDocuments(param) {
        var url = '/toggle/change/view/documents/' + param;

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


    var changeRead = function(id) {
        var url = '/documents-read/' + id + '/toggle';
        $.ajax({
            method: "GET",
            url: url,
            dataType: "json"
        }).success(function(result, textStatus, jqXHR) {
            // console.log(result);
        });
    }

    var changeApproved = function(id) {
        var url = '/documents-approved/' + id + '/toggle';
        $.ajax({
            method: "GET",
            url: url,
            dataType: "json"
        }).success(function(result, textStatus, jqXHR) {
            //            console.log(result);
        });
    }
    $('#show-id-entidade').hide()
    $('#show-id-people').hide()

    $('#multiple-select-clear-field').on('change', function() {
        mouseOutModels();
    });

    function mouseOutModels() {
        var id = $('#multiple-select-clear-field').val();
        console.log(id);

        if (!id) {
            console.log('Nenhum valor selecionado');
            return;
        }

        var url = '/documents/models/get/active/inputs';
        var data = {
            'id': id,
            '_token': '{{ csrf_token() }}'
        };

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

            $('#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');
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log("Erro na requisição: " + textStatus);
        });
    }
</script>
<style>
    .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: #fff;
        font-size: 15px;
        margin: 0 3px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        text-decoration: none;
        border: none;
        cursor: pointer;
    }

    .icon-btn i {
        transition: transform 0.2s ease;
    }

    .icon-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .icon-btn:hover i {
        transform: scale(1.2);
    }

    .btn-file {
        background-color: #007bff;
        /* Azul */
        color: #fff;
    }

    .btn-info-footer {
        background-color: #17a2b8;
        color: #fff;
    }

    .btn-anexo {
        background-color: #6f42c1;
        color: #fff;
    }

    .btn-editar {
        background-color: #28a745;
        color: #fff;
    }

    .btn-dark {
        background-color: #343a40;
        color: #fff;
    }

    .btn-parecer {
        background-color: #ffc107;
        color: #fff;
    }

    .btn-lixo {
        background-color: #f44336;
        color: #fff;
    }

    .btn-file:hover {
        background-color: #0069d9;
        color: white;
    }

    .btn-info-footer:hover {
        background-color: #138496;
        color: white;
    }

    .btn-anexo:hover {
        background-color: #5a32a3;
        color: white;
    }

    .btn-editar:hover {
        background-color: #218838;
        color: white;
    }

    .btn-dark:hover {
        background-color: #23272b;
        color: white;
    }

    .btn-parecer:hover {
        background-color: #e0a800;
        color: white;
    }

    .btn-lixo:hover {
        background-color: #d32f2f;
        color: white;
    }


    .icon-btn i {
        transform: scale(1.2);
        font-size: 1.5rem;
    }

    .badge-protocolado,
    .badge-aberto {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
    }

    .badge-protocolado {
        background-color: #007bff;
        color: white;
    }

    .badge-aberto {
        background-color: #fd7e14;
        color: white;
    }
</style>