@extends('dashboard.layout.content')

@section('customTitle')
{{ __('dashboard.Home.fields.Homepage') }}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-12 col-sm-6 mb-3">
                <div class="widget-two">
                    <div class="widget-content">
                        <div class="w-numeric-value">
                            <div class="w-content">
                                <span class="w-value">{{ __('dashboard.Home.fields.Reservations By Status') }}</span>
                            </div>
                            <div class="w-icon">
                                <i class="las la-calendar"></i>
                            </div>
                        </div>
                        <div class="w-chart">
                            <div class="daily-sales"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 mb-3" style="height: auto;">
                <div class="widget widget-chart-two">
                    <div class="widget-heading">
                        <h5 class="">{{ __('dashboard.Home.fields.Reservations By Days') }}</h5>
                    </div>
                    <div class="widget-content" style="position: relative;">
                        <div class="daily_reservations_donut">
                            <div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 col-sm-6 mb-3" style="height: auto;">
                <div class="widget-two">
                    <div class="widget-content">
                        <div class="w-numeric-value">
                            <div class="w-content">
                                <span class="w-value">{{ __('dashboard.Home.fields.Contracts By Status') }}</span>
                            </div>
                            <div class="w-icon" style="background-color: rgba(71,224,159, 0.2)">
                                <i class="las la-file-contract"></i>
                            </div>
                        </div>
                        <div class="w-chart">
                            <div class="daily-sales2"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 mb-3" style="height: auto;">
                <div class="widget widget-chart-two">
                    <div class="widget-heading">
                        <h5 class="">{{ __('dashboard.Home.fields.Contracts By Days') }}</h5>
                    </div>
                    <div class="widget-content" style="position: relative;">
                        <div class="daily_contracts_donut">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 " style="height: auto;">
                <div class="widget widget-chart-one">
                    <div class="widget-heading">
                    </div>
                    <div class="widget-content" style="position: relative;">
                        <div class="ratings_chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 d-flex flex-wrap justify-content-between">
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-clock" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Current Reservations') }}</p>
                                    <p>{{ $current_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-sync" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Upcoming Reservations') }}</p>
                                    <p>{{ $coming_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-times-circle" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Canceled Reservations') }}</p>
                                    <p>{{ $canceled_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-check-circle" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Closed Reservations') }}</p>
                                    <p>{{ $finished_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 d-flex flex-wrap justify-content-between">
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Daily Reservation') }}</p>
                                    <p>{{ $daily_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Weekly Reservation') }}</p>
                                    <p>{{ $weekly_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Monthly Reservation') }}</p>
                                    <p>{{ $monthly_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Annual Reservation') }}</p>
                                    <p>{{ $yearly_reservations }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 d-flex flex-wrap justify-content-between">
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-clock" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Pending Contracts') }}</p>
                                    <p>{{ $pending_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-sync" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Opened Contracts') }}</p>
                                    <p>{{ $opened_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-times-circle" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Canceled Contracts') }}</p>
                                    <p>{{ $canceled_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-check-circle" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Closed Contracts') }}</p>
                                    <p>{{ $closed_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 d-flex flex-wrap justify-content-between">
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Daily Contracts') }}</p>
                                    <p>{{ $daily_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Weekly Contracts') }}</p>
                                    <p>{{ $weekly_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Monthly Contracts') }}</p>
                                    <p>{{ $monthly_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-content widget-content-area br-6 mb-3 p-0" style="width:24%;">
                    <div class="card" style="height:100px;">
                        <div class="card-body">
                            <div class="content d-flex justify-content-around">
                                <i class="las la-bookmark" style="font-size: 50px"></i>
                                <div class="d-flex flex-column align-items-center">
                                    <p>{{ __('dashboard.Home.fields.Yearly Contracts') }}</p>
                                    <p>{{ $yearly_contracts }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12  layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="table-responsive">
                        <table id="reservationsTable" class="table table-hover dataTable text-center">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('dashboard.Home.fields.Company') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Branch') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Reservations Count') }}</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('dashboard.Home.fields.Company') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Branch') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Reservations Count') }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="table-responsive">
                        <table id="ratingsTable" class="table table-hover dataTable text-center">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('dashboard.Home.fields.Company') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Branch') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Rating') }}</th>
                                </tr>
                            </thead>

                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('dashboard.Home.fields.Company') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Branch') }}</th>
                                    <th>{{ __('dashboard.Home.fields.Rating') }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<script>
    $("#home-menu-box").attr("data-active", "true");
</script>

<script>
    initializeDataTable("#reservationsTable", {
        columns: [{
                data: "id",searchable: false, orderable: false
            },
            {
                data: "company",searchable: false, orderable: false
            },
            {
                data: "branch",searchable: false, orderable: false
            },
            {
                data: "contracts_count",searchable: false, orderable: false
            },
        ],
        searching:false
    }, {
        subPlace: "home_reservations"
    });

    initializeDataTable("#ratingsTable", {
        columns: [{
                data: "id",searchable: false, orderable: false
            },
            {
                data: "company",searchable: false, orderable: false
            },
            {
                data: "branch",searchable: false, orderable: false
            },
            {
                data: "ratings_count",searchable: false, orderable: false
            },
        ],
        searching:false
    }, {
        subPlace: "home_ratings"
    });
</script>

<script>
    apexBarChart(['#e2a03f', '#e0e6ed'], [{{ $current_reservations }}, {{ $coming_reservations }},
            {{ $canceled_reservations }}, {{ $finished_reservations }}
        ], [{{ $total_of_reservations }}, {{ $total_of_reservations }}, {{ $total_of_reservations }},
            {{ $total_of_reservations }}
        ], ["{{ __('dashboard.Home.fields.Current Reservations') }}",
            "{{ __('dashboard.Home.fields.Upcoming Reservations') }}",
            "{{ __('dashboard.Home.fields.Canceled Reservations') }}",
            "{{ __('dashboard.Home.fields.Closed Reservations') }}"
        ], ".daily-sales");

        apexBarChart(['#47E09F', '#e0e6ed'], [{{ $pending_contracts }}, {{ $opened_contracts }},
            {{ $closed_contracts }}, {{ $canceled_contracts }}
        ], [{{ $total_of_contracts }}, {{ $total_of_contracts }}, {{ $total_of_contracts }},
            {{ $total_of_contracts }}
        ], ["{{ __('dashboard.Home.fields.Pending Contracts') }}",
            "{{ __('dashboard.Home.fields.Opened Contracts') }}",
            "{{ __('dashboard.Home.fields.Closed Contracts') }}",
            "{{ __('dashboard.Home.fields.Canceled Contracts') }}"
        ], ".daily-sales2");

        apexDonutChart(['#e2a03f', '#5c1ac3', '#e7515a'], ["{{ __('dashboard.Home.fields.Daily') }}",
                "{{ __('dashboard.Home.fields.Weekly') }}", "{{ __('dashboard.Home.fields.Monthly') }}"
            ], [{{ $daily_reservations }}, {{ $weekly_reservations }}, {{ $monthly_reservations }}],
            ".daily_reservations_donut");

        apexDonutChart(['#47E09F', '#E04788', '#D4E047'], ["{{ __('dashboard.Home.fields.Daily') }}",
                "{{ __('dashboard.Home.fields.Weekly') }}", "{{ __('dashboard.Home.fields.Monthly') }}"
            ], [{{ $daily_contracts }}, {{ $weekly_contracts }}, {{ $monthly_contracts }}],
            ".daily_contracts_donut");


    apexWindingChart(['#1b55e2', '#e7515a'], ["{{ __('dashboard.Home.fields.Reservations') }}",
            "{{ __('dashboard.Home.fields.Contracts') }}"
        ], [{{ isset($reservations_all_mounth[1]) ? count($reservations_all_mounth[1]) : 0 }},
            {{ isset($reservations_all_mounth[2]) ? count($reservations_all_mounth[2]) : 0 }},
            {{ isset($reservations_all_mounth[3]) ? count($reservations_all_mounth[3]) : 0 }},
            {{ isset($reservations_all_mounth[4]) ? count($reservations_all_mounth[4]) : 0 }},
            {{ isset($reservations_all_mounth[5]) ? count($reservations_all_mounth[5]) : 0 }},
            {{ isset($reservations_all_mounth[6]) ? count($reservations_all_mounth[6]) : 0 }},
            {{ isset($reservations_all_mounth[7]) ? count($reservations_all_mounth[7]) : 0 }},
            {{ isset($reservations_all_mounth[8]) ? count($reservations_all_mounth[8]) : 0 }},
            {{ isset($reservations_all_mounth[9]) ? count($reservations_all_mounth[9]) : 0 }},
            {{ isset($reservations_all_mounth[10]) ? count($reservations_all_mounth[10]) : 0 }},
            {{ isset($reservations_all_mounth[11]) ? count($reservations_all_mounth[11]) : 0 }},
            {{ isset($reservations_all_mounth[12]) ? count($reservations_all_mounth[12]) : 0 }}
        ], [{{ isset($contracts_all_mounth[1]) ? count($contracts_all_mounth[1]) : 0 }},
            {{ isset($contracts_all_mounth[2]) ? count($contracts_all_mounth[2]) : 0 }},
            {{ isset($contracts_all_mounth[3]) ? count($contracts_all_mounth[3]) : 0 }},
            {{ isset($contracts_all_mounth[4]) ? count($contracts_all_mounth[4]) : 0 }},
            {{ isset($contracts_all_mounth[5]) ? count($contracts_all_mounth[5]) : 0 }},
            {{ isset($contracts_all_mounth[6]) ? count($contracts_all_mounth[6]) : 0 }},
            {{ isset($contracts_all_mounth[7]) ? count($contracts_all_mounth[7]) : 0 }},
            {{ isset($contracts_all_mounth[8]) ? count($contracts_all_mounth[8]) : 0 }},
            {{ isset($contracts_all_mounth[9]) ? count($contracts_all_mounth[9]) : 0 }},
            {{ isset($contracts_all_mounth[10]) ? count($contracts_all_mounth[10]) : 0 }},
            {{ isset($contracts_all_mounth[11]) ? count($contracts_all_mounth[11]) : 0 }},
            {{ isset($contracts_all_mounth[12]) ? count($contracts_all_mounth[12]) : 0 }}
        ], "{{ __('dashboard.Home.fields.Monthly Measure Of Contracts And Reservations') }}", ".ratings_chart");

</script>
@endsection