@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 + "/tableDelete/" ; }
            if (actT == 'S') 
                { aURL = aURL + actID + "/timeDelete/" ; }

            $.ajax(
            {   url: aURL, success: function(result)
               {
						if (result=='OK')
						{
							$(oid).hide(1000);
						}
               }
            });
        });
    });
</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 class="button is-primary" href="/tablesPP">{{ trans('labels.back')}}</a>
					</div>
				</div>
			</div>
			<hr/>
			<div class="buttons">
					@foreach($tablesPP as $tablePP)
						@if ($tablePP->is_active == 1 )
							<button class="button is-danger" 
									id      ="t-{{ $tablePP->id }}"
									actT    ="T"
									actID   ="{{ $tablePP->id }}"
							>
									{{ $tablePP->table_label }}
							</button>
						@else
							<button class="button is-danger is-light" 
									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">
						</div>
					</div>
					<hr/>
						<div class="tabs is-left">
						<ul>
		<br />
<b>Warning</b>:  Undefined variable $timeslots in <b>/home/abazis/apps/eveil/resources/views/tablesPP/delete.blade.php</b> on line <b>124</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/abazis/apps/eveil/resources/views/tablesPP/delete.blade.php</b> on line <b>124</b><br />
            
						</ul>
					</div>

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