@extends('Layouts.hms_master')
@section('content')

@php
    $imagePath = 'images/placeholder.png';
@endphp
    
<div class="page bg-white">
    <!-- Media Sidebar -->
    <div class="page-aside">
        <div class="page-aside-switch">
            <i class="icon md-chevron-left" aria-hidden="true"></i>
            <i class="icon md-chevron-right" aria-hidden="true"></i>
        </div>
        <div class="page-aside-inner page-aside-scroll scrollable scrollable-vertical is-disabled" style="position: relative;">
            <div data-role="container" class="scrollable-container" style="">
                <div data-role="content" class="scrollable-content" style="">
                    <section class="page-aside-section">
                        <h5 class="page-aside-title">Building - Shapla</h5>
                        <div class="list-group">
                            <a class="list-group-item active" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 1</a>
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 2</a>
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 3</a>
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 4</a>
                        </div>
                    </section>
                    <section class="page-aside-section">
                        <h5 class="page-aside-title">Building - Chondromollika</h5>
                        <div class="list-group">
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 1</a>
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 2</a>
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 3</a>
                            <a class="list-group-item" href="javascript:void(0)"><i class="icon md-view-dashboard" aria-hidden="true"></i>Floor 4</a>
                        </div>
                    </section>
                </div>
            </div>
            <div class="scrollable-bar scrollable-bar-vertical scrollable-bar-hide" draggable="false">
                <div class="scrollable-bar-handle" style="height: 601.169px;"></div>
            </div>
        </div>
    </div>

    <!-- Media Content -->
    <div class="page-main">

        <!-- Media Content Header -->
        <div class="page-header">
            <h1 class="page-title">Floor 1</h1>
            <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon md-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="Search...">
                </div>
            </form>
            </div>
        </div>

        <!-- Media Content -->
        <div id="mediaContent" class="page-content page-content-table" data-plugin="selectable">

            <!-- Actions -->
            <div class="page-content-actions">
                <div class="float-right">
                    <div class="btn-group media-arrangement btn-group-flat" role="group">
                    <button class="btn btn-default waves-effect waves-classic" id="arrangement-grid" type="button"><i class="icon md-view-module" aria-hidden="true"></i></button>
                    <button class="btn btn-default waves-effect waves-classic active" id="arrangement-list" type="button"><i class="icon md-view-list" aria-hidden="true"></i></button>
                    </div>
                </div>
                <div class="actions-inner">
                    <div class="checkbox-custom checkbox-primary checkbox-lg">
                    <input type="checkbox" id="media_all" class="selectable-all">
                    <label for="media_all"></label>
                    </div>
                </div>
            </div>

            <!-- Media -->
            <div class="media-list is-grid pb-50" data-plugin="animateList" data-animate="fade"
                data-child="li">
                <ul class="blocks blocks-100 blocks-xxl-6 blocks-xl-6 blocks-lg-6 blocks-md-6 blocks-sm-2"
                    data-plugin="animateList" data-child=">li">

                    @foreach ($allRoom as $room)
                        <li>
                            <a href="javascript:void(0)" class="viewAction" data-id="{{ $room->id }}"
                                data-link="{{ url()->current() }}/view_seat/{{ encrypt($room->id) }}">
                                <div class="media-item" data-toggle="slidePanel" data-url="panel.tpl">
                                    <div class="checkbox-custom checkbox-primary checkbox-lg">
                                        <input type="checkbox" class="selectable-item" id="media_1" />
                                        <label for="media_1"></label>
                                    </div>
                                    <div class="image-wrap">
                                        <img class="image rounded" src="{{ asset($imagePath) }}" alt="...">
                                    </div>
                                    <div class="info-wrap">
                                        <div class="dropdown">
                                            <span class="icon md-settings" data-toggle="dropdown" aria-expanded="false" role="button"
                                            data-animation="scale-up"></span>
                                            <div class="dropdown-menu dropdown-menu-right" role="menu">
                                                <a class="dropdown-item" href="javascript:void(0)"><i class="icon md-edit" aria-hidden="true"></i>Edit</a>
                                                <a class="dropdown-item" href="javascript:void(0)"><i class="icon md-download" aria-hidden="true"></i>Download</a>
                                                <a class="dropdown-item" href="javascript:void(0)"><i class="icon md-delete" aria-hidden="true"></i>Delete</a>
                                            </div>
                                        </div>
                                        <div class="title text-center">{{ $room->room_no }}</div>
                                        <div class="media-item-actions btn-group">
                                            <button class="btn btn-icon btn-pure btn-default" data-original-title="Edit" data-toggle="tooltip"
                                                data-container="body" data-placement="top" data-trigger="hover"
                                                type="button">
                                                <i class="icon md-edit" aria-hidden="true"></i>
                                            </button>
                                            <button class="btn btn-icon btn-pure btn-default" data-original-title="Download"
                                                data-toggle="tooltip" data-container="body" data-placement="top"
                                                data-trigger="hover" type="button">
                                                <i class="icon md-download" aria-hidden="true"></i>
                                            </button>
                                            <button class="btn btn-icon btn-pure btn-default" data-original-title="Delete"
                                                data-toggle="tooltip" data-container="body" data-placement="top"
                                                data-trigger="hover" type="button">
                                                <i class="icon md-delete" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

        </div>
    </div>
</div>
    
@endsection