@extends('layouts.default')
@section('content')
<style>
    #tabs-with-content .tabs:not(:last-child) 
    {
     margin-bottom: 0;
    }

    #tabs-with-content .tab-content 
    {
    padding: 1rem;
    display: none;
    }

    #tabs-with-content .tab-content.is-active 
    {
    display: block;
    }
</style>
<script>
    $(document).ready(function()
    {   let tabsWithContent = (function () 
        {   let tabs = document.querySelectorAll('.tabs li');
            let tabsContent = document.querySelectorAll('.tab-content');

            let deactvateAllTabs = function () 
            {   tabs.forEach(function (tab) 
                {   tab.classList.remove('is-active');  });
            };

            let hideTabsContent = function () 
            {   tabsContent.forEach(function (tabContent) 
                {   tabContent.classList.remove('is-active');   });
            };

            let activateTabsContent = function (tab) 
            {   tabsContent[getIndex(tab)].classList.add('is-active');    };

            let getIndex = function (el) 
            {   return [...el.parentElement.children].indexOf(el);    };

            tabs.forEach(function (tab) 
            {   tab.addEventListener('click', function () 
                {   deactvateAllTabs();
                    hideTabsContent();
                    tab.classList.add('is-active');
                    activateTabsContent(tab);
                });
            })

            tabs[0].click();
        })();
        $("button").click(function(event)
        {
            obj     = event.target;
            actT    = obj.getAttribute('actT') ;
            actID   = obj.getAttribute('actID') ;
            aURL    = "/tablesPP/" ;
            oid     = '#' + obj.id ;
            if (actT == 'T') 
                { aURL = aURL + actID + "/tableActivate/" ; }
            if (actT == 'S') 
                { aURL = aURL + actID + "/timeActivate/" ; }

            $.ajax(
            {   url: aURL, success: function(result)
                {
                    $(oid).toggleClass("is-outlined");
                }
            });
        });
    });
</script>
    <section class="section">
        <div class="container">
            <div class="level">
                <div class="level-left">
                    <h2 class="title logis-red">{{ trans('labels.table') }}</h2>
                </div>
                <div class="level-right">
                    <div class="buttons">

                        <a href="/tablesPP/deleteSettings"
                            class="button is-danger is-outlined"
                        >
                            <span>{!! trans('labels.delete') !!}</span>
                            <span class="icon">
                                <i class="fas fa-trash"></i>
                            </span>
                        </a>
                        <a href="/tablesPP/create"
                            class="button is-primary"
                        >
                            <span>{!! trans('labels.add') !!}</span>
                            <span class="icon">
                                <i class="fas fa-plus-square"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            <hr/>
            <div class="buttons">
                @foreach($tablesPP as $tablePP)
                    @if ($tablePP->is_active == 1 )
                        <button class="button is-info" 
                            id      ="t-{{ $tablePP->id }}"
                            actT    ="T"
                            actID   ="{{ $tablePP->id }}"
                        >
                            {{ $tablePP->table_label }}
                        </button>
                    @else
                        <button class="button is-info is-outlined" 
                            id      ="t-{{ $tablePP->id }}"
                            actT    ="T"
                            actID   ="{{ $tablePP->id }}"
                        >
                            {{ $tablePP->table_label }}
                        </button>
                    @endif
                @endforeach
            </div> 
            <div id="tabs-with-content">
                <div class="level">
                    <div class="level-left">
                        <h2 class="title logis-red">{{ trans('labels.timeslot') }}</h2>
                    </div>
                    <div class="level-right">
                        <a href="/tablesPP/timeCreate"
                            class="button is-primary"
                        >
                            <span>{!! trans('labels.add') !!}</span>
                            <span class="icon">
                                <i class="fas fa-plus-square"></i>
                            </span>
                        </a>
                    </div>
                </div>
                <hr/>
                    <div class="tabs is-left">
                    <ul>
        <br />
<b>Warning</b>:  Undefined variable $timeslots in <b>/home/abazis/apps/logis-test/resources/views/tablesPP/index.blade.php</b> on line <b>145</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/abazis/apps/logis-test/resources/views/tablesPP/index.blade.php</b> on line <b>145</b><br />
            
                    </ul>
                </div>

                <div>
                    <br />
<b>Warning</b>:  Undefined variable $timeslots in <b>/home/abazis/apps/logis-test/resources/views/tablesPP/index.blade.php</b> on line <b>160</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/abazis/apps/logis-test/resources/views/tablesPP/index.blade.php</b> on line <b>160</b><br />
                                              </div>
                                        </section>
                </div>
            </div>
    </section>
@endsection