@extends(layoutTenant())
@section('title')
<title>Processos finalizados- PapelZero </title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

@php $pagina = "config"; @endphp

@endsection
@section('content')

<style>
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    #app {
        width: 90vw;
        height: 85vh;
        min-height: 865px;
        display: flex;
        justify-content: center;
        padding: 2.2rem;
    }

    .app-container {
        margin-top: 0;
        padding: 50px;
        width: 100%;
        min-width: 530px;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }

    .app-header h5 {
        font-size: 2rem;
    }

    .app-content {
        margin-top: 70px;
        display: flex;
        flex-direction: row;
        gap: 50px;
    }

    .card-colum {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 33%;
        min-width: 120px;
    }

    .card-begin {
        background-color: #47bc6f;
        color: white;
        display: flex;
        width: 25%;
        justify-content: center;
        align-items: center;
    }

    .card-body {
        width: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-for-swap {
        cursor: grab;
    }

    .card-for-swap::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -15px;
        right: -15px;
        background: #47bc8e;
        height: 220px;
        width: 25px;
        border-radius: 32px;
    }

    .card {
        display: flex;
        flex-direction: row;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        min-height: 30px;
        width: 100%;
        border-radius: 10px;
        z-index: 0;
        filter: drop-shadow(0 5px 10px 0 #ffffff);
        transition: 0.6s ease-in;
        position: relative;
        overflow: hidden;
    }

    .card-no-swap::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -15px;
        right: -15px;
        background: #47bc8e;
        height: 220px;
        width: 25px;
        border-radius: 32px;
        transform: scale(1);
        transform-origin: 50% 50%;
        transition: transform 0.25s ease-out;
    }

    .card-no-swap:hover::before {
        transition-delay: 0.2s;
        transform: scale(40);
    }

    .card-no-swap:hover {
        color: #ffffff;
    }

    .btn {
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        min-height: 50px;
        min-width: 100px;
        cursor: pointer;
    }

    .btn-primary {
        background-color: rgba(0, 155, 255, 0.5);
        transition: background-color 0.5s;
    }

    .btn-primary:hover {
        background-color: rgba(0, 155, 255, 1);
    }

    .app-header {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 50px;
        width: 50vw;
    }

    .card-header{
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        color: black;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }
</style>

@if ($errors->all())
<div class="alert alert-danger" role="alert">
    <ul>

        @foreach ($errors->all() as $erro)
        <li>{{ $erro }}</li>
        @endforeach

    </ul>
</div>
@endif
@if (session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif
@if (session('erro'))
<div class="alert alert-danger">
    {{ session('erro') }}
</div>
@endif
<div id="app">
    <div class="app-container">
            <div class="card-header">
                <h4 class="card-title">
                    Arraste e solte para alterar a ordem dos cards
                </h4>
            </div>
        <div class="app-content">

            <div class="card-colum">
                @foreach($itens->take(2) as $item)
                <div class="card card-no-swap">
                    <div class="card-begin">
                        <p>cod {{ $item->cod }} </p>
                    </div>
                    <div class="card-body">
                        <p> {{ $item->name }} </p>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="card-colum" id="sortable-container">
                @foreach($itens->slice(2, -1) as $item)
                <div name="{{ $item->id }}" data-id="{{ $item->cod }}" id="{{ $item->cod }}" class="card card-for-swap">
                    <div class="card-begin">
                        <p>cod {{ $item->cod }} </p>
                    </div>
                    <div class="card-body">
                        <p> {{ $item->name }} </p>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="card-colum">
                @foreach($itens->slice(-1) as $item)
                <div class="card card-no-swap">
                    <div class="card-begin">
                        <p>cod {{ $item->cod }} </p>
                    </div>
                    <div class="card-body">
                        <p> {{ $item->name }} </p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <button class="btn btn-primary" type="button" onclick="updateOrder()">SAVE</button>
    </div>
</div>

@endsection

@section('post-script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        const sortable = new Sortable(document.getElementById('sortable-container'), {
            animation: 150,
            onEnd: function(evt) {
                const itemId = evt.item.getAttribute('data-id');
                const newIndex = evt.newIndex + 3;
                const items = document.querySelectorAll('.card-for-swap');
                items.forEach(item => {
                    const currentId = parseInt(item.getAttribute('data-id'), 10);

                    if (currentId > itemId && currentId <= newIndex) {
                        item.setAttribute('data-id', currentId - 1);
                    } else if (currentId < itemId && currentId >= newIndex) {
                        item.setAttribute('data-id', currentId + 1);
                    }
                });
                evt.item.setAttribute('data-id', newIndex);
                console.log(`Item ID: ${itemId}, Nova Posição: ${newIndex}`);
            },
        });
    });

    function updateOrder() {
        const items = document.querySelectorAll('.card-for-swap');
        const cardProperties = Array.from(items).map(card => {
            return {
                newPos: card.dataset.id,
                id: card.getAttribute('name'),
            };
        });
        console.log(cardProperties);
        $.post('{{routeTenant("config.ordem-processos.update")}}', {

            data: {
                cardProperties
            }
        }, function(response) {
            console.log(response);
            // location.reload();
        });

    }
</script>
@endsection