@extends('layout.user')
@section('content')
    <div class="page-title">
        <div class="left-column">
            <h4>{{$room->title ?? ''}}</h4>
        </div>
        <div class="right-column">
            <div class="search-field">
                <button class="plan-btn red-btn del_check_items"   style="display: none;margin-right: 10px"><img
                        src="{{asset('images/delete.png')}}"/>Delete Selected
                </button>

                <form>
                    <input type="text" class="white-field" placeholder="Search item"
                           onkeyup="searchFunction(this.value)"/>
                    <button class="btn-search"><img src="{{asset('images/search-icon.png')}}"/></button>
                </form>
                {{--{{--                href="{{route('policyholder.add_item',[$room->id])}}"--}}
                @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                    <a class="btn-add" href="{{route('policyholder.add_item',[$room->id])}}" {{--onclick="showItemConfirmationPopup()"--}}>+ Add new
                        item</a>
                @else
                    <a class="btn-add" data-toggle="modal" data-target="#membership_expired_modal">+ Add new item</a>
                @endif
            </div>
        </div>
    </div>
    <section class="contact-form">
        <div class="tabs-table">
            <div class="tabs-head">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#home">All Items ({{count($room->allItems)}})</a></li>
                    <li><a data-toggle="tab" href="#menu1">Labeled Items ({{count($room->labeledItems)}})</a></li>
                    <li><a data-toggle="tab" href="#menu2">Unlabeled Items ({{count($room->unlabeledItems)}})</a></li>
                </ul>
            </div>
            <div class="tab-content" id="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <div class="table table-responsive">
                        @if(count($room->allItems) > 0)
                            <table>
                                <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Serial No.</th>
                                    <th>Qty</th>
                                    <th>Price (ea.)</th>
                                    <th>Age (Yr/Mo)</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($room->allItems as $item)
                                    <tr class="items-row item_list_{{$item->id}} tr-search" data-id="{{$item->id}}">
                                        <td>
                                            <div class="custom-checkbox">
                                                <input type="checkbox"   style="display:none;" value="{{$item->id}}"
                                                       id="checkbox_item_{{$item->id}}"
                                                       onclick="selectPhotosFromCheckbox()"/>
                                                <label for="checkbox_item_{{$item->id}}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <img src="{{asset('/images/drag_icon.svg')}}" data-toggle="tooltip" data-placement="top" title="Hold down the left mouse button to move the item up or down to rearrange the order of the items in this room."/>
                                        </td>
                                        <td>
                                            <div class="name-backup">
                                                @if(isset($item->photos[0]))
                                                    @if (file_exists(public_path($item->photos[0]?->compressed_image_path)))
                                                        <div class="room-imgs"
                                                               style=" transform: rotate({{(isset($item->photos[0]) ? $item->photos[0]->degree : 0)}}deg); background-image:url('{{asset(isset($item->photos[0]) ? $item->photos[0]->compressed_image_path : 'images/photos.png')}}')">
                                                        </div>
                                                    @else
                                                        <div class="room-imgs"
                                                               style=" transform: rotate({{(isset($item->photos[0]) ? $item->photos[0]->degree : 0)}}deg); background-image:url('{{(isset($item->photos[0]) ? $item->photos[0]->compressed_image_path : 'images/photos.png')}}')">
                                                        </div>
                                                    @endif
                                                @endif


                                            </div>
                                        </td>
                                        {{--                                    <td>{{$item->item_name ?? \App\AppConstants::EMPTY_LABEL}}</td>--}}
                                        <td>
                                            @if(strlen($item->item_name) > 0)
                                                <span>
                                            {{strlen($item->item_name) > \App\AppConstants::ITEM_NAME_LENGTH ? substr($item->item_name,0,\App\AppConstants::ITEM_NAME_LENGTH )."..." : $item->item_name}}
                                        </span>
                                            @else
                                                <span>{{\App\AppConstants::EMPTY_LABEL}}</span>
                                            @endif
                                        </td>

                                        <td>
                                            {{$item->brand ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>
                                            {{$item->model ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>
                                            {{$item->serial_number ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>{{$item->quantity_lost ?? \App\AppConstants::EMPTY_LABEL}}</td>
                                        <td>{{$item->cost_replace ?? \App\AppConstants::EMPTY_LABEL}}</td>
                                        <td>
                                            @if(isset($item->age_year)  > 0)
                                                {{$item->age_year ?? \App\AppConstants::EMPTY_LABEL}} / {{$item->age_month ?? \App\AppConstants::EMPTY_LABEL}}
                                            @endif
                                        </td>


                                        <td>

                                            <div class="action-btn">
                                                <a href="{{route('policyholder.item_detail',[$item->id])}}"
                                                   class="plan-btn gray-btn"><img
                                                        src="{{asset('images/icon-eye.png')}}"/>View
                                                </a>
                                                <a href="{{route('policyholder.edit_item',[$item->id])}}"
                                                   class="plan-btn gray-btn"><img
                                                        src="{{asset('images/edit-icon.png')}}"/>Edit
                                                </a>
                                                <button onclick="deleteItem({{$item->id}}, {{$item}})"
                                                        class="plan-btn gray-btn"><img
                                                        src="{{asset('images/delete-icon.png')}}"/>Delete
                                                </button>
                                                <button data-toggle="modal" data-target="#move_room" onclick="setItemId({{$item->id}})"
                                                        class="plan-btn gray-btn">
                                                    <i class="fa fa-expand-arrows-alt"></i>&nbsp;Move
                                                </button>

                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        @else
                            @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                                @include('snippets.no_records_href', ['title' => "No Item Found", 'message' => 'You have not added your items yet.', 'target'=> 'policyholder.add_item', 'id' => $room->id ,'button'=> '+ Add Item' , 'image'=> asset('images/menu_icon1.png')])
                            @else
                                @include('snippets.no_records', ['title' => "No Item Found", 'message' => 'You have not added your items yet.', 'target'=>'#membership_expired_modal','button'=> '+ Add Item' , 'image'=> asset('images/menu_icon1.png')])
                            @endif
                        @endif
                    </div>
                </div>
                <div id="menu1" class="tab-pane fade">
                    <div class="table table-responsive">
                        @if(count($room->labeledItems) > 0)

                            <table>
                                <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Serial No.</th>
                                    <th>Qty</th>
                                    <th>Price (ea.)</th>
                                    <th>Age (Yr/Mo)</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($room->labeledItems as $item)
                                    <tr class="items-row item_list_{{$item->id}} tr-search" data-id="{{$item->id}}">
                                        <td>
                                            <div class="custom-checkbox">
                                                <input type="checkbox"   style="display:none;" value="{{$item->id}}"
                                                       id="checkbox_item_{{$item->id}}"
                                                       onclick="selectPhotosFromCheckbox()"/>
                                                <label for="checkbox_item_{{$item->id}}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="name-backup">
                                                @if(count($item->photos) > 0)
                                                    @if (file_exists(public_path($item->photos[0]?->compressed_image_path)))
                                                        <div class="room-imgs"
                                                               style=" transform: rotate({{(isset($item->photos[0]) ? $item->photos[0]->degree : 0)}}deg); background-image:url('{{asset(isset($item->photos[0]) ? $item->photos[0]->compressed_image_path : 'images/photos.png')}}')">
                                                        </div>
                                                    @else
                                                        <div class="room-imgs"
                                                               style=" transform: rotate({{(isset($item->photos[0]) ? $item->photos[0]->degree : 0)}}deg); background-image:url('{{(isset($item->photos[0]) ? $item->photos[0]->compressed_image_path : 'images/photos.png')}}')">
                                                        </div>
                                                    @endif
                                                @else
                                                    <div class="room-imgs"
                                                           style="background-image:url('{{asset('images/photos.png')}}')">
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                        <td><span>{{$item->item_name ?? \App\AppConstants::EMPTY_LABEL}}</span></td>
                                        <td>
                                            {{$item->brand ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>
                                            {{$item->model ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>
                                            {{$item->serial_number ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>{{$item->quantity_lost ?? \App\AppConstants::EMPTY_LABEL}}</td>
                                        <td>{{$item->cost_replace ?? \App\AppConstants::EMPTY_LABEL}}</td>
                                        <td>
                                            @if(isset($item->age_year) > 0)
                                                {{$item->age_year ?? \App\AppConstants::EMPTY_LABEL}} / {{$item->age_month ?? \App\AppConstants::EMPTY_LABEL}}
                                            @endif
                                        </td>
                                        <td>
                                            <div class="dropdown-dots">
                                                <span class="small-dots"></span>
                                                <span class="small-dots"></span>
                                                <span class="small-dots"></span>
                                            </div>
                                            <div class="menu-items">
                                                <ul>
                                                    <li>
                                                        <div class="action-btn">
                                                            <a href="{{route('policyholder.item_detail',[$item->id])}}"
                                                               class="plan-btn red-btn"><img
                                                                    src="{{asset('images/view.png')}}"/>View
                                                            </a>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="action-btn">
                                                            <a href="{{route('policyholder.edit_item',[$item->id])}}"
                                                               class="plan-btn red-btn"><img
                                                                    src="{{asset('images/edit-icon.png')}}"/>Edit
                                                            </a>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="action-btn">
                                                            <button onclick="deleteItem({{$item->id}}, {{$item}})"
                                                                    class="plan-btn red-btn"><img
                                                                    src="{{asset('images/delete.png')}}"/>Delete
                                                            </button>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

                        @else
                            @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                                @include('snippets.no_records_href', ['title' => "No Item Found", 'message' => 'You have not added your items yet.', 'target'=> 'policyholder.add_item', 'id' => $room->id ,'button'=> '+ Add Item' , 'image'=> asset('images/menu_icon1.png')])
                            @else
                                @include('snippets.no_records', ['title' => "No Item Found", 'message' => 'You have not added your items yet.', 'target'=>'#membership_expired_modal','button'=> '+ Add Item' , 'image'=> asset('images/menu_icon1.png')])
                            @endif
                        @endif
                    </div>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <div class="table table-responsive">

                        @if(count($room->unlabeledItems) > 0)

                            <table>
                                <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Serial No.</th>
                                    <th>Qty</th>
                                    <th>Price (ea.)</th>
                                    <th>Age (Yr/Mo)</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($room->unlabeledItems as $item)
                                    <tr class="tr-search items-row item_list_{{$item->id}}" data-id="{{$item->id}}">
                                        <td>
                                            <div class="custom-checkbox">
                                                <input type="checkbox"   style="display:none;" value="{{$item->id}}"
                                                       id="checkbox_item_{{$item->id}}"
                                                       onclick="selectPhotosFromCheckbox()"/>
                                                <label for="checkbox_item_{{$item->id}}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="name-backup">
                                                @if (file_exists(public_path($item->photos[0]?->compressed_image_path)))
                                                    <div class="room-imgs"
                                                           style=" transform: rotate({{(isset($item->photos[0]) ? $item->photos[0]->degree : 0)}}deg); background-image:url('{{asset(isset($item->photos[0]) ? $item->photos[0]->image_path : 'images/photos.png')}}')">
                                                    </div>
                                                @else
                                                    <div class="room-imgs"
                                                           style=" transform: rotate({{(isset($item->photos[0]) ? $item->photos[0]->degree : 0)}}deg); background-image:url('{{(isset($item->photos[0]) ? $item->photos[0]->image_path : 'images/photos.png')}}')">
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                        <td><span>{{$item->item_name ?? \App\AppConstants::EMPTY_LABEL}}</span></td>
                                        <td>
                                            {{$item->brand ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>
                                            {{$item->model ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>
                                            {{$item->serial_number ?? \App\AppConstants::EMPTY_LABEL}}
                                        </td>
                                        <td>{{$item->quantity_lost ?? \App\AppConstants::EMPTY_LABEL}}</td>
                                        <td>{{$item->cost_replace ?? \App\AppConstants::EMPTY_LABEL}}</td>
                                        <td>
                                            @if(isset($item->age_year)  > 0)
                                                {{$item->age_year ?? \App\AppConstants::EMPTY_LABEL}} / {{$item->age_month ?? \App\AppConstants::EMPTY_LABEL}}
                                            @endif
                                        </td>
                                        <td>
                                            <div class="dropdown-dots">
                                                <span class="small-dots"></span>
                                                <span class="small-dots"></span>
                                                <span class="small-dots"></span>
                                            </div>
                                            <div class="menu-items">
                                                <ul>
                                                    <li>
                                                        <div class="action-btn">
                                                            <a href="{{route('policyholder.item_detail',[$item->id])}}"
                                                               class="plan-btn red-btn"><img
                                                                    src="{{asset('images/view.png')}}"/>View
                                                            </a>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="action-btn">
                                                            <a href="{{route('policyholder.edit_item',[$item->id])}}"
                                                               class="plan-btn red-btn"><img
                                                                    src="{{asset('images/edit-icon.png')}}"/>Edit
                                                            </a>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="action-btn">
                                                            <button onclick="deleteItem({{$item->id}}, {{$item}})"
                                                                    class="plan-btn red-btn"><img
                                                                    src="{{asset('images/delete.png')}}"/>Delete
                                                            </button>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

                        @else
                            @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                                @include('snippets.no_records_href', ['title' => "No Item Found", 'message' => 'You have not added your items yet.', 'target'=> 'policyholder.add_item', 'id' => $room->id ,'button'=> '+ Add Item' , 'image'=> asset('images/menu_icon1.png')])
                            @else
                                @include('snippets.no_records', ['title' => "No Item Found", 'message' => 'You have not added your items yet.', 'target'=>'#membership_expired_modal','button'=> '+ Add Item' , 'image'=> asset('images/menu_icon1.png')])
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </section>
    @include('modal.add_item_option_modal')
    @include('modal.enter_bar_code_modal')
    @include('modal.move_room')
@endsection
@section('js_file')
    <script nonce="{{config('app.nonce')}}" type="text/javascript" src="{{ asset('js/room_details.js?v=').time()}}"></script>
    <script nonce="{{config('app.nonce')}}">
        function setItemId(id){
            $('#move_item_id').val(id);
        }

        function showItemConfirmationPopup() {
            $('#manual_add_item').attr('href', '{{route('policyholder.add_item',[$room->id])}}');
            $('#skip_add_item').attr('href', '{{route('policyholder.add_item',[$room->id])}}');

            $('#confirmation_item_modal').modal('show');
        }

        $('.dropdown-dots').click(function () {
            $(this).next('.menu-items').slideToggle();
        });

        var oldindex, newindex = '';
        {{--        let room_id = {{$item->room_id}}--}}
        let room_id = {{$room->id}}
        $('tbody').sortable({
            revert: true,
            helper: 'clone',
            update: function (event, ui) {
                newindex = ui.item.index();
            },
            start: function (event, ui) {
                oldindex = ui.item.index();
            },
            stop: function (event, ui) {
                record_id = ui.item.attr('data-id');
                oldindex = oldindex + 1;
                newindex = newindex + 1;

                $.ajax({
                    type: "POST",
                    url: `${baseUrl}policyholder/change_sequence`,
                    data: {
                        'oldindex': oldindex,
                        'newindex': newindex,
                        'record_id': record_id,
                        'room_id': room_id,
                    },
                    dataType: 'json',
                    beforeSend: function (request) {
                        return request.setRequestHeader('X-CSRF-Token', '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/room/detail.blade.php:431
Stack trace:
#0 {main}
  thrown in <b>/home/contentsbuddylit/public_html/developers.contentsbuddylite.com/resources/views/room/detail.blade.php</b> on line <b>431</b><br />