@extends('app-new')
@push('head-script')
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <!-- END: Page CSS-->
    
@endpush 

@push('content-header')
    <!-- <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Masters</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/home') }}">{{trans('rights.home')}}</a>
                    </li>
                    <li class="breadcrumb-item active">Masters
                    </li>
                </ol>
            </div>
        </div>
    </div> -->
@endpush
@section('content')
    <!-- Column Search -->
    <section id="dashboard-ecommerce">
        <div class="text-left">
            <h1 >Master Management</h1>
            <p class="mb-2 pb-75">
                Click on the below tabs to go the respective page
            </p> 
        </div>
        <div class="row">
            <div class="col-12">
                <div class="row mt-2">
                    <div class="col-md-2 head-border">
                        <div class="new-border position-relative">
                            <a href="{{ $baseUrl }}/organization-floors">
                                <div class="card new-card new-accordian-card text-center align-center">
                                    <div class="card-body">
                                        <div>
                                            <i class="module-icon" data-feather="check-circle"></i>
                                            <p class="card-text">
                                                <strong>Organization Floors</strong>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-2 head-border">
                        <div class="new-border position-relative">
                            <a href="{{ $baseUrl }}/booking-frequencies">
                                <div class="card new-card new-accordian-card text-center align-center">
                                    <div class="card-body">
                                        <div>
                                            <i class="module-icon" data-feather="check-circle"></i>
                                            <p class="card-text">
                                                <strong>Booking Frequency</strong>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-2 head-border">
                        <div class="new-border position-relative">
                            <a href="{{ $baseUrl }}/office-hour/create">
                                <div class="card new-card new-accordian-card text-center align-center">
                                    <div class="card-body">
                                        <div>
                                            <i class="module-icon" data-feather="check-circle"></i>
                                            <p class="card-text">
                                                <strong>Office Hours</strong>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-2 head-border">
                        <div class="new-border position-relative">
                            <a href="{{ $baseUrl }}/meeting-rooms">
                                <div class="card new-card new-accordian-card text-center align-center">
                                    <div class="card-body">
                                        <div>
                                            <i class="module-icon" data-feather="check-circle"></i>
                                            <p class="card-text">
                                                <strong>Meeting Rooms</strong>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->

    <style>
        #dashboard-ecommerce a {
            text-decoration: none;
            color: #6e6b7b!important;
        }
        .new-border:after {
            content: '';
            display: block;
            position: relative;
            width: 80%;
            margin: 0 auto;
            top: 0;
        }
        .new-border:before {
            content : "";
            position: absolute;
            right    : 0;
            z-index: 1;
            top  : 20%;
            height   : 60%;
        }

        .card .card{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;}
        
        .card .active{background-color: #e6e6e6;}
        .new-accordian{ background: rgb(233 223 237 / 41%); padding: 29px 16px 0px 12px; margin-bottom: 26px !important; margin-left: 16px;    width: 97%;}
        div.head-border:nth-of-type(4n) .new-border:before {
            border-right: none;
        }

        .nonenew-border::before{border-right: none;} 
        .nonenewborder-bottom::after{border-bottom: none;}
        .module-icon{
            height:30px; 
            width:30px; 
            color: #7367f0;
        }
        .arrow-icon{
            position: absolute; 
            left: 45%; 
            bottom: 9px; 
            height:20px; 
            width:20px; 
            color: #7367f0;
        }
        .sub-module-heading{
            color: #7367f0;
            text-align: center;
            margin-bottom: 1em;

        }

        .search-icon{position: absolute; right: 0; top: 9px; }
        .new-card-title{font-weight: 600;font-size: 25px !important;text-align: center;color: #7367F0;}
        .new-card p{margin-top: 17px; font-size: 1.1em}
        .new-card{ min-height:150px; }

        .new-card .card-body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .new-card-header{background: url(../../../app-assets/images/portrait/small/bg.png)no-repeat ;     background-size: cover;}

        .innerpageboxed .feather { height: 30px; width: 30px; }
        .innerpageboxed h3 { margin-bottom: 0; font-size: 15px; margin-top: 17px}
    </style>
@endsection 
@push('footer-script') 
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/components/components-accordion.js"></script>
    <!-- END: Page JS-->
    <script>
        $(".active-card").click(function(){
            $('.active-card').each(function(){
                $(this).removeClass("active");
            })
            $(this).addClass("active");

        })
    </script>
@endpush