@include('layouts.header', ['title' => 'View Inventory'])
<style>
        @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

        body{
            font-family: "Montserrat", sans-serif;
        }
        p{
            margin: 0px;
        }
        .inventory_outer {
            display: flex;
            width: 100%;
            font-family: Arial, sans-serif;
            background-color: #fff;
        }
        .sidebar {
            width:300px;
            background-color: #FFF;
            /* height: 100vh; */
            padding: 20px;
            text-align: center;
            box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        .sidelogo_outer {
            width: 200px;
            height: 59px;
            margin: 0px auto;
        }
        .sidelogo_outer  img {
            width: 100%;
            height: 100%;
        }
        .main{
            background-color:#f5f5f5;
            /* flex-grow: 1; */
            width: calc(100% - 300px);
        }
        /*.main-content {
            padding: 20px;
            width: 90%;
            margin: 0px auto;
        }*/
        .top-bar {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding: 0px 60px;
                background-color: #fff;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                height: 100px;
        }
        .user-icon {
            width: 27px;
            height: 27px;
            cursor: pointer;
        }
        .user-icon  img {
            width: 100%;
            height: 100%;
        }
        .inv_title {
            font-family: "Montserrat", sans-serif;
            font-size: 28px;
            font-weight:600;
            color: #2F2F2F;
            margin: 30px 0px;
        }
        .lb_boxes{
            background-color: #fff;
            padding: 25px;
            border-radius: 12px;
        }
        .lb_boxes_subtitle{
            font-family: "Montserrat", sans-serif;
            color: #4C4C4C;
            font-weight: 500;
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        .wingbox_outer {
            margin:20px 0px;
            border-radius: 12px;
            background-color: #fff;
            padding: 25px;
            width: 100%;
        }
        .wingbox_title_box{
            background-color: #E7EAEE;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wingbox_title{
            font-family: "Montserrat", sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: #000000;
            text-transform: uppercase;
        }
        .wingbox_inner{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;
            margin-top: 10px;
            column-gap: 5px;
        }
        .wing_row_number{
            width: 85px;
            border: 1px solid #D9D9D9;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            row-gap: 5px;
        }
        .wing_room_number{
            width:calc(100% - 95px);
            display: flex;
            flex-direction: column;
            row-gap: 5px;
        }
        .wing_sameblock{
            height: 42px;
            /* margin: 5px; */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wing_row_t{
            font-family: "Montserrat", sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #000000;
        }
        .wing_sameblock.wing_room_in {
            display: flex;
            column-gap: 5px;
            width: 100%;
            /* margin-bottom: -6px; */
            padding: 3px;
        }
        .wing_room_in_box{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            column-gap: 5px;
        }
        .wing_room_in_boxes{
            width: 38px;
            height:40px;
            border-radius: 5px;
            background-color: #D9D9D9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
            color: #2c2a2acc;
            text-transform: uppercase;
            cursor: pointer;
        }
        .balwadi_bg{
            color: #FFF;
            background-color: #23B000;
        }
        .society_office{
            color: #FFF;
            background-color: #F4AC3F;
        }
        .welfare_center {
            color: #FFF;
            background-color: #6147FF;
        }
        .meter_room {
            color: #FFF;
            background-color: #044694;
        }
        .occupied
        {
            color: #FFF;
            background-color:#FE7270;
        }
        .refuge_area {
            color: #FFF;
            background-color: #4F4F4F;
        }
        .selectedbox{
            color: #FFF;
            background-color: #3FA9F4;
        }
        .terrace{
            color: #FFF;
            background-color: #9747FF;
        }
        .wingbox_outer .wingbox_outer_in{
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
        }
        /* .wingbox_outer_scroll{

            display: flex;
             column-gap: 30px;
             padding-bottom: 10px;

             min-width: 850px;
             overflow-x: scroll;

        } */
        .wingbox_outer_scroll {
            display: flex;
            gap: 30px; /* Space between items */
            padding-bottom: 10px;
            overflow-x: auto; /* Enable horizontal scrolling */

            white-space: nowrap;
            /* width: 850px; */
            width: calc(100% - 5px);

        }

        .legend {
            display: flex;
            align-items: center;
            column-gap:10px;
            justify-content: space-between;
        }
        .legend_items {
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: 7px;
        }
        .legend_item_box {
            width: 35px;
            height: 35px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
        }
        .floor{
            background-color: #D9D9D9;
            color: #2c2a2acc;
        }
        .legend_item_box_t {
            font-size:9px;
            font-weight: 500;
            font-family: "Montserrat", sans-serif;
            color: #000000;
        }
        /* @media screen and (min-width:1400px) {
            .wingbox_outer_scroll{
                width: 950px;
            }
        }
        @media screen and (min-width:1500px) {
            .wingbox_outer_scroll{
                width: 1250px;
            }
        } */

.room_type_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid #ddd; /* Outer border */
}

.room_type_table td {
    padding: 8px 12px;
    font-size: 12px;
    /*color: #000;*/
    font-weight: bold;
    text-align: left;
    border: 1px solid #ddd; /* Cell border */
}

.room_count {
    /*background: #777;*/
    /*color: white;*/
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 5px;
    display: inline-block;
}
.selectedbox{
    background-color: #3FA9F4;
}


    </style>
    <div class="wrapper">
        @include('layouts.navbar')
        @include('layouts.sidebar')

        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right"></div>
                            </div>
                        </div>
                    </div>
                    @include('components.inventory-details', ['inventory' => $inventory])