@extends('pagecomponents::layouts.master')

@section('title', '| Page Layout')

@section('content')

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Page Layout</h1>
</div>

@if (count($pillars_data) > 0)
{!! Form::open(['method' => 'PUT', 'url' => "/page-components/pillars/update-layout", 'class' => 'form-horizontal', 'role' => 'form']) !!}
<div class="row">
    <div class="col-md-12">
        <div class="alert alert-info" role="alert">
            <strong><i class="far fa-lightbulb"></i> Tip: </strong> Select one of the available pages showen on the left then drag and drop page sections to move them around and don't forget to press "Update" when you're done!
            <br />
            If you can't recognise the page section by its title use the +/- to view more details
            <br />
            <strong><i class="fa fa-info-circle"></i> Useful: </strong> Original order is displayed to the left of the Page Section header in blue</strong>
        </div>
    </div>
    <div class="nav flex-column nav-tabs border-0 mb-3 col-md-5 pl-3 pr-0" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        @foreach ($pillars_data as $code => $data)
        <a class="nav-link border-0 rounded-0" id="{{ $code }}-tab" data-toggle="pill" href="#{{ $code }}" role="tab" aria-controls="{{ $code }}" aria-selected="true">
            <i class="fas fa-check-circle text-success" title="Up to date" id="{{ $code }}-no-changes-icon"></i>
            <i class="fas fa-exclamation-circle text-danger d-none" title="Changes not saved" id="{{ $code }}-has-changes-icon"></i> {{ $data['pages_name'] }}
        </a>
        @endforeach
    </div>
    <div class="tab-content col-md-7 bg-white" id="v-pills-tabContent">
        <h4 class="text-center align-items-center tab-pane fade show active p-4">Start by selecting the page you'd like to edit!</h4>
        @foreach ($pillars_data as $code => $data)
        <div class="card shadow mb-4 tab-pane fade" id="{{ $code }}" role="tabpanel" aria-labelledby="{{ $code }}-tab">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    {{ $data['pages_name'] }}
                </h6>
                <input type="hidden" id="original-{{ $code }}-order" value="{{ implode(',', array_map(function($_p) { return $_p['id']; }, $data['pillars'])) }}" />
                <input type="hidden" name="pillars-order[{{ $code }}]" value="{{ implode(',', array_map(function($_p) { return $_p['id']; }, $data['pillars'])) }}" />
            </div>
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col-md-12">
                        <ul class="list-group soiswis-sortable" data-section="{{ $code }}">
                            @php
                            $index = 1
                            @endphp
                            @foreach ($data['pillars'] as $pillar)
                            <li class="list-group-item" data-id="{{ $pillar['id'] }}">
                                <div class="clearfix" style="cursor: move;">
                                    <h5 class="float-left"><i class="badge badge-default text-primary">{{ $index }}</i> {!! $pillar['name'] ? $pillar['name'] : $pillar['code'] !!}</h5>
                                    <button class="btn btn-default btn-sm float-right" type="button" data-toggle="collapse" data-target="#collapseId-{{ $pillar['id'] }}" title="Show/Hide pillar's main content">
                                        +/-
                                    </button>
                                </div>
                                <div class="collapse" id="collapseId-{{ $pillar['id'] }}">
                                    <hr />
                                    <div class="">
                                        {!! getLanguageTranslation($pillar['value']) !!}
                                    </div>
                                </div>
                            </li>
                            @php
                            $index++
                            @endphp
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    @if (Auth::user()->hasAnyRole(['ADMIN', 'EDITOR']))
    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="form-group">
                        <div class="col-md-8 col-md-offset-2">
                            <button type="submit" class="btn btn-primary">
                                Update
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
{!! Form::close() !!}
@else
<div class="row">
    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-body">
                <div class="row no-gutters p-4" style="display: block;">
                    <h4 class="text-center align-items-center">Seems like no <strong class="text-danger">active</strong> pillars have been set yet!</h4>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $(".soiswis-sortable").sortable({
            update: function(event, ui) {
                var order = [];
                var ul = $(this);
                ul.find('li').each(function() {
                    var li = $(this);
                    if (typeof li.data('id') != 'undefined')
                        order.push(li.data('id'));
                });
                console.log('order: ', order);
                $(`input[name="pillars-order[${ul.data('section')}]"]`).val(order.join(','));
                $(`#${ul.data('section')}-no-changes-icon`).toggleClass('d-none', $(`input[name="pillars-order[${ul.data('section')}]"]`).val() !== $(`#original-${ul.data('section')}-order`).val());
                $(`#${ul.data('section')}-has-changes-icon`).toggleClass('d-none', $(`input[name="pillars-order[${ul.data('section')}]"]`).val() === $(`#original-${ul.data('section')}-order`).val());
            }
        });
        $(".soiswis-sortable").disableSelection();
    });
</script>
@endpush