@extends('tenant.pos.pos-tabs')
@php
    $activeTab = 'sections';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.pos')  => '#',
            __('breadcrumb.sections')  => '#',
        ],
    ])
@endsection

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

@section('content-field')
    <div>
        <div>
            <button type="button" class="btn orange-btn" data-bs-toggle="modal" data-bs-target="#addNewSectionModal">
                @lang('pos/sections/index.add_new_section')
            </button>

            @include('tenant.pos.sections.create')
        </div>

        <table class="table table-bordered table-striped mt-3">
            <thead>
                <tr>
                    <th>#</th>
                    <th>@lang('pos/sections/index.branch')</th>
                    <th>@lang('pos/sections/index.name')</th>
                    <th>@lang('pos/sections/index.printer')</th>
                    <th>@lang('general.procedures')</th>
                </tr>
            </thead>

            <tbody>
                @forelse ($sections as $section)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $section->branch->name }}</td>
                        <td>{{ $section->name }}</td>
                        <td>{{ $section->printer ?? '---' }}</td>
                        <td>
                            <x-operations-btn>
                                @can('pos-sections-edit')
                                    <li>
                                        <button class="btn" data-bs-toggle="modal"
                                            data-bs-target="#editSectionModal-{{ $section->id }}">
                                            <i class="fas fa-edit"></i> @lang('general.edit')
                                        </button>
                                    </li>
                                @endcan

                                @can('pos-sections-delete')
                                    <li>
                                        <form action="{{ route('tenant.pos.sections.destroy', ['section' => $section->id]) }}"
                                            method="POST">
                                            @csrf
                                            @method('delete')
                                            <button type="button" class="btn confirm-delete-btn" title="{{__('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/sections/index.no_results')</td>
                    </tr>
                @endforelse
            </tbody>
        </table>


        @foreach ($sections as $section)
            @can('pos-sections-edit')
                @include('tenant.pos.sections.edit', ['section' => $section])
            @endcan
        @endforeach
    </div>
@endsection


@push('script')
    <script>
        $(() => {
            $(".confirm-delete-btn").click(function(e) {
                $.confirm({
                    title: $lang('pos.sections.index.confirm_delete_section'),
                    content: $lang('pos.sections.index.will_delete_section'),
                    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