@extends('admin.base-admin')


@section('content')
    <div class="tela-hidden cancela" id="cancel-tela"></div>

    <!--planilha computadores-->
    <section class="mb-5">
        <div class="topline" style="background-image: linear-gradient(to right , #1bafff, #00b3ff, #1bddff); "></div>

    </section>

    <div class="container-fluid">
        <div class=" header p-2">
            <div class="title">
                <h2>Computadores</h2>
                <span>Assistencia</span>
            </div>
            <div class="buttons">
                <button type="button" id="save" class="btn-save hidden"><i class="bi bi-check-lg mr-2"></i>Salvar
                    alterações</button>
            </div>
        </div>



        <div class="divider-modern"></div>
        <div class="row text-center" style="justify-content: space-evenly;">
            <div class="col-md-3 saida">
                <h2 >Entrada</h2>
                <a data-toggle="modal" data-target="#modalChamado" title="Adicionar"><i class="bi bi-plus-lg"></i></a>
            </div>
            <div class="col-md-3 saida">
                <h2>Bancada</h2>
            </div>
            <div class="col-md-3 saida">
                <h2>Saída</h2>
                <a id="history" data-toggle="modal" data-target="#modalHistory" title="Histórico"><i class="bi bi-clock-history"></i></a>
            </div>

        </div>
        <div class="row" style="justify-content: space-evenly">
            <div class="col-md-3 column" id="status1">
                <div class="topline" style="background-image: linear-gradient(45deg, #9bf9d2, #c0f9b3);"></div>
                @foreach ($pc_entrada as $p)
                    <div class="card text-left" data-id="{{ $p['id'] }}" data-ticket="{{ $p['tickets_id'] }}"
                        draggable="true">
                        <div class="card-body">
                            <div class="col-12 text-center">
                                <h3 class="mb-4">{{ $p['name'] }}</h3>
                                <button class="popover-btn" id="{{ $p['id'] }}"><i class="fa fa-ellipsis-v"
                                        aria-hidden="true"></i>
                                </button>
                                <div class="popover-content">
                                    <button class="btn-remove" type="button">
                                        <i class="fas fa-trash mr-2"></i>Remover
                                    </button>
                                    <button class="btn-edit" data-toggle="modal" data-target="#modalEdita">
                                        <i class="fas fa-pen mr-2"></i>Editar
                                    </button>

                                </div>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Filial</strong></p>
                                <p class="mb-2">{{ $filiais[$p['locations_id']] }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Entrada</strong></p>
                                <p class="mb-2">{{ date('d/m/y', strtotime($p['begin_date'])) }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>TAG</strong></p>
                                <p class="mb-2">{{ $p['extra'] }}</p>
                            </div>


                            <div class="line">
                                <p class="mb-2"><strong>Chamado ref.</strong></p>
                                <p class="mb-2">#{{ $p['tickets_id'] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="col-md-3 column" id="status2">
                <div class="topline" style="background-image: linear-gradient(45deg, #f9eb9b, #f9ddb3);"></div>

                @foreach ($pc_bancada as $p)
                    <div class="card text-left" data-id="{{ $p['id'] }}" data-ticket="{{ $p['tickets_id'] }}"
                        draggable="true">
                        <div class="card-body">
                            <div class="col-12  text-center">
                                <h3 class="mb-4">{{ $p['name'] }}</h3>
                                <button class="popover-btn" id="{{ $p['id'] }}"><i class="fa fa-ellipsis-v"
                                        aria-hidden="true"></i>
                                </button>
                                <div class="popover-content">
                                    <button class="btn-remove" type="button">
                                        <i class="fas fa-trash mr-2"></i>Remover
                                    </button>
                                    <button class="btn-edit" data-toggle="modal" data-target="#modalEdita">
                                        <i class="fas fa-pen mr-2"></i>Editar
                                    </button>

                                </div>
                            </div>

                            <div class="line">
                                <p class="mb-2"><strong>Filial</strong></p>
                                <p class="mb-2">{{ $filiais[$p['locations_id']] }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Entrada</strong></p>
                                <p class="mb-2">{{ date('d/m/y', strtotime($p['begin_date'])) }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>TAG</strong></p>
                                <p class="mb-2">{{ $p['extra'] }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Chamado ref.</strong></p>
                                @if ($p['users_id'])
                                    <p class="mb-2">#{{ $p['tickets_id'] }} - {{ $tec[$p['users_id']] }}</p>
                                @else
                                    <p class="mb-2">#{{ $p['tickets_id'] }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="col-md-3 column" id="status3">
                <div class="topline" style="background-image: linear-gradient(45deg, #9bdbf9, #b3c0f9);"></div>

                @foreach ($pc_saida as $p)
                    <div class="card text-left" data-id="{{ $p['id'] }}" data-ticket="{{ $p['tickets_id'] }}"
                        draggable="true">
                        <div class="card-body">
                            <div class="col-12  text-center">
                                <h3 class="mb-4">{{ $p['name'] }}</h3>
                                <button class="popover-btn" id="{{ $p['id'] }}"><i class="fa fa-ellipsis-v"
                                        aria-hidden="true"></i>
                                </button>
                                <div class="popover-content">
                                    <button class="btn-remove" type="button">
                                        <i class="fas fa-trash mr-2"></i>Remover
                                    </button>
                                    <button class="btn-edit" data-toggle="modal" data-target="#modalEdita">
                                        <i class="fas fa-pen mr-2"></i>Editar
                                    </button>

                                </div>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Filial</strong></p>
                                <p class="mb-2">{{ $filiais[$p['locations_id']] }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Saída</strong></p>
                                <p class="mb-2">{{ date('d/m/y', strtotime($p['end_date'])) }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>TAG</strong></p>
                                <p class="mb-2">{{ $p['extra'] }}</p>
                            </div>
                            <div class="line">
                                <p class="mb-2"><strong>Chamado ref.</strong></p>
                                <p class="mb-2">#{{ $p['tickets_id'] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>

        </div>


    </div>

    <div id="alert"></div>
    {{-- MODAL ADD --}}
    <div class="container mb-5" style="margin-top: 100px;">
        <div class="modal fade" id="modalEdita" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h4 class="modal-title text-center" id="exampleModalLabel">
                            Editar
                        </h4>
                        <div class="card-body">
                            <form action="{{ route('edit_computer') }}" method="post">
                                {{ csrf_field() }}
                                <div class="form-group mb-3">
                                    <label for="nome" class="col-form-label sans">Nome</label>
                                    <input type="text" class="form-control" name="nome" id="nome" required
                                        placeholder="">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="marca" class="col-form-label sans">Tag</label>
                                    <input type="text" class="form-control" name="tag" id="tag"
                                        placeholder="">
                                </div>
                                <div class="form-group mb-5">
                                    <label for="quant" class="col-form-label sans">Complemento</label>
                                    <textarea class="form-control" name="complemento" min="0" id="complemento" placeholder=""></textarea>
                                </div>
                                <input type="hidden" id="id_edit" name="id" value="">

                                <div class="float">
                                    <input type="submit" value="Salvar"
                                        class="btn btn-block btn-status active rounded-0 py-2 px-4">
                                </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container mb-5" style="margin-top: 100px;">
        <div class="modal fade" id="modalHistory" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h4 class="modal-title text-center" id="exampleModalLabel">
                            Histórico
                        </h4>
                        <div class="card-body">
                            <div class="card-header row m-1 my-3" style="border-radius:0;">
                                <div class="col-md-1" style="align-self: center;" >
                                    <h5 class="text-center mt-3 fonte id" ><i class="fa fa-hashtag mr-1" aria-hidden="true"></i></h5>
                                </div>
                                <div class="col-md-3" style="align-self: center;">
                                    <h5 class="text-center" >Nome</h5>
                                </div>
                                <div class="col-md-2" style="align-self: center;" >
                                    <h5 class="text-center fonte id" >Entrada</h5>
                                </div>
                                <div class="col-md-2" style="align-self: center;" >
                                    <h5 class="text-center fonte id" >Saída</h5>
                                </div>
                                <div class="col-md-2" style="align-self: center;" >
                                    <h5 class="text-center fonte id" >TAG</h5>
                                </div>
                                <div class="col-md-2" style="align-self: center;" >
                                    <h5 class="text-center fonte" >Chamado</h5>
                                </div>
                            </div>
                            <div class="histo">

                                @foreach ($pc_all as $p)
                                    @if ($p['end_date'])


                                        <div class="card-header  row m-1 p-4"  data-id="{{$p['id']}}" style="border-radius:0;">
                                            <div class="col-md-1" style="align-self: center;" >
                                                <h5 class="text-center" ><i class="fa fa-hashtag mr-1" aria-hidden="true"></i>{{$p['id']}}</h5>
                                            </div>
                                            <div class="col-md-3 popover__wrapper ">
                                                <div class="popover__title  chamado_modal" style="text-transform: none" data-value="{{$p['id']}}" >
                                                    <h5 class="text-left fonte" style="font-family: 'Rubik', sans-serif; margin:0;" >
                                                        {{$p['name'] }}</h5>
                                                </div>
                                                <div class="popover__content">
                                                    <p class="popover__message">
                                                        {{$p['comment']}}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-md-2" style="align-self: center;" >
                                                <h5 class="text-center" >{{$p['begin_date']}}</h5>
                                            </div>
                                            <div class="col-md-2" style="align-self: center;" >
                                                <h5 class="text-center " >{{$p['end_date']}}</h5>
                                            </div>
                                            <div class="col-md-2" style="align-self: center;" >
                                                <h5 class="text-centerfonte" >{{$p['extra']}}</h5>
                                            </div>
                                            <div class="col-md-2" style="align-self: center;" >
                                                <h5 class="text-center fonte" >#{{$p['tickets_id']}}</h5>
                                            </div>
                                        </div>

                                    @endif


                                @endforeach
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalSolution" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-body conteudo-solucao">

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalChamado" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4 class="modal-title text-center" id="exampleModalLabel">
                        Selecione um chamado
                    </h4>
                    <div class="card-body">
                        @foreach ($chamado as $c)
                            <div class="card-header  row m-2 add"  data-id="{{$c['id']}}" style="border-radius:0;">
                                <div class="col-md-4" style="align-self: center;" >
                                    {{-- <h5 class="text-center mt-3 fonte id" ><i class="bi bi-snow mr-1" style="opacity: .5;" aria-hidden="true"></i>{{$chamado['id']}}</h5> --}}
                                    <h5 class="text-center mt-3 fonte id" ><i class="fa fa-hashtag mr-1" aria-hidden="true"></i>{{$c['id']}}</h5>
                                </div>
                                <div class="col-md-8 popover__wrapper ">
                                    <div class="popover__title  chamado_modal" style="text-transform: none" data-value="{{$c['id']}}" >
                                        <h5 class="text-left fonte" style="font-family: 'Rubik', sans-serif; margin:0;" >
                                            {{$c['name'] }}</h5>
                                    </div>
                                    <div class="popover__content">
                                        <p class="popover__message">
                                            {{$c['content_obs']}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .histo{
            height: 60vh;
            overflow-y: scroll;
            overflow-x: none;
        }
        .add:hover{
            cursor: pointer;
            background-color: hsla(0, 0%, 88%, 0.459) !important;
        }
        .popover__wrapper{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .popover__content{
            top:70px;
        }
        .popover-content button {
            color: rgba(33, 33, 33, 0.66);
            z-index: 12;
            position: relative;
            background: none;
            border: none;
            text-align: center;
            margin: .5em;
            z-index: 9999;
            transition: .2s ease;

        }

        .popover-content button:hover {
            color: rgba(56, 56, 56, 0.96) !important;

        }

        .popover-content:before {
            position: absolute;
            z-index: -1;
            content: "";
            right: calc(100% - 10px);
            top: 15px;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent #fcfcfc transparent;
            transition-duration: 0.3s;
            transform: rotate(-90deg);
            transition-property: transform;
        }

        .popover-btn {
            z-index: 11;
            position: absolute;
            right: 0;
            top: 0;
            background: none;
            border: none;
            padding: 0px 10px;
            font-size: 16px;
            color: #9191919f;
            transition: .3s ease;
        }

        .popover-btn:hover {
            color: #585858;
        }


        .popover-content {
            display: none;
            position: absolute;
            right: -170px;
            top: 0;
            width: 150px;
            background-color: #fcfcfc;
            box-shadow: 0 0 15px rgba(62, 62, 62, 0.281);
            padding: 10px;
            border-radius: 5px;
            z-index: 12;
            animation: fadeIn .2s ease-in-out;
            -webkit-animation: fadeIn .2s ease-in-out;
        }        
        
        body[data-isDarkmode="true"] .popover-content {
            background-color: #b5b5b5;
        }

        body[data-isDarkmode="true"] .popover-content:before{
            border-color: transparent transparent #b5b5b5 transparent;
        }


        body[data-isDarkmode="true"] .popover-content button:hover {
            color: rgba(255, 255, 255, 0.96) !important;

        }

        body[data-isDarkmode="true"] .popover-btn:hover {
            color: #ffffff;
        }


        .popover-btn.active+.popover-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: end;
        }

        .btn-save {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            font-family: 'Poppins';
            font-size: 14px;
            background: rgb(35, 134, 54);
            color: #ffffff;
            transition: .1s ease;
        }

        .btn-save:hover {
            background: rgb(70, 166, 89);
        }

        .tela-hidden.active {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 10;
            background-color: #00000000;
        }

        .btn-options {
            padding: 0px 10px;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 22px;
            color: #d3d3d383;
            transition: .1s ease;
        }

        .btn-options:hover {
            color: #d3d3d3fa;
        }

        .saida {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .saida a {
            position: absolute;
            right: 0;
            font-size: 22px;
            color: #d3d3d383 !important;
            transition: .1s ease;
        }

        .saida a:hover {
            transform: scale(1.1);
            color: #d3d3d3fa !important;
        }



        /* Dragula CSS Release 3.2.0 from: https://github.com/bevacqua/dragula */

        .gu-mirror {
            position: fixed !important;
            margin: 0 !important;
            z-index: 9999 !important;
            opacity: 0.8;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter: alpha(opacity=80);
        }

        .gu-hide {
            display: none !important;
        }

        .gu-unselectable {
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
        }

        .gu-transit {
            opacity: 0.2;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
            filter: alpha(opacity=20);
        }

        [draggable] {
            cursor: grab;
        }

        .out {
            cursor: not-allowed !important;
        }

        .dragging {
            cursor: grabbing !important;
        }

        .topline {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;

        }

        .line {
            display: flex;
            justify-content: space-between;
        }

        .divider-modern{
            margin-bottom: 70px;

        }

        body[data-isDarkmode="true"] .divider-modern {
            background: #d3d3d624;
            margin-bottom: 70px;

        }

        body[data-isDarkmode="true"] .divider-modern::before {
            background: #d3d3d3;
            width: 150px
        }

        body[data-isDarkmode="true"] .card {
            width: 100%;
            background: hsl(232, 16%, 18%) !important;
        }

        .column {
            padding: 30px;
            background: hsla(0, 0%, 89%, 0.601);
            border-radius: 10px;
            min-height: 600px;
            transition: .2s ease-in-out;
            margin-bottom: 50px;
        }

        body[data-isDarkmode="true"] .column {
            background: hsl(230, 19%, 12%);
        }

        p,
        h2 {
            user-select: none;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.js"
        integrity="sha512-MrA7WH8h42LMq8GWxQGmWjrtalBjrfIzCQ+i2EZA26cZ7OBiBd/Uct5S3NP9IBqKx5b+MMNH1PhzTsk6J9nPQQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {
            const data_pc = {!! json_encode($pc_all) !!};
            var array_data = [];
            var edit_id;
            var ticket;
            var status;
            var id;

            var drake = dragula([
                document.getElementById("status1"),
                document.getElementById("status2"),
                document.getElementById("status3")
            ]);
            revertOnSpill: false
            drake.on("drag", function(el) {
                el.classList.add("dragging");
            })
            drake.on("drop", function(el, container) {
                ticket = $(el).attr('data-ticket');
                id = $(el).attr('data-id');
                status = $(container).attr('id');
                el.classList.remove("dragging");
                data_check();
                if(status == 'status3'){
                    $.post('{{route("conteudo_Chamado")}}', {idchamado: ticket,  "_token": "{{ csrf_token() }}", 'tipo' : 'solucao'},
                        (result) => {
                            $(".conteudo-solucao").html(result)
                            $('#modalSolution').modal('show');
                            post_save();
                        });
                }
                else{
                    $('#save').removeClass('hidden');
                }


            })


            function post_save(){
                $.post("{{ route('save_computer') }}", {
                            array_data,
                            "_token": "{{ csrf_token() }}"
                    }
                );
            }

            function data_check() {
                let index = array_data.find(object => object.id === id);

                if (!index) {
                    let arr = {
                        'id': id,
                        'ticket': ticket,
                        'status': status
                    }
                    array_data.push(arr);
                } else {
                    index.status = status;

                }


            }


            $('.popover-btn').on('click', function() {
                edit_id = $(this).attr('id');
                $('.popover-btn').removeClass('active');
                $(this).addClass('active');
                $('#cancel-tela').addClass('active');
            })
            $('#cancel-tela').on('click', function() {
                edit_id = '';
                $('#cancel-tela').removeClass('active');
                $('.popover-btn').removeClass('active');
            })

            $('.btn-edit').on('click', function() {

                data_pc.forEach(element => {
                    if (element.id == edit_id) {
                        $('#id_edit').val(edit_id);
                        $('#nome').val(element.name);
                        $('#tag').val(element.extra);
                        $('#complemento').val(element.comment);

                    }
                });
            })

            $('.btn-remove').on('click', function() {
                $.post("{{ route('delete_computer') }}", {
                        id: edit_id,
                        "_token": "{{ csrf_token() }}"
                    },
                    (result) => {
                        if (result == 'success') {
                            location.reload();


                        }
                    }
                );
            })

            $('.add').on('click', function() {
                var ticket_id_add = $(this).attr('data-id');
                $.post("{{ route('add_computer') }}", {
                        id: ticket_id_add,
                        "_token": "{{ csrf_token() }}"
                    },
                    (result) => {
                        if (result == 'success') {
                            location.reload();

                        }
                    }
                );
            })

            $('#save').on('click', function() {
                $.post("{{ route('save_computer') }}", {
                        array_data,
                        "_token": "{{ csrf_token() }}"
                    },
                    (result) => {
                        if (result == 'success') {
                            $('#alert').html(
                                '<div class="alert-div success-alert"><i class="bi bi-check-circle-fill"></i>Salvo com sucesso!</div>'
                            );
                            $('#save').addClass('hidden');

                        }
                    }
                );
            })

        });
    </script>
@endsection