{{--
    Shared inner-page shell (reference design: icon menu on the left, content card on the right).
    Child views provide:
      @section('sidebar')     optional - a .ca-menu list
      @section('page_title')  optional - card heading (@section('title_attrs') adds attributes to the h4)
      @section('before_card') optional - markup placed above the card
      @section('inner')       the card body
--}}
@extends('frontend.layout')

@push('styles')
    <style>
        table,
        table td,
        table th {
            border: 1px solid #ddd;
            padding: 6px;
        }

        table>tbody>tr:nth-of-type(odd) {
            background-color: #f9f9f9
        }

        table tr:nth-of-type(1) {
            background-color: #eee;
        }

        table td h5,
        table th h5 {
            color: #990000;
            font-weight: bold;
            font-size: 16px;
            padding: 10px;
        }

        ul {
            margin-left: 25px;
        }

        ul li {
            padding: 10px;
        }
    </style>
@endpush

@section('content')
    <div class="col-xl-12 inner-wrap" style="margin-top: px;">
        <style>
            /* Make the image fully responsive */
            .carousel-inner img {
                width: 100%;
                height: 100%;
            }
        </style>
        <div class="row">
            @hasSection('sidebar')
                <div class="col-xl-3">
                    @yield('sidebar')
                </div>
                <div class="col-xl-9">
            @else
                    <div class="col-xl-12">
                @endif
                    <!-- banner -->
                    <br>
                    @hasSection('before_card')
                        @yield('before_card')
                        <br>
                    @endif
                    <!--Card system-->
                    <div class="row">
                        <div class="col-xl-12 col-md-5 ">
                            <div class="card border-left-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">

                                            @hasSection('page_title')
                                                <h4 @yield('title_attrs')> <span class="design1">@yield('page_title')</span></h4>
                                                <hr id="line">
                                            @endif

                                            @yield('inner')

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