{{-- Extends layout --}}
@extends('layout.default')

@section('styles')

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        .heading1{
            font-size: 64px;
        }
        .heading3{
            font-size: 24px;
        }
        .greeting{
            line-height: 100px;
        }
        .card-body{
            font-family: 'Fredericka the Great', cursive;
        }
    </style>

	<!--end::Page Custom Styles-->
@endsection


{{-- Content --}}
@section('content')

    {{-- <div class="alert alert-custom alert-notice alert-info fade show" role="alert">
        <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
        <div class="alert-text">Admin Dashboard is under developement</div>
        <div class="alert-close">
            <button type="button" class="close" data-d
            .ismiss="alert" aria-label="Close">
                <span aria-hidden="true"><i class="ki ki-close"></i></span>
            </button>
        </div>
    </div> --}}

    

    <div class="row">
        <div class="col-lg-12">
            <!--begin::Card-->
            <div class="card card-custom card-stretch" id="kt_page_stretched_card">
                <div class="card-header">
                    {{-- <div class="card-title">
                    </div> --}}
                </div>
                <div class="card-body">

                    {{-- ==================================================================================
                        20th December, 2021
                        =================================================================================== --}}
                    <div class="row text-center border-danger"><span class="heading3 mx-auto">20th December, 2021</span></div>
                    <div class="separator separator-dashed my-5"></div>
                    <div class="row">
                        <div class="col-6 text-center">
                            <img class="img-fluid" src="{{ asset('media/bg/sumaiya.jpg') }}" alt="">
                        </div>
                        <div class="col-6 heading1 greeting text-center align-self-center">
                            <span> Hi,</span> <br>
                            <span>Miss!</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 heading1 greeting text-center align-self-center">
                            <span> Want Some</span> <br>
                            <span>Tea!</span>
                        </div>
                        <div class="col-6 text-center">
                            <img class="img-fluid" src="{{ asset('media/bg/tea.gif') }}" alt="">
                        </div>
                    </div>

                    {{-- ==================================================================================
                        21th December, 2021
                        =================================================================================== --}}
                    <div class="row text-center border-danger"><span class="heading3 mx-auto">21th December, 2021</span></div>
                    <div class="separator separator-dashed my-5"></div>
                    <div class="row">
                        <div class="col-6 text-center">
                            <img class="img-fluid" src="{{ asset('media/bg/music-girl.jpg') }}" alt="">
                        </div>
                        <div class="col-6 heading1 greeting text-center align-self-center">
                            <span> Craving for a song perhaps?</span> <br>
                            <a href="https://www.youtube.com/watch?v=x6JOSWmAofQ"><span class="heading3">Click here 
                            <span class="svg-icon svg-icon-primary svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Devices\Headphones.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M19,16 L19,12 C19,8.13400675 15.8659932,5 12,5 C8.13400675,5 5,8.13400675 5,12 L5,16 L19,16 Z M21,16 L3,16 L3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 L21,16 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M5,14 L6,14 C7.1045695,14 8,14.8954305 8,16 L8,19 C8,20.1045695 7.1045695,21 6,21 L5,21 C3.8954305,21 3,20.1045695 3,19 L3,16 C3,14.8954305 3.8954305,14 5,14 Z M18,14 L19,14 C20.1045695,14 21,14.8954305 21,16 L21,19 C21,20.1045695 20.1045695,21 19,21 L18,21 C16.8954305,21 16,20.1045695 16,19 L16,16 C16,14.8954305 16.8954305,14 18,14 Z" fill="#000000"/>
                                </g>
                            </svg><!--end::Svg Icon--></span>
                            </span></a>
                        </div>
                    </div>

                    {{-- ==================================================================================
                        21th December, 2021
                        =================================================================================== --}}
                    <div class="row text-center border-danger"><span class="heading3 mx-auto">22th December, 2021</span></div>
                    <div class="separator separator-dashed my-5"></div>
                    <div class="row">
                        <div class="col-6 heading1 greeting text-center align-self-center">
                            <span> How's</span> <br>
                            <span>your mood?</span>
                        </div>
                        <div class="col-6 text-center">
                            <img class="img-fluid" src="{{ asset('media/bg/mood.jpg') }}" alt="">
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>

    





@endsection


{{-- Scripts Section --}}
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="{{ asset('js/pages/crud/ktdatatable/base/team-table.js') }}" type="text/javascript"></script>
    <script src="{{ asset("js/pages/crud/forms/widgets/bootstrap-datepicker.js") }}"></script>
    <script src="{{ asset("plugins/custom/uppy/uppy.bundle.js") }}"></script>
    <script src="{{ asset("js/pages/features/charts/admin-dashboard-apexcharts.js") }}"></script>
    <script src="{{ asset("js/pages/admin-dashboard-widgets.js") }}"></script>
    <script>
        var KTLayoutStretchedCard=function() {
        // Private properties
        var _element;

        // Private functions
        var _init=function() {
        var scroll=KTUtil.find(_element, '.card-scroll');
        var cardBody=KTUtil.find(_element, '.card-body');
        var cardHeader=KTUtil.find(_element, '.card-header');

        var height=KTLayoutContent.getHeight();

        height=height - parseInt(KTUtil.actualHeight(cardHeader));

        height=height - parseInt(KTUtil.css(_element, 'marginTop')) - parseInt(KTUtil.css(_element, 'marginBottom'));
        height=height - parseInt(KTUtil.css(_element, 'paddingTop')) - parseInt(KTUtil.css(_element, 'paddingBottom'));

        height=height - parseInt(KTUtil.css(cardBody, 'paddingTop')) - parseInt(KTUtil.css(cardBody, 'paddingBottom'));
        height=height - parseInt(KTUtil.css(cardBody, 'marginTop')) - parseInt(KTUtil.css(cardBody, 'marginBottom'));

        height=height - 3;

        KTUtil.css(scroll, 'height', height + 'px');
        }

        // Public methods
        return {
        init: function(id) {
        _element=KTUtil.getById(id);

        if ( !_element) {
            return;
        }

        // Initialize
        _init();

        // Re-calculate on window resize
        KTUtil.addResizeHandler(function() {
            _init();
            }
        );
        },

        update: function() {
        _init();
        }
        };
        }();

        // Webpack support
        if (typeof module !=='undefined') {
        module.exports=KTLayoutStretchedCard;
        }
    </script>

@endsection