@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('page_title', 'Brochure')

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        Brochure Display Order
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-sm-12">

                <div class="panel panel-bordered">

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-4">
                                <h4>
                                    User Groups:
                                </h4>
                                <div class="table-responsive user-group-list">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <td>User Group Name</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($userGroups as $ug)
                                                <tr class="clickable-row clickable-groups {{ $ug->id == $brochureIdGroup ?'active':'' }}" data-href="{{ route('voyager.brochures.order.display') }}/categoryId/{{ $ug->id }}"
                                                data-selected="{{ $ug->id }}"
                                                    >
                                                    <td>
                                                        {{ $ug->group_name }}
                                                        <input class="selectedGroup {{ $ug->id == $brochureIdGroup ?'active':'' }}" type="hidden" name="selectedGroup" value="{{ $ug->id }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <br/>
                                <h4>
                                    Categories:
                                </h4>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <td>Category Name</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($bcategories as $bc)
                                                <tr class="clickable-row clickable-categories {{ $bc->id == $categoryId ?'active':'' }}" data-href="{{ route('voyager.brochures.order.display') }}/{{ $bc->id }}/groupId"
                                                    data-selected="{{ $bc->id }}">
                                                    <td>
                                                        {{ $bc->name }}
                                                        <input class="selectedCategory {{ $bc->id == $categoryId ?'active':'' }}" type="hidden" name="selectedCategory" value="{{ $bc->id }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <h4>
                                    Brochures: <span id="selectedGroupCategory"></span>
                                </h4>
                                <span><button class="btn sort_btn"">Sort Alphabetically</button></span>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover" id="brochure-table">
                                        <thead>
                                            <tr>
                                                <td>Image</td>
                                                <td>Name</td>
                                                <td>Filename</td>
                                                <td>Date Added</td>
                                            </tr>
                                        </thead>
                                        <tbody class="brochure-sortable">
                                            @foreach($brochures as $b)
                                                <tr data-display_order="{{ $b->display_order+1 }}" data-id="{{ $b->id }}">
                                                    <td>
                                                        <img src="{{ $b->display_image }}" height="100px" />
                                                    </td>
                                                    <td>
                                                        {{ $b->name }}
                                                    </td>
                                                    <td>
                                                    </td>
                                                    <td>
                                                        {{ \Carbon\Carbon::parse($b->created_at)->format('d/m/Y')}}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

<style type="text/css">
    .clickable-row {
        cursor: pointer;
    }
    .user-group-list {
        max-height: 300px;
    }
</style>
@stop

@section('javascript')
    <script>
        $(document).ready(function(){
            var group = $('.clickable-groups.active td').text();
            var category = $('.clickable-categories.active td').text();
            var title = group;

            if(group){
                
                if(category){
                    title = group + '>' + category;
                }

                $('#selectedGroupCategory').text(title);
            }
            

            // Sortable
            $('.brochure-sortable').sortable({

                stop: function( event, ui ) {

                    $('#voyager-loader').show();

                    var sortedList = [];
                    var selectedCategory = $('.selectedCategory.active').val();
                    var selectedGroup = $('.selectedGroup.active').val();

                    $(this).children().each(function(index) {
                        sortedList.push($(this).attr('data-id'));
                    });

                    $.ajax({
                        method: "POST",
                        url: "{{ route('voyager.brochures.order.change') }}",
                        data: {
                                order: sortedList,
                                category: selectedCategory,
                                group: selectedGroup,
                                _token: "{{ csrf_token() }}"
                            }
                    }).done(
                        function( msg ) {
                            $('#voyager-loader').hide();
                            toastr.success("Brochure Reordered");
                        }
                    );

                },
            });

            // Clicking the Brochure row
            $('.clickable-groups').on('click',function(e){
                
                $('.clickable-groups').removeClass('active');
                $(this).addClass('active');

                var selectedCategory = $('.clickable-categories.active').data('selected');
                var selectedGroup = $(this).data('selected');

                if(selectedGroup && selectedCategory){

                    window.location = $(this).data('href').replace("categoryId", selectedCategory);
                }

            });

            // Clicking the Brochure row
            $('.clickable-categories').on('click',function(e){
                
                $('.clickable-categories').removeClass('active');
                $(this).addClass('active');

                var selectedCategory  = $(this).data('selected');
                var selectedGroup = $('.clickable-groups.active').data('selected');

                if(selectedGroup && selectedCategory){

                    window.location = $(this).data('href').replace("groupId", selectedGroup);
                }
                 
            });

            $('.sort_btn').on('click',function(e){
                
                var table, rows, switching, i, x, y, shouldSwitch;
                table = document.getElementById("brochure-table");
                switching = true;

                while (switching) {

                    switching = false;
                    rows = table.rows;

                    for (i = 1; i < (rows.length - 1); i++) {

                        shouldSwitch = false;

                        x = rows[i].getElementsByTagName("TD")[1];
                        y = rows[i + 1].getElementsByTagName("TD")[1];

                        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

                        shouldSwitch = true;
                        break;
                        }
                    }
                    if (shouldSwitch) {

                        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                        switching = true;
                    }
                }


                $('#voyager-loader').show();

                    var sortedList = [];
                    var selectedCategory = $('.selectedCategory.active').val();
                    var selectedGroup = $('.selectedGroup.active').val();
                $('.brochure-sortable').children().each(function(index) {
                    sortedList.push($(this).attr('data-id'));
                });

                $.ajax({
                    method: "POST",
                    url: "{{ route('voyager.brochures.order.change') }}",
                    data: {
                            order: sortedList,
                            category: selectedCategory,
                            group: selectedGroup,
                            _token: "{{ csrf_token() }}"
                        }
                }).done(
                    function( msg ) {
                        $('#voyager-loader').hide();
                        toastr.success("Brochure Reordered");
                    }
                );
                 
            });



        });
    </script>
@stop