@include('include.head')
@include('include.sidebar')

<main class="main-leftbar">
    <div class="top-headers">
        <div class="breadcrumbs">
            <p>You are in:</p>
            <ul>
                <li>Home</li>
                <li>></li>
                <li>Living Room</li>
            </ul>
        </div>
        <div class="user-login">
            <div class="login-header">
                <div class="login-img"   style="background-image:"{{asset('images/profile-img.png')}}""></div>
                <h5>Bessie Cooper</h5>
                <img src="{{asset('images/down_arrow.png')}}"/>
            </div>
            <div class="user-dropdown menu-items">
                <ul>
                    <li>
                        <a href="profile.blade.php"><img src="{{asset('images/user.png')}}"/>Profile</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"  data-toggle="modal" data-target="#change_Password"><img src="{{asset('images/key.png')}}"/>Change Password</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-toggle="modal" data-target="#logout_modal"><img src="{{asset('images/logout.png')}}"/>Logout</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div class="sidebar-icon">
            <div>
                <span class="sr-onlyss"></span>
                <span class="sr-onlyss"></span>
                <span class="sr-onlyss"></span>
            </div>
            <h6>Dashboard-menu</h6>
        </div>
        <div class="page-title">
            <div class="left-column">
                <h4>Living Room</h4>
            </div>
            <div class="right-column">
                <div class="search-field">
                    <form>
                        <input type="text" class="white-field" placeholder="Search item"/>
                        <button class="btn-search"><img src="{{asset('images/search-icon.png')}}"/></button>
                    </form>
                    <button class="btn-add">+ Add new room</button>
                </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 (20)</a></li>
                        <li><a data-toggle="tab" href="#menu1">Labeled Items (20)</a></li>
                        <li><a data-toggle="tab" href="#menu2">Unlabeled Items (0)</a></li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        <div class="table table-responsive">
                            <table>
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Brand</th>
                                    <th>Model </th>
                                    <th>Serial No.</th>
                                    <th>Qty</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="custom-checkbox">
                                            <input type="checkbox"   style="display:none;" id="checkbox1" checked/>
                                            <label for="checkbox1"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="name-backup">
                                            <div class="room-imgs"   style="background-image:"{{asset('images/photos.png')}}""></div> Comfort Chair
                                        </div>
                                    </td>
                                    <td>
                                        Bold
                                    </td>
                                    <td>
                                        2013
                                    </td>
                                    <td>
                                        ZCS23547
                                    </td>
                                    <td>12</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="custom-checkbox">
                                                        <input type="checkbox"   style="display:none;" id="checkbox2"/>
                                                        <label for="checkbox2">Select</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="action-btn">
                                                        <button class="plan-btn red-btn"><img src="{{asset('images/delete.png')}}"/>Delete</button>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="custom-checkbox">
                                            <input type="checkbox"   style="display:none;" id="checkbox4" checked/>
                                            <label for="checkbox4"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="name-backup">
                                            <div class="room-imgs"   style="background-image:"{{asset('images/photos.png')}}""></div> Comfort Chair
                                        </div>
                                    </td>
                                    <td>
                                        Bold
                                    </td>
                                    <td>
                                        2013
                                    </td>
                                    <td>
                                        ZCS23547
                                    </td>
                                    <td>12</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="custom-checkbox">
                                                        <input type="checkbox"   style="display:none;" id="checkbox3"/>
                                                        <label for="checkbox3">Select</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="action-btn">
                                                        <button class="plan-btn red-btn"><img src="{{asset('images/delete.png')}}"/>Delete</button>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="custom-checkbox">
                                            <input type="checkbox"   style="display:none;" id="checkbox5" checked/>
                                            <label for="checkbox5"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="name-backup">
                                            <div class="room-imgs"   style="background-image:"{{asset('images/photos.png')}}""></div> Comfort Chair
                                        </div>
                                    </td>
                                    <td>
                                        Bold
                                    </td>
                                    <td>
                                        2013
                                    </td>
                                    <td>
                                        ZCS23547
                                    </td>
                                    <td>12</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="custom-checkbox">
                                                        <input type="checkbox"   style="display:none;" id="checkbox6"/>
                                                        <label for="checkbox6">Select</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="action-btn">
                                                        <button class="plan-btn red-btn"><img src="{{asset('images/delete.png')}}"/>Delete</button>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="custom-checkbox">
                                            <input type="checkbox"   style="display:none;" id="checkbox7" checked/>
                                            <label for="checkbox7"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="name-backup">
                                            <div class="room-imgs"   style="background-image:"{{asset('images/photos.png')}}""></div> Comfort Chair
                                        </div>
                                    </td>
                                    <td>
                                        Bold
                                    </td>
                                    <td>
                                        2013
                                    </td>
                                    <td>
                                        ZCS23547
                                    </td>
                                    <td>12</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="custom-checkbox">
                                                        <input type="checkbox"   style="display:none;" id="checkbox8"/>
                                                        <label for="checkbox8">Select</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="action-btn">
                                                        <button class="plan-btn red-btn"><img src="{{asset('images/delete.png')}}"/>Delete</button>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="menu1" class="tab-pane fade">
                        <h3>Menu 1</h3>
                        <p>Some content in menu 1.</p>
                    </div>
                    <div id="menu2" class="tab-pane fade">
                        <h3>Menu 2</h3>
                        <p>Some content in menu 2.</p>
                    </div>
                </div>
            </div>

        </section>
</main>
@include('include.foot')
@include('modal.change_password')
@include('modal.logout_modal')
<script nonce="{{config('app.nonce')}}">
    $('.dropdown-dots').click(function(){
        $(this).next('.menu-items').slideToggle();
    });
</script>