@extends('Admin.Layouts.Dashboard')

@section('styles')
    <link rel="stylesheet" href="{{asset('css/calendar.css')}}" />

    <script>
        window.currentDate = '{{$current_month}}'
        window.events = '{!! json_encode($dates) !!}'
        window.get_single_data = '{{partner_route('prices.edit', $unit_id)}}'
    </script>

    <script src="{{asset('js/calendar.js')}}" defer></script>

    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-size: 14px;
        }

        #calendar {
            max-width: 1100px;
            margin: 0 auto;
        }
        .fc-header-toolbar.fc-toolbar{
            display: none;
        }
        .fc-event-title-container{
            padding: 0 20px;
        }
        .fc-event-time{
            display: none;
        }
        .fc .fc-daygrid-event-harness-abs {
            top: 0 !important;
        }
        #calendar-buttons{
            display: none;
            flex: 1;
            justify-content: center;
            width: 770px;
            margin: auto;
            /*opacity: 0;*/
            /*visibility: hidden;*/
        }
        #calendar-buttons .form-inline-style{
            direction: rtl;
            /*margin-right: 10px;*/
            flex: 1;
        }
        #calendar-buttons .btn{
            border-radius: 0 !important;
        }
        #calendar-buttons form.form-inline-style{
            display: inline-block;
        }
        #calendar-buttons form button,
        #calendar-buttons form a{
            flex: 1;
            width: 100%;
        }
        form button.discount{
            width: initial !important;
        }
        #calendar-buttons form.form-inline button{
            width: initial;
        }
        #make-available-modal button.close{
            width: 50px;
            display: flex;
            flex: initial;
            height: 50px;
            margin: -9px;
            justify-content: center;
            align-items: center;
        }
        #edit-price{
            justify-content: center;
            display: none;
        }

        .ripple{
            position: relative;
            overflow: hidden;
        }

        .ripple:before {
            border-radius: 50%;
            background-color: rgba(255,255,255,0.6);
            content:'';
            position: absolute;
            top: 50%; left: 50%;
            width:0; height:0;
        }

        .ripple:focus:before {
            transition: all 0.5s ease-out;
            opacity:0;
            width:160px;
            height:160px;
            margin-top:-80px;
            margin-left:-80px;
        }

        .btn .si{
            margin: 0 5px;
        }

        .price-after{
            display: none;
        }

        .price-after.active{
            display: block;
        }
    </style>