<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')

    <section id="dashboard" class="ar-dashboard-height">
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>
            
            <div id="ar-dashboard-content">
                <a class="btn-regular" href="/booking-item-create?booking_id={{ $bookingId }}">+ Add Item</a>
                
                <div style="overflow:scroll">
                    <table id="ar-table">
                        <thead>
                            <tr>
                                <th style="width:1%">No.</th>
                                <th style="width:1%;white-space:nowrap">Booking ID</th>
                                <th>Description</th>
                                <th style="width:1%">Operation</th>
                            </tr>
                        </thead>
                        <tbody>
                             @foreach($bookingItems as $item)
                                <tr>
                                    <td>{{ $item->id }}</td>
                                    <td>{{ $item->booking_id }}</td>
                                    <td>{{ $item->name }}</td>
                                    <td>
                                        <?php $formName='delete'.$item->id ?>
                                        <form id="{{ $formName }}" method="post" action="/booking-item-delete">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $item->id }}">
                                            <input type="hidden" name="booking_id" value="{{ $item->booking_id }}">
                                            <a onclick="checkDelete('{{ $formName }}');" style="cursor:pointer"><i class="fa fa-trash"></i></a>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    @include('admin/ar-script')
</x-layout>