@extends('space_portal.layouts.master')

@section('title','Creating the third workspace. Join today')

@section('header')
	@include('space_portal.partials.header')
@endsection

@section('content')

<section class="main-container">
    <div class="padding">
        <h1 class="mb-0">Hi , {{ Auth::user()->name }}</h1>
        <p class="color-secondary">Welcome back to Reef </p>

        <div class="row g-3 align-items-stretch">


            <div class="dash-left">
                <div class="box-white mb-3">
                    <div class="d-flex align-items-start align-items-sm-center justify-content-between mb-4 flex-column flex-sm-row">
                        <h2 class="mb-2 mb-sm-0">Number of Bookings</h2>
                        <div class="btn-group year-month-group" role="group" aria-label="Basic example">
                          <button type="button" class="btn active">Year</button>
                          <button type="button" class="btn">Month</button>
                        </div>
                    </div>

                    <div class="w-100 ">
                        <canvas id="line-chart-venue" style="position:relative;  height: auto; width: 100%">
                        </canvas>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="box-white book-cancel">
                            <div class="d-flex align-items-start justify-content-start flex-column">
                                <p class="text color-green font-medium">Bookings</p>
                                <div class="w-100">
                                    <div class="row gy-3 gx-5">
                                        <div class="col-sm-6">
                                            <p class="mb-0"><strong class="h2 mb-0">{{count($thisMonthBookings)}}</strong>This Month</p>
                                        </div>
                                        <div class="col-sm-6">
                                            <p class="mb-0"><strong class="h2 mb-0">{{count($thisYearBookings)}}</strong>This Year</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box-white book-cancel">
                            <div class="d-flex align-items-start justify-content-start flex-column">
                                <p class="text color-red font-medium">Cancellations</p>
                                <div class="w-100">
                                    <div class="row gy-3 gx-5">
                                        <div class="col-sm-6">
                                            <p class="mb-0"><strong class="h2 mb-0">{{count($canceledMonthlyBookings)}}</strong>This Month</p>
                                        </div>
                                        <div class="col-sm-6">
                                            <p class="mb-0"><strong class="h2 mb-0">{{count($canceledYearlyBookings)}}</strong>This Year</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dash-right">
                <div class="box-white">
                    <h2>Today’s Bookings</h2>
                    <p> {{  now()->toFormattedDateString() }}</p>

                    <div class="booking-list"> <!-- if booking list empty add class empty-->
                        <!-- if booking list empty -->
                        @if ((count($today_bookings) )== 0) 
                            <div class="d-flex h-100 align-items-center justify-content-center">
                                <div class="w-100 text-center">
                                    <p class="mb-3">
                                        <svg width="52" height="51" viewBox="0 0 52 51" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M51.5 25.5C51.5 22.2005 50.8404 18.9334 49.5589 15.8851C48.2774 12.8368 46.3991 10.067 44.0312 7.73394C41.6633 5.40087 38.8522 3.55018 35.7584 2.28753C32.6646 1.02488 29.3487 0.375 26 0.375C22.6513 0.375 19.3354 1.02488 16.2416 2.28753C13.1478 3.55018 10.3367 5.40087 7.96878 7.73394C5.60088 10.067 3.72257 12.8368 2.44107 15.8851C1.15958 18.9334 0.5 22.2005 0.5 25.5C0.5 32.1636 3.1866 38.5542 7.96878 43.2661C12.751 47.9779 19.237 50.625 26 50.625C32.763 50.625 39.249 47.9779 44.0312 43.2661C48.8134 38.5542 51.5 32.1636 51.5 25.5ZM4.75 25.5C4.75 19.947 6.98883 14.6215 10.974 10.695C14.9591 6.76841 20.3641 4.5625 26 4.5625C31.6359 4.5625 37.0409 6.76841 41.026 10.695C45.0112 14.6215 47.25 19.947 47.25 25.5C47.25 31.053 45.0112 36.3785 41.026 40.305C37.0409 44.2316 31.6359 46.4375 26 46.4375C20.3641 46.4375 14.9591 44.2316 10.974 40.305C6.98883 36.3785 4.75 31.053 4.75 25.5ZM21.75 20.2656C21.75 20.6781 21.6676 21.0865 21.5074 21.4675C21.3472 21.8485 21.1124 22.1947 20.8164 22.4864C20.5204 22.778 20.169 23.0094 19.7823 23.1672C19.3956 23.325 18.9811 23.4062 18.5625 23.4062C18.1439 23.4062 17.7294 23.325 17.3427 23.1672C16.956 23.0094 16.6046 22.778 16.3086 22.4864C16.0126 22.1947 15.7778 21.8485 15.6176 21.4675C15.4574 21.0865 15.375 20.6781 15.375 20.2656C15.375 19.4327 15.7108 18.6338 16.3086 18.0449C16.9064 17.4559 17.7171 17.125 18.5625 17.125C19.4079 17.125 20.2186 17.4559 20.8164 18.0449C21.4142 18.6338 21.75 19.4327 21.75 20.2656ZM36.625 20.2656C36.625 21.0986 36.2892 21.8974 35.6914 22.4864C35.0936 23.0754 34.2829 23.4062 33.4375 23.4062C32.5921 23.4062 31.7814 23.0754 31.1836 22.4864C30.5858 21.8974 30.25 21.0986 30.25 20.2656C30.25 19.4327 30.5858 18.6338 31.1836 18.0449C31.7814 17.4559 32.5921 17.125 33.4375 17.125C34.2829 17.125 35.0936 17.4559 35.6914 18.0449C36.2892 18.6338 36.625 19.4327 36.625 20.2656ZM18.061 37.3171C21.9923 32.7276 30.0035 32.7276 33.939 37.3171C34.1146 37.5397 34.334 37.7251 34.5841 37.8621C34.8342 37.9991 35.1098 38.0849 35.3944 38.1144C35.679 38.1439 35.9666 38.1165 36.2402 38.0338C36.5137 37.951 36.7675 37.8147 36.9863 37.633C37.2051 37.4513 37.3844 37.2279 37.5134 36.9763C37.6424 36.7247 37.7186 36.4499 37.7372 36.1686C37.7559 35.8873 37.7167 35.6051 37.6219 35.3391C37.5272 35.073 37.3789 34.8286 37.186 34.6204C31.5548 28.046 20.441 28.046 14.814 34.6204C14.6211 34.8286 14.4728 35.073 14.3781 35.3391C14.2833 35.6051 14.2441 35.8873 14.2628 36.1686C14.2814 36.4499 14.3576 36.7247 14.4866 36.9763C14.6156 37.2279 14.7949 37.4513 15.0137 37.633C15.2325 37.8147 15.4863 37.951 15.7598 38.0338C16.0334 38.1165 16.321 38.1439 16.6056 38.1144C16.8902 38.0849 17.1658 37.9991 17.4159 37.8621C17.666 37.7251 17.8854 37.5397 18.061 37.3171Z" fill="#EDEDED"/>
                                        </svg>
                                    </p>
                                    <p class="h2 mb-0 color-outlines">No Bookings for today</p>
                                </div>
                            </div> 
                        @else
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="color-secondary font-medium f-16">Name</th>
                                            <th scope="col" class="color-secondary font-medium f-16">Space name</th>
                                            <th scope="col" class="text-end color-secondary font-medium f-16">Time</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($today_bookings as $booking)        
                                            <tr>
                                                @if($booking->freelancer->user && $booking->freelancer->user->name)
                                                    <td>{{$booking->freelancer->user->name}}</td>
                                                @endif
                                                <td>{{$booking->venue_name}}</td>
                                                <td class="text-end">{{$booking->time_from}} - {{$booking->time_to}}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
//===================Line Chart
if($(document).find("#line-chart-venue").length > 0){

    const CHART = document.getElementById("line-chart-venue");
    console.log(Chart.defaults.scale.ticks);
    Chart.defaults.scale.ticks.beginAtZero = true;
    let label = [];
    let value = [];
    @foreach ($getMonthlyBookings1 as $key => $value)
        label.push("{!!$key!!}");
        value.push("{{count($value)}}");
        
    @endforeach
    console.log(label, value);
    new Chart(document.getElementById("line-chart-venue"), {
        type: 'line',
        data: {
            labels: label,
            datasets: [{
                label: 'Bookings',
                data: value,
                borderColor: "#000",
                borderWidth: 2,
                fill: false,
                lineTension: 0.1,
                pointRadius: 3,
                pointHitRadius: 10,
                backgroundColor: '#fff',
                hoverBorderColor: '#000',
                hoverBackgroundColor: '#7FDAC7'
            }, ]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'No. of bookings'
                    },
                    ticks: {
                        precision: 0
                    },
                    gridLines: {
                        display: false
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    },
                }]
            }
        }
    });

}
</script>
@endpush