@extends('layout.user')
@section('content')
<style >
    .floating-anchors{
        position: absolute;
        z-index: 10;
        bottom: 35px;
        left: 30px;
    }
    .tooltip {
        box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
    }


    </style>
    <div class="page-title">
        <div class="left-column">

            <h4>{{$heading?? 'MY Rooms'}}
                <span class="total-items-text">${{$sum_two_decimal}}</span>
                <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is the total dollar amount of your contents"></i>
            </h4>

        </div>
        <div class="right-column">
            <div class="search-field">
                <form>
                    <input type="text" class="white-field" placeholder="Search item"
                           onkeyup="searchFunction(this.value)"/>
                    <button class="btn-search" type="button"><img src="{{asset('images/search-icon.png')}}"/></button>
                </form>
                @if(\App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                    <button data-toggle="modal" data-target="#add_new_room" class="btn-add">
                        + Add new room
                        <i class="fa fa-info-circle"   style="color: white" data-toggle="tooltip" data-placement="bottom" title="Click here to create a new room.  All room names must be unique.  You cannot use a room name more than once."></i>
                    </button>
                @else
                    <button data-toggle="modal" data-target="#membership_expired_modal" class="btn-add" data-toggle="tooltip" data-placement="bottom" title="Click here to create a new room.  All room names must be unique.  You cannot use a room name more than once.">+ Add new room</button>
                @endif
            </div>
        </div>
    </div>
    @if(count($rooms)>0)
        <section class="contact-form">
            <div class="room-lists" id="rooms-list"    style="height: auto;">
                @foreach($rooms as $room)
                    @if(isset($room->allItems) && count($room->allItems) > 0)

                            <div class="room-column"   style="height: 285px" id="room-{{$room->id}}">
                                <div class="edit-btns">
                                    <a href="{{route('policyholder.room_detail',[$room->id])}}"><img
                                            src="{{asset('images/icon-eye.png')}}" /></a>
                                    <a href="javascript:void(0)" onclick="editRoom({{$room->id}}, {{$room}})"><img
                                            src="{{asset('images/edit-icon.png')}}" data-toggle="tooltip" data-placement="top" title="Change the name of this room."/></a>
                                    <a href="javascript:void(0)" onclick="deleteRoom({{$room->id}}, {{$room}})"><img
                                            src="{{asset('images/delete-icon.png')}}" data-toggle="tooltip" data-placement="top" title=" Delete this room and all of it’s contents."/></a>
                                </div>
                                <a   style="position: absolute;width: 100%;height: 100%;z-index: 1" data-toggle="tooltip"  title="Click here to see the contents of this room." href="{{route('policyholder.room_detail',[$room->id])}}"></a>
                            <div class="room-inner-column">


                                    <div class="room-head">
                                        <div class="room-images">
                                            @foreach($room->roomPhotos as $key=>$photo)
                                                @if($key < 3)
                                                    @if (file_exists(public_path($photo->compressed_image_path)))
                                                        <div class="room-img1"   style="transform: rotate({{$photo->degree}}deg);background-image:url('{{asset($photo->compressed_image_path)}}')"></div>
                                                    @else
                                                        <div class="room-img1"   style="transform: rotate({{$photo->degree}}deg);background-image:url('{{($photo->compressed_image_path)}}')"></div>
                                                    @endif
                                                @else
                                                    @break;
                                                @endif
                                            @endforeach
                                        </div>
                                        @if(count($room->roomPhotos) > 3)
                                            <p>+{{count($room->roomPhotos) - 3}} more</p>
                                        @endif
                                    </div>
                                    <div class="room-content">
                                        <h3>{{$room->title}}</h3>
                                        <ul>

{{--                                            <li>--}}
{{--                                                <img src="{{asset('images/group.png')}}"/>{{$room->groups_count}} Groups--}}
{{--                                            </li>--}}
                                            <li>
                                                <img src="{{asset('images/group.png')}}"/>{{$room->items_count}} Items
                                            </li>
                                            <li>
                                                <img
                                                    src="{{asset('images/photo_icon.png')}}"/>{{$room->room_photos_count}}
                                                Photos
                                            </li>
                                            <li>
                                                <img
                                                    src="{{asset('images/claim.png')}}"/>${{number_format((float)$room->items->sum('cost_replace'), 2, '.', '')}}
                                            </li>
                                        </ul>

                                    </div>

                            </div>

                        </div>
                    @else

                            <div class="room-column"   style="height: 285px;" id="room-{{$room->id}}">
                                @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                                    <a class="floating-anchors" href="{{route('policyholder.add_item',[$room->id])}}">
                                        <img src="{{asset('images/add_icon.png')}}"/>Add Items
                                    </a>
                                @else
                                    <a class="floating-anchors" href="" data-toggle="modal" data-target="#membership_expired_modal">
                                        <img src="{{asset('images/add_icon.png')}}"/>Add Items
                                    </a>
                                @endif
                                <div class="edit-btns">
                                    <a href="{{route('policyholder.room_detail',[$room->id])}}"><img
                                            src="{{asset('images/icon-eye.png')}}"/></a>
                                    <a href="javascript:void(0)" onclick="editRoom({{$room->id}}, {{$room}})"><img
                                            src="{{asset('images/edit-icon.png')}}" data-toggle="tooltip" data-placement="top" title="Change the name of this room."/></a>
                                    <a href="javascript:void(0)" onclick="deleteRoom({{$room->id}}, {{$room}})"><img
                                            src="{{asset('images/delete-icon.png')}}" data-toggle="tooltip" data-placement="top" title=" Delete this room and all of it’s contents."/></a>
                                </div>
                                <a   style="position: absolute;width: 100%;height: 100%;z-index: 1" data-toggle="tooltip" title="Click here to see the contents of this room." href="{{route('policyholder.room_detail',[$room->id])}}"></a>
                            <div class="room-inner-column">
                                <div class="room-head">
                                <div class="room-images">
                                    <div class="room-img1"
                                           style="background-image:url('{{asset('images/new-room-logo.jpeg')}}')"></div>
                                </div>
                                </div>
                                <div class="room-content">
                                    <h3>{{$room->title}}</h3>
                                    <p>There is no item</p>
{{--                                    <a href="{{route('policyholder.add_item',[$room->id])}}"><img--}}
{{--                                            src="{{asset('images/add_icon.png')}}"/>Add Items</a>--}}
                                </div>

                            </div>
                        </div>

                    @endif
                @endforeach


            </div>

        </section>
    @else
        <div>
            @if(\App\Helpers\HelperMethods::checkIfSubscriptionExists() )
            @include('snippets.no_records', ['title' => "No Room Found", 'message' => 'Add at least one room to continue.', 'target'=>'#add_new_room','button'=> '+ Add new room' , 'image'=> asset('images/menu_icon1.png')])
            @else
                @include('snippets.no_records', ['title' => "No Room Found", 'message' => 'Add at least one room to continue.', 'target'=>'#membership_expired_modal','button'=> '+ Add new room' , 'image'=> asset('images/menu_icon1.png')])
            @endif
        </div>
    @endif


    @include('modal.edit_new_room')
    @include('modal.add_item_option_modal')
    @include('modal.enter_bar_code_modal')

@endsection
@section('js_file')
    <script nonce="{{config('app.nonce')}}" type="text/javascript" src="{{ asset('js/rooms.js?v=').time()}}"></script>

    <script nonce="{{config('app.nonce')}}">

        function showItemConfirmationPopup(route)
        {
            $('#manual_add_item').attr('href',route);
            $('#skip_add_item').attr('href',route);

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

    </script>
    <script nonce="{{config('app.nonce')}}">
        $( function() {
            $( "#rooms-list" ).sortable({  option: "tolerance", opacity: '0.9', cursor: 'mouse', update(event, ui){
                    var data = $(this).sortable('toArray');

                    console.log(data);
                    $.ajax({
                        data: {data:data},
                        type: 'GET',
                        url: '{{route('policyholder.room.sort.save')}}',
                        success: function(msg){

                        }
                    });

                }});
        } );

    </script>
@endsection