@extends('layouts.master')

@section('title')
    @lang('translation.Saas')
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="d-flex">
                                <div class="flex-shrink-0 me-3">
                                    <img src="{{ URL::asset('build/images/users/avatar-1.jpg') }}" alt=""
                                        class="avatar-md rounded-circle img-thumbnail">
                                </div>
                                <div class="flex-grow-1 align-self-center">
                                    <div class="text-muted">
                                        <p class="mb-2">{{ __('translation.Welcome_to_store_Dashboard') }}</p>
                                        <h5 class="mb-1">{{ $store->company }}</h5>
                                        {{-- <p class="mb-0">UI / UX Designer</p> --}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 align-self-center">
                            <div class="text-lg-center mt-4 mt-lg-0">
                                <div class="row">
                                    <div class="col-4">
                                        <div>
                                            <p class="text-muted text-truncate mb-2">{{ __('translation.total_locations') }}
                                            </p>
                                            <h5 class="mb-0">{{ $total_loc }}</h5>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div>
                                            <p class="text-muted text-truncate mb-2">{{ __('translation.total_desk') }}</p>
                                            <h5 class="mb-0">{{ $total_desk }}</h5>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div>
                                            <p class="text-muted text-truncate mb-2">{{ __('translation.total_customers') }}
                                            </p>
                                            <h5 class="mb-0">{{ $total_cus }}</h5>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 align-self-center">
                        </div>
                        <div class="col-lg-2 align-self-center">
                            <p class="text-muted text-truncate mb-2">{{ __('translation.location') }}
                            </p>
                            <select class="form-select" name="status" onchange="location = this.value;">
                                <option value="{{ url(request()->store_id . '/store-dashboard')}}">
                                    All location
                                </option>
                                @foreach ($all_location as $loc)
                                    <option value="{{ url(request()->store_id . '/store-dashboard/' . $loc->id) }}"
                                        @if (request()->loc_id == $loc->id) selected @endif>
                                        {{ $loc->location }}
                                    </option>
                                @endforeach
                            </select>

                        </div>

                        <div class="col-lg-4 d-none d-lg-block">
                            {{-- <div class="clearfix mt-4 mt-lg-0">
                            <div class="dropdown float-end">
                                <button class="btn btn-primary" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="bx bxs-cog align-middle me-1"></i> Setting
                                </button>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else</a>
                                </div>
                            </div>
                        </div> --}}
                        </div>
                    </div>
                    <!-- end row -->
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        {{-- <div class="col-xl-4">
            <div class="card bg-primary-subtle">
                <div>
                    <div class="row">
                        <div class="col-7">
                            <div class="text-primary p-3">
                                <h5 class="text-primary">Welcome Back !</h5>
                                <p>Skote Saas Dashboard</p>

                                <ul class="ps-3 mb-0">
                                    <li class="py-1">7 + Layouts</li>
                                    <li class="py-1">Multiple apps</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-5 align-self-end">
                            <img src="{{ URL::asset('build/images/profile-img.png') }}" alt="" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="col-xl-12">
            <div class="row">
                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar-xs me-3">
                                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary font-size-18">
                                        <i class="bx bx-copy-alt"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-14 mb-0">{{ __('translation.average_waiting_time') }}</h5>
                            </div>
                            <div class="text-muted mt-4">
                                <h4>{{ $total_avgWaitingTime }}&nbsp<i class="fa-solid fa-clock"></i> Min</h4>
                                {{-- <div class="d-flex">
                                    <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span
                                        class="ms-2 text-truncate">From previous period</span>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar-xs me-3">
                                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary font-size-18">
                                        <i class="bx bx-archive-in"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-14 mb-0">{{ __('translation.average_service_time') }}</h5>
                            </div>
                            <div class="text-muted mt-4">
                                <h4>{{ $average_service_time }} &nbsp<i class="fa-solid fa-clock"></i> Min</h4>
                                {{-- <div class="d-flex">
                                    <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span
                                        class="ms-2 text-truncate">From previous period</span>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar-xs me-3">
                                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary font-size-18">
                                        <i class="bx bx-archive-in"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-14 mb-0">{{ __('translation.max_service_time') }}</h5>
                            </div>
                            <div class="text-muted mt-4">
                                <h4>{{ $maxservicetime }} &nbsp<i class="fa-solid fa-clock"></i> Min</h4>
                                {{-- <div class="d-flex">
                                    <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span
                                        class="ms-2 text-truncate">From previous period</span>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="avatar-xs me-3">
                                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary font-size-18">
                                        <i class="bx bx-purchase-tag-alt"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-14 mb-0">{{ __('translation.service_completion_rate') }}</h5>
                            </div>
                            <div class="text-muted mt-4">
                                <h4>{{ round($analytics[0]['completion_rate']) }}<i
                                        class="mdi mdi-chevron-up ms-1 text-success"></i></h4>

                                {{-- <div class="d-flex">
                                    <span class="badge badge-soft-warning font-size-12"> 0% </span> <span
                                        class="ms-2 text-truncate">From previous period</span>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card pb-3">
                <div style="width:100%;height:400px;" class="card-body">
                    <h4 class="card-title mb-4">@lang('translation.Service_Completion')</h4>
                    <div id="Service_Completion_Rate" data-colors='["--bs-primary", "--bs-warning", "--bs-success"]'
                        class="apex-charts " dir="ltr"></div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Sales Analytics</h4>

                    <div class='w-100'>
                        <div id="analytics_pic"></div>
                    </div>

                    {{-- <div class="text-center text-muted">
                    <div class="row">
                        <div class="col-4">
                            <div class="mt-4">
                                <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-primary me-1"></i> Product A</p>
                                <h5>$ 2,132</h5>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mt-4">
                                <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-success me-1"></i> Product B</p>
                                <h5>$ 1,763</h5>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mt-4">
                                <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-danger me-1"></i> Product C</p>
                                <h5>$ 973</h5>
                            </div>
                        </div>
                    </div>
                </div> --}}
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        {{-- <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="clearfix">
                        <div class="float-end">
                            <div class="input-group input-group-sm">
                                <select class="form-select form-select-sm">
                                    <option value="JA" selected>Jan</option>
                                    <option value="DE">Dec</option>
                                    <option value="NO">Nov</option>
                                    <option value="OC">Oct</option>
                                </select>
                                <label class="input-group-text">Month</label>
                            </div>
                        </div>
                        <h4 class="card-title mb-4">Top Selling product</h4>
                    </div>

                    <div class="text-muted text-center">
                        <p class="mb-2">Product A</p>
                        <h4>$ 6385</h4>
                        <p class="mt-4 mb-0"><span class="badge badge-soft-success font-size-11 me-2"> 0.6% <i
                                    class="mdi mdi-arrow-up"></i> </span> From previous period</p>
                    </div>

                    <div class="table-responsive mt-4">
                        <table class="table align-middle mb-0">
                            <tbody>
                                <tr>
                                    <td>
                                        <h5 class="font-size-14 mb-1">Product A</h5>
                                        <p class="text-muted mb-0">Neque quis est</p>
                                    </td>

                                    <td>
                                        <div id="radialchart-1" data-colors='["--bs-primary"]' class="apex-charts"></div>
                                    </td>
                                    <td>
                                        <p class="text-muted mb-1">Sales</p>
                                        <h5 class="mb-0">37 %</h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h5 class="font-size-14 mb-1">Product B</h5>
                                        <p class="text-muted mb-0">Quis autem iure</p>
                                    </td>

                                    <td>
                                        <div id="radialchart-2" data-colors='["--bs-success"]' class="apex-charts"></div>
                                    </td>
                                    <td>
                                        <p class="text-muted mb-1">Sales</p>
                                        <h5 class="mb-0">72 %</h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h5 class="font-size-14 mb-1">Product C</h5>
                                        <p class="text-muted mb-0">Sed aliquam mauris.</p>
                                    </td>

                                    <td>
                                        <div id="radialchart-3" data-colors='["--bs-danger"]' class="apex-charts"></div>
                                    </td>
                                    <td>
                                        <p class="text-muted mb-1">Sales</p>
                                        <h5 class="mb-0">54 %</h5>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Tasks</h4>

                    <ul class="nav nav-pills bg-light rounded">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">In Process</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Upcoming</a>
                        </li>
                    </ul>

                    <div class="mt-4">
                        <div data-simplebar style="max-height: 250px;">

                            <div class="table-responsive">
                                <table class="table table-nowrap align-middle table-hover mb-0">
                                    <tbody>
                                        <tr>
                                            <td style="width: 50px;">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck01">
                                                    <label class="form-check-label" for="tasklistCheck01"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">Skote Saas Dashboard</a></h5>
                                                <p class="text-muted mb-0">Assigned to Mark</p>
                                            </td>
                                            <td style="width: 90px;">
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck02">
                                                    <label class="form-check-label" for="tasklistCheck02"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">New Landing UI</a></h5>
                                                <p class="text-muted mb-0">Assigned to Team A</p>
                                            </td>
                                            <td>
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck02">
                                                    <label class="form-check-label" for="tasklistCheck02"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">Brand logo design</a></h5>
                                                <p class="text-muted mb-0">Assigned to Janis</p>
                                            </td>
                                            <td>
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck04">
                                                    <label class="form-check-label" for="tasklistCheck04"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">Blog Template UI</a></h5>
                                                <p class="text-muted mb-0">Assigned to Dianna</p>
                                            </td>
                                            <td>
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck05">
                                                    <label class="form-check-label" for="tasklistCheck05"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">Multipurpose Landing</a></h5>
                                                <p class="text-muted mb-0">Assigned to Team B</p>
                                            </td>
                                            <td>
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck06">
                                                    <label class="form-check-label" for="tasklistCheck06"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">Redesign - Landing page</a></h5>
                                                <p class="text-muted mb-0">Assigned to Jerry</p>
                                            </td>
                                            <td>
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="tasklistCheck07">
                                                    <label class="form-check-label" for="tasklistCheck07"></label>
                                                </div>
                                            </td>
                                            <td>
                                                <h5 class="text-truncate font-size-14 mb-1"><a href="javascript: void(0);"
                                                        class="text-dark">Skote Crypto Dashboard</a></h5>
                                                <p class="text-muted mb-0">Assigned to Eric</p>
                                            </td>
                                            <td>
                                                <div>
                                                    <ul class="list-inline mb-0 font-size-16">
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-success p-1"><i
                                                                    class="bx bxs-edit-alt"></i></a>
                                                        </li>
                                                        <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="text-danger p-1"><i
                                                                    class="bx bxs-trash"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-transparent border-top">
                    <div class="text-center">
                        <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light"> Add new Task</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body border-bottom">
                    <div class="row">
                        <div class="col-md-4 col-9">
                            <h5 class="font-size-15 mb-1">Steven Franklin</h5>
                            <p class="text-muted mb-0"><i class="mdi mdi-circle text-success align-middle me-1"></i>
                                Active now</p>
                        </div>
                        <div class="col-md-8 col-3">
                            <ul class="list-inline user-chat-nav text-end mb-0">
                                <li class="list-inline-item d-none d-sm-inline-block">
                                    <div class="dropdown">
                                        <button class="btn nav-btn" type="button" data-bs-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            <i class="bx bx-search-alt-2"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end py-0 dropdown-menu-md">
                                            <form class="p-3">
                                                <div class="form-group m-0">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control"
                                                            placeholder="Search ..." aria-label="Recipient's username">

                                                        <button class="btn btn-primary" type="submit"><i
                                                                class="mdi mdi-magnify"></i></button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-inline-item  d-none d-sm-inline-block">
                                    <div class="dropdown">
                                        <button class="btn nav-btn" type="button" data-bs-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            <i class="bx bx-cog"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="#">View Profile</a>
                                            <a class="dropdown-item" href="#">Clear chat</a>
                                            <a class="dropdown-item" href="#">Muted</a>
                                            <a class="dropdown-item" href="#">Delete</a>
                                        </div>
                                    </div>
                                </li>

                                <li class="list-inline-item">
                                    <div class="dropdown">
                                        <button class="btn nav-btn" type="button" data-bs-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            <i class="bx bx-dots-horizontal-rounded"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else</a>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body pb-0">
                    <div>
                        <div class="chat-conversation">
                            <ul class="list-unstyled" data-simplebar style="max-height: 260px;">
                                <li>
                                    <div class="chat-day-title">
                                        <span class="title">Today</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="conversation-list">
                                        <div class="dropdown">

                                            <a class="dropdown-toggle" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-vertical-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Copy</a>
                                                <a class="dropdown-item" href="#">Save</a>
                                                <a class="dropdown-item" href="#">Forward</a>
                                                <a class="dropdown-item" href="#">Delete</a>
                                            </div>
                                        </div>
                                        <div class="ctext-wrap">
                                            <div class="conversation-name">Steven Franklin</div>
                                            <p>
                                                Hello!
                                            </p>
                                            <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>
                                                10:00</p>
                                        </div>

                                    </div>
                                </li>

                                <li class="right">
                                    <div class="conversation-list">
                                        <div class="dropdown">

                                            <a class="dropdown-toggle" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-vertical-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Copy</a>
                                                <a class="dropdown-item" href="#">Save</a>
                                                <a class="dropdown-item" href="#">Forward</a>
                                                <a class="dropdown-item" href="#">Delete</a>
                                            </div>
                                        </div>
                                        <div class="ctext-wrap">
                                            <div class="conversation-name">Henry Wells</div>
                                            <p>
                                                Hi, How are you? What about our next meeting?
                                            </p>

                                            <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>
                                                10:02</p>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="conversation-list">
                                        <div class="dropdown">

                                            <a class="dropdown-toggle" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-vertical-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Copy</a>
                                                <a class="dropdown-item" href="#">Save</a>
                                                <a class="dropdown-item" href="#">Forward</a>
                                                <a class="dropdown-item" href="#">Delete</a>
                                            </div>
                                        </div>
                                        <div class="ctext-wrap">
                                            <div class="conversation-name">Steven Franklin</div>
                                            <p>
                                                Yeah everything is fine
                                            </p>

                                            <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>
                                                10:06</p>
                                        </div>

                                    </div>
                                </li>

                                <li class="last-chat">
                                    <div class="conversation-list">
                                        <div class="dropdown">

                                            <a class="dropdown-toggle" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-vertical-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Copy</a>
                                                <a class="dropdown-item" href="#">Save</a>
                                                <a class="dropdown-item" href="#">Forward</a>
                                                <a class="dropdown-item" href="#">Delete</a>
                                            </div>
                                        </div>
                                        <div class="ctext-wrap">
                                            <div class="conversation-name">Steven Franklin</div>
                                            <p>& Next meeting tomorrow 10.00AM</p>
                                            <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>
                                                10:06</p>
                                        </div>

                                    </div>
                                </li>

                                <li class="right">
                                    <div class="conversation-list">
                                        <div class="dropdown">

                                            <a class="dropdown-toggle" href="#" role="button"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="bx bx-dots-vertical-rounded"></i>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Copy</a>
                                                <a class="dropdown-item" href="#">Save</a>
                                                <a class="dropdown-item" href="#">Forward</a>
                                                <a class="dropdown-item" href="#">Delete</a>
                                            </div>
                                        </div>
                                        <div class="ctext-wrap">
                                            <div class="conversation-name">Henry Wells</div>
                                            <p>
                                                Wow that's great
                                            </p>

                                            <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>
                                                10:07</p>
                                        </div>
                                    </div>
                                </li>


                            </ul>
                        </div>

                    </div>
                </div>

                <div class="p-3 chat-input-section">
                    <div class="row">
                        <div class="col">
                            <div class="position-relative">
                                <input type="text" class="form-control rounded chat-input"
                                    placeholder="Enter Message...">
                                <div class="chat-input-links">
                                    <ul class="list-inline mb-0">
                                        <li class="list-inline-item"><a href="javascript: void(0);"><i
                                                    class="mdi mdi-emoticon-happy-outline"></i></a></li>
                                        <li class="list-inline-item"><a href="javascript: void(0);"><i
                                                    class="mdi mdi-file-image-outline"></i></a></li>
                                        <li class="list-inline-item"><a href="javascript: void(0);"><i
                                                    class="mdi mdi-file-document-outline"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary chat-send w-md waves-effect waves-light"><span
                                    class="d-none d-sm-inline-block me-2">Send</span> <i
                                    class="mdi mdi-send"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}

        <div class="col-lg-12">
            <div class="card pb-3">
                <div style="width:100%;height:400px;" class="card-body">
                    <h4 class="card-title mb-4">@lang('translation.Average_weighting_time')</h4>
                    <div id="averageWaitingTimeChart" data-colors='["--bs-primary", "--bs-warning", "--bs-success"]'
                        class="apex-charts" dir="ltr"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card pb-3">
                <div style="width:100%;height:400px;" class="card-body">
                    <h4 class="card-title mb-4">@lang('translation.peak_hours')</h4>
                    <div id="peak_hours" data-colors='["--bs-primary", "--bs-warning", "--bs-success"]'
                        class="apex-charts" dir="ltr"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- end row -->


    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <!-- Script to render the donut chart -->
    <script>
        var options = {
            series: [
                {{ $analytics[0]['completed'] }}, // Completed percentage
                {{ $analytics[0]['canceled'] }} // Canceled percentage
            ],
            chart: {
                type: 'donut', // Donut chart type
            },
            labels: ['Completed', 'Canceled'], // Labels for each segment
            responsive: [{
                breakpoint: 480, // Responsive options for smaller screens
                options: {
                    chart: {
                        width: 180 // Adjust width for smaller devices
                    },
                    legend: {
                        position: 'bottom' // Move legend to bottom
                    }
                }
            }]
        };

        var chart = new ApexCharts(document.querySelector("#analytics_pic"), options);
        chart.render();

        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ service_completion_rate ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        @php
            // Extract dates and completion rates for the last 15 days
            // Extract data from the last 15 days
            $dates = array_column($service_completion_rate, 'date');
            $totalVisitors = array_column($service_completion_rate, 'total');
            $noShowVisitors = array_column($service_completion_rate, 'no_show');
            $canceledVisitors = array_column($service_completion_rate, 'canceled');
            $completedVisitors = array_column($service_completion_rate, 'completed');
        @endphp



        // Pass PHP arrays to JavaScript
        var dates = @json($dates);
        var totalVisitors = @json($totalVisitors);
        var noShowVisitors = @json($noShowVisitors);
        var canceledVisitors = @json($canceledVisitors);
        var completedVisitors = @json($completedVisitors);

        // ApexChart options
        var options = {
            series: [
                // {
                //     name: 'Total Visitors',
                //     data: totalVisitors // Total visitors data
                // },
                // {
                //     name: 'No-Show Visitors',
                //     data: noShowVisitors // No-show visitors data
                // },

                {
                    name: 'Completed Visitors',
                    data: completedVisitors // Completed visitors data
                }, {
                    name: 'Canceled Visitors',
                    data: canceledVisitors // Canceled visitors data
                },
            ],
            chart: {
                type: 'bar',
                height: 350,
                stacked: true, // Stacked bar chart
                toolbar: {
                    show: 0
                },
                zoom: {
                    enabled: 0
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            plotOptions: {
                bar: {
                    horizontal: false, // Vertical stacked bars
                    borderRadius: 10,
                    dataLabels: {
                        total: {
                            enabled: true,
                            style: {
                                fontSize: '13px',
                                fontWeight: 900
                            }
                        }
                    }
                },
            },
            xaxis: {
                type: 'datetime',
                categories: dates, // Dates for the last 15 days
            },
            legend: {
                position: 'right',
                offsetY: 40
            },
            fill: {
                opacity: 1
            }
        };

        // Render the chart
        var chart = new ApexCharts(document.querySelector("#Service_Completion_Rate"), options);
        chart.render();



        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ average wait time ~~~~~~~~~~~~~~~~~~~~~~~~
        // Pass PHP arrays to JavaScript
        var labels = @json($days);
        var data = @json($waitingTimes);

        // Function to get chart colors
        function getChartColorsArray() {
            return [
                '#FEB019', // Yellow
                '#3F51B5', // Indigo
                '#00D9E9', // Cyan
                '#FF66C3', // Pink
                '#775DD0', // Purple
                '#008FFB', // Blue
                '#00E396', // Green
                '#FF4560', // Red
                '#F86624', // Orange
                '#A5978B', // Brown
                '#9C27B0', // Deep Purple
                '#FFB236' // Amber
            ];
        }

        // Retrieve color array
        var colorArray = getChartColorsArray();

        // Check if colors are retrieved successfully
        if (colorArray.length > 0) {
            // ApexCharts configuration
            var options = {
                chart: {
                    type: 'bar',
                    height: '100%', // Make chart height responsive
                    stacked: false, // Change to true if you want stacked bars
                    toolbar: {
                        show: false // Show toolbar for export options
                    },
                    zoom: {
                        enabled: true
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%', // Adjust bar width
                        borderRadius: 4, // Rounded corners
                    },
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                    name: 'Average waiting time',
                    data: data // Use visitor counts as data
                }],
                xaxis: {
                    categories: labels, // Use hours as categories
                    title: {
                        text: 'Hour of the Day'
                    },
                    labels: {
                        rotate: -45 // Rotate labels for better readability
                    }
                },
                yaxis: {
                    title: {
                        text: 'Average waiting time'
                    }
                },
                colors: [colorArray[0]], // Use the first color from the array
                legend: {
                    position: 'bottom',
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + " ";
                        }
                    }
                },
                responsive: [{
                    breakpoint: 768,
                    options: {
                        plotOptions: {
                            bar: {
                                columnWidth: '70%',
                            }
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            // Initialize and render the chart
            var chart = new ApexCharts(document.querySelector("#averageWaitingTimeChart"), options);
            chart.render();
        } else {
            console.error("Failed to retrieve chart colors.");
        }



        // ~~~~~~~~~~~~~~~~~~~~~~~~~~ peak hours ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        var peak_hour_label = null;
        var peak_hour_count = null;

        // Function to get chart colors
        function getChartColorsArray() {
            return [
                '#FF4560', // Red
                '#775DD0', // Purple
                '#008FFB', // Blue
                '#00E396', // Green
                '#FEB019', // Yellow

                '#3F51B5', // Indigo
                '#F86624', // Orange
                '#A5978B', // Brown
                '#00D9E9', // Cyan
                '#FF66C3', // Pink
                '#9C27B0', // Deep Purple
                '#FFB236' // Amber
            ];
        }

        // Retrieve color array
        var colorArray = getChartColorsArray();

        // Check if colors are retrieved successfully
        if (colorArray.length > 0) {
            // ApexCharts configuration
            var options = {
                chart: {
                    type: 'area',
                    height: '100%', // Make chart height responsive
                    stacked: false, // Change to true if you want stacked bars
                    toolbar: {
                        show: false // Show toolbar for export options
                    },
                    zoom: {
                        enabled: true
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%', // Adjust bar width
                        borderRadius: 4, // Rounded corners
                    },
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                    name: 'Visitor Count',
                    data: peak_hour_count // Use visitor counts as data
                }],
                xaxis: {
                    categories: peak_hour_label, // Use hours as categories
                    title: {
                        text: 'Hour of the Day'
                    },
                    labels: {
                        rotate: -45 // Rotate labels for better readability
                    }
                },
                yaxis: {
                    title: {
                        text: 'Number of Visitors'
                    }
                },
                colors: [colorArray[4]], // Use the first color from the array
                legend: {
                    position: 'bottom',
                },
                fill: {
                    opacity: 1
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return val + " visitors";
                        }
                    }
                },
                responsive: [{
                    breakpoint: 768,
                    options: {
                        plotOptions: {
                            bar: {
                                columnWidth: '70%',
                            }
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            // Initialize and render the chart
            var chart = new ApexCharts(document.querySelector("#peak_hours"), options);
            chart.render();
        } else {
            console.error("Failed to retrieve chart colors.");
        }
    </script>
@endsection
@section('script')
    <!-- apexcharts -->
    <script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>

    <!-- Saas dashboard init -->
    <script src="{{ URL::asset('build/js/pages/saas-dashboard.init.js') }}"></script>
@endsection