@extends('tenant.pos.pos-tabs')

@php
    $activeTab = 'tables-and-sections';
    $subTab    = 'tables';
@endphp

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.pos')    => '#',
            __('breadcrumb.tables') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'pos.tables-and-sections'])
@endsection

@section('content-field')
    <div>
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4>@lang('pos/tables-and-sections.tables_and_sections')</h4>

            <div class="btn-group" role="group" aria-label="tables or sections tab" dir="ltr">
                <a href="{{ route('tenant.pos.tables.index') }}"
                   class="btn toggle-view-btn {{ $subTab == 'tables' ? 'active-btn' : '' }}">
                    @lang('pos/tables-and-sections.tables')
                </a>

                <a href="{{ route('tenant.pos.tables-sections.index') }}"
                   class="btn toggle-view-btn {{ $subTab == 'sections' ? 'active-btn' : '' }}">
                    @lang('pos/tables-and-sections.sections')
                </a>
            </div>
        </div>

        <div>
            @can('pos-tables-add')
                <button type="button" class="btn orange-btn" data-bs-toggle="modal" data-bs-target="#addNewTableModal">
                    @lang('pos/tables/index.add_new_table')
                </button>
        
                @include('tenant.pos.tables.create')
            @endcan
        </div>        

        <div class="form-bg-color p-4 rounded-form mt-3">
            <h5 class="mb-3">@lang('pos/tables/index.tables_list')</h5>

            <table class="table table-bordered table-striped mt-3">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>@lang('pos/tables/index.table_name')</th>
                        <th>@lang('pos/tables/index.section')</th>
                        <th>@lang('pos/tables/index.capacity')</th>
                        <th>@lang('pos/tables/index.description')</th>
                        <th>@lang('general.procedures')</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tables as $table)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $table->name }}</td>
                            <td>{{ $table->section->name }}</td>
                            <td>{{ $table->capacity }}</td>
                            <td>{{ $table->description ?? '---' }}</td>
                            <td>
                                <x-operations-btn>
                                    @can('pos-tables-edit')
                                        <li>
                                            <button class="btn" data-bs-toggle="modal"
                                                data-bs-target="#editTableModal-{{ $table->id }}">
                                                <i class="fas fa-edit"></i> @lang('general.edit')
                                            </button>
                                        </li>
                                    @endcan
                                    @can('pos-tables-delete')
                                        <li>
                                            <form action="{{ route('tenant.pos.tables.destroy', ['table' => $table->id]) }}"
                                                method="POST">
                                                @csrf
                                                @method('delete')
                                                <button type="button" class="btn confirm-delete-btn" :title="$lang('general.delete')">
                                                    <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                                </button>
                                            </form>
                                        </li>
                                    @endcan
                                </x-operations-btn>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%">@lang('pos/tables/index.no_tables_yet')</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            @foreach ($tables as $table)
                @include('tenant.pos.tables.edit', ['table' => $table, 'sections' => $sections])
            @endforeach
        </div>
    </div>
@endsection

@push('script')
<script>
    $(() => {
        $(".confirm-delete-btn").click(function(e) {
            $.confirm({
                title: $lang('pos.tables.index.confirm_delete_table'),
                content: $lang('pos.tables.index.will_delete_table'),
                type: "red",
                buttons: {
                    ok: {
                        text:  $lang('general.yes'),
                        btnClass: "btn orange-btn",
                        keys: ["enter"],
                        action: () => {
                            $(this).closest("form").submit();
                        }
                    },
                    cancel: {
                        text:  $lang('general.no'),
                        btnClass: "btn-default",
                        keys: ["esc"]
                    }
                }
            });
        });
    });
</script>
@endpush