@extends('admin.layout.default')


@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2>Listagem</h2>
            </div>
        </div>
    </div>



    <table class="table table-bordered"  id="draggableTable">
        <tr>
            <th style="width: 10%;">Ordem</th>
            <th style="width: 35%;">Nome</th>
            <th style="width: 35%;">Rotas</th>
            <th style="width: 20%;">Ações</th>
        </tr>
    </table>

    <div class="items_table">
        @foreach ($pontos as $ponto)
            <div class="draggable">
                <p>{{ $ponto->order }}</p>
                <p>{{ $ponto->name }}</p>
                <p>{{ $ponto->routes->count() }}
                </p>
                <p>
                    <a class="btn btn-primary" href="{{ route('admin.pontos.edit',$ponto->id) }}">Editar</a>
                </p>
                <span style="display:none">{{ $ponto->id }}</span>
                <div style="clear: both;"></div>
            </div>
        @endforeach
    </div>
    <div>
        <button id="updateOrder" class="btn btn-primary btn-block" style="margin-top: 30px;">Atualizar ordem</button>
    </div>


    <style>
        .items_table{
            margin-top: -17px;
        }
        .items_table > div{
            border: 1px solid #eceeef;
            padding: 10px;
            border-top: 0px;
        }
        .items_table div p:nth-child(1){
            width: 10%;
            float: left;
        }
        .items_table div p:nth-child(2){
            width: 35%;
            float: left;
        }
        .items_table div p:nth-child(3){
            width: 35%;
            float: left;
        }
        .items_table div p:nth-child(4){
            width: 20%;
            float: left;
        }
        #loading{
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0,0,0,0.6);
            left: 0px;
            top: 0px;
            text-align: center;
            line-height: 100%;
            color: #fff;
            font-size: 2rem;
        }
    </style>
    <script>
        $( function() {
            $('#updateOrder').click(function(){
                $('#loading').show();
                let objTotal = $('.items_table > div').length;
                let objCount = 0;

                $('.items_table > div').each(function(){
                    let params = {};
                    params.id       = $('span', this).html();
                    params.order    = $('p:nth-child(1)', this).html();
                    $.ajax({
                        data: params,
                        method: 'GET',
                        url: "/api/rotas/pontos_update/"+params.id,
                        cache: false
                    }).done(function( html ) {
                        objCount = objCount + 1;
                        console.log(objCount, objTotal);
                        if(objCount == objTotal){
                            $('#loading').hide();
                        }
                    });
                });
            });
        } );
    </script>
<div id="loading" style="display:none">
    Salvando...
</div>
@endsection