@extends('backend.master')

@section('title')
    {{ ___('common.Dashboard') }}
@endsection

@section('content')
    <div class="page-content">
        <div class="row ">
            <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="ot_crm_summeryBox d-flex align-items-center mb-24">
                    <div class="icon">
                        <img class="img-fluid" src="{{ asset('backend/assets/images/crm/crm_summery1.svg') }}" alt="crm_summery1">
                    </div>
                    <div class="summeryContent">
                        <h4>{{ ___('common.total_sales') }}</h4>
                        <h1>70,360+</h1>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="ot_crm_summeryBox d-flex align-items-center mb-24">
                    <div class="icon">
                        <img class="img-fluid" src="{{ asset('backend/assets/images/crm/crm_summery2.svg') }}" alt="crm_summery1">
                    </div>
                    <div class="summeryContent">
                        <h4>{{ ___('common.products') }}</h4>
                        <h1>360+</h1>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="ot_crm_summeryBox d-flex align-items-center mb-24">
                    <div class="icon">
                        <img class="img-fluid" src="{{ asset('backend/assets/images/crm/crm_summery3.svg') }}" alt="crm_summery1">
                    </div>
                    <div class="summeryContent">
                        <h4>{{ ___('common.projects') }}</h4>
                        <h1>12,450+</h1>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="ot_crm_summeryBox d-flex align-items-center mb-24">
                    <div class="icon">
                        <img class="img-fluid" src="{{ asset('backend/assets/images/crm/crm_summery4.svg') }}" alt="crm_summery1">
                    </div>
                    <div class="summeryContent">
                        <h4>{{ ___('common.pos') }}</h4>
                        <h1>7360+</h1>
                    </div>
                </div>
            </div>
            <div class="col-xxl-8 col-xl-12 ">
                <div class="ot-card chart-card2 ot_heightFull mb-24">

                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="card-title">
                            <h4>{{ ___('common.sales_info') }}</h4>
                        </div>

                        {{-- Dropdown --}}
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button" id="revenueBtn1"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.september') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">october</a>
                                </li>
                                <li><a class="dropdown-item" href="#">November</a>
                                </li>
                                <li><a class="dropdown-item" href="#">january</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Chart --}}
                    <div id="crm_chart" > </div>
                </div>
            </div>
            <div class="col-xxl-4 col-xl-6">
                <div class="ot-card chart-card2 ot_heightFull mb-24">
                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap_10">
                        <div class="card-title">
                            <h4>{{ ___('common.projects_list') }}</h4>
                        </div>
                        {{-- Dropdown --}}
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button" id="revenueBtn1"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.current_projects') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">Dating App Dev</a>
                                </li>
                                <li><a class="dropdown-item" href="#">Dashbord Ux</a>
                                </li>
                                <li><a class="dropdown-item" href="#">E-commerce</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="otPorject__wrapper">
                            <div class="otProject_single d-flex justify-content-between mb_15">
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Task Name</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">Dating App Dev</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400" >Dateline</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">20 October</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Assigennes</span>
                                    <div class="assigne_imgs d-flex align-items-center">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <span class="assigne_img assingneCount d-flex align-items-center justify-content-center">
                                            +3
                                        </span>
                                    </div>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Priority</span>
                                    <div class="priority_text d-flex align-items-center gap_8">
                                        <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.58105 1.68744L5.58105 12.9374" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M1.06286 6.22516C1.06286 6.22516 3.50861 1.68766 5.58011 1.68766C7.65311 1.68766 10.0996 6.22516 10.0996 6.22516" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span class="fs_14 fw_500 text-uppercase dangerColor">HIGH</span>
                                    </div>
                                </div>
                            </div>
                            <div class="otProject_single d-flex justify-content-between mb_15">
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Task Name</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">Dating App Dev</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400" >Dateline</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">20 October</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Assigennes</span>
                                    <div class="assigne_imgs d-flex align-items-center">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <span class="assigne_img assingneCount d-flex align-items-center justify-content-center">
                                            +3
                                        </span>
                                    </div>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Priority</span>
                                    <div class="priority_text d-flex align-items-center gap_8">
                                        <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.58105 1.68744L5.58105 12.9374" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M1.06286 6.22516C1.06286 6.22516 3.50861 1.68766 5.58011 1.68766C7.65311 1.68766 10.0996 6.22516 10.0996 6.22516" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span class="fs_14 fw_500 text-uppercase greenColor">Medium</span>
                                    </div>
                                </div>
                            </div>
                            <div class="otProject_single d-flex justify-content-between mb_15">
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Task Name</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">Dating App Dev</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400" >Dateline</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">20 October</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Assigennes</span>
                                    <div class="assigne_imgs d-flex align-items-center">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">

                                    </div>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Priority</span>
                                    <div class="priority_text d-flex align-items-center gap_8">
                                        <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.58105 1.68744L5.58105 12.9374" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M1.06286 6.22516C1.06286 6.22516 3.50861 1.68766 5.58011 1.68766C7.65311 1.68766 10.0996 6.22516 10.0996 6.22516" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span class="fs_14 fw_500 text-uppercase dangerColor">HIGH</span>
                                    </div>
                                </div>
                            </div>
                            <div class="otProject_single d-flex justify-content-between mb_15">
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Task Name</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">Dating App Dev</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400" >Dateline</span>
                                    <h4 class="fs_16 fw_500 mt-0 titleText">20 October</h4>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Assigennes</span>
                                    <div class="assigne_imgs d-flex align-items-center">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                        <img class="assigne_img" src="{{ asset('backend/assets/images/crm/assingeImg1.png') }}" alt="Card image cap">
                                    </div>
                                </div>
                                <div class="otProject_singleSep">
                                    <span class="otProject_subText grayText fs_12 f_w_400">Priority</span>
                                    <div class="priority_text d-flex align-items-center gap_8">
                                        <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.58105 1.68744L5.58105 12.9374" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M1.06286 6.22516C1.06286 6.22516 3.50861 1.68766 5.58011 1.68766C7.65311 1.68766 10.0996 6.22516 10.0996 6.22516" stroke="#FE2E00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        <span class="fs_14 fw_500 text-uppercase dangerColor">HIGH</span>
                                    </div>
                                </div>
                            </div>
                            <button class="ot_crm_btn gap_10 d-flex align-items-center justify-content-center w-100"><span Class="fs_18 fw_400 lh-1" >Add New Task</span>
                                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4.5C7.121 4.5 3 8.621 3 13.5C3 18.379 7.121 22.5 12 22.5C16.879 22.5 21 18.379 21 13.5C21 8.621 16.879 4.5 12 4.5ZM12 20.5C8.206 20.5 5 17.294 5 13.5C5 9.706 8.206 6.5 12 6.5C15.794 6.5 19 9.706 19 13.5C19 17.294 15.794 20.5 12 20.5Z" fill="#3B3B3B"/>
                                    <path d="M13 8.5H11V12.5H7V14.5H11V18.5H13V14.5H17V12.5H13V8.5Z" fill="#3B3B3B"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4 col-xl-6 ">
                <div class="ot-card chart-card2 ot_heightFull mb-24">
                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap_10">
                        <div class="card-title">
                            <h4>{{ ___('common.nearest_events') }}</h4>
                        </div>
                        {{-- Dropdown --}}
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button" id="revenueBtn1"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.current_projects') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">Dating App Dev</a>
                                </li>
                                <li><a class="dropdown-item" href="#">Dashbord Ux</a>
                                </li>
                                <li><a class="dropdown-item" href="#">E-commerce</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="otEvent__wrapper">
                            <div class="otEvent_single d-flex justify-content-between  align-items-center">
                                <div class="otEvent_singleSep w-100">
                                    <div class="icon">
                                        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.1914 4.78112L13.1914 21.6561" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M6.41363 11.5877C6.41363 11.5877 10.0823 4.78145 13.1895 4.78145C16.299 4.78145 19.9688 11.5877 19.9688 11.5877" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                    <h4 class="fs_18 fw_500 mt-0 titleText max_275">Presentation of the new department</h4>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fs_16 fw_400 grayText" >Today | 4.00PM</span>
                                        <div class="clockIcon">
                                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15 7.5C15 9.48912 14.2098 11.3968 12.8033 12.8033C11.3968 14.2098 9.48912 15 7.5 15C5.51088 15 3.60322 14.2098 2.1967 12.8033C0.790176 11.3968 0 9.48912 0 7.5C0 5.51088 0.790176 3.60322 2.1967 2.1967C3.60322 0.790176 5.51088 0 7.5 0C9.48912 0 11.3968 0.790176 12.8033 2.1967C14.2098 3.60322 15 5.51088 15 7.5ZM7.5 3.28125C7.5 3.15693 7.45061 3.0377 7.36271 2.94979C7.2748 2.86189 7.15557 2.8125 7.03125 2.8125C6.90693 2.8125 6.7877 2.86189 6.69979 2.94979C6.61189 3.0377 6.5625 3.15693 6.5625 3.28125V8.4375C6.56253 8.52012 6.58439 8.60127 6.62588 8.67273C6.66737 8.74418 6.72701 8.80339 6.79875 8.84437L10.08 10.7194C10.1877 10.7776 10.3139 10.7913 10.4315 10.7577C10.5492 10.7241 10.6491 10.6458 10.7099 10.5396C10.7706 10.4333 10.7873 10.3075 10.7565 10.189C10.7257 10.0706 10.6498 9.96885 10.545 9.90563L7.5 8.16562V3.28125Z" fill="#6F767E"/>
                                            </svg>
                                            <span class="otProject_subText grayText fs_12 f_w_400" >4 PM</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="otEvent_single style2 d-flex justify-content-between align-items-center ">
                                <div class="otEvent_singleSep w-100">
                                    <div class="icon">
                                        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.1914 4.78112L13.1914 21.6561" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M6.41363 11.5877C6.41363 11.5877 10.0823 4.78145 13.1895 4.78145C16.299 4.78145 19.9688 11.5877 19.9688 11.5877" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                    <h4 class="fs_18 fw_500 mt-0 titleText max_275">Its Williamson Birthday</h4>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fs_16 fw_400 grayText" >Today | 6.00PM</span>
                                        <div class="clockIcon">
                                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15 7.5C15 9.48912 14.2098 11.3968 12.8033 12.8033C11.3968 14.2098 9.48912 15 7.5 15C5.51088 15 3.60322 14.2098 2.1967 12.8033C0.790176 11.3968 0 9.48912 0 7.5C0 5.51088 0.790176 3.60322 2.1967 2.1967C3.60322 0.790176 5.51088 0 7.5 0C9.48912 0 11.3968 0.790176 12.8033 2.1967C14.2098 3.60322 15 5.51088 15 7.5ZM7.5 3.28125C7.5 3.15693 7.45061 3.0377 7.36271 2.94979C7.2748 2.86189 7.15557 2.8125 7.03125 2.8125C6.90693 2.8125 6.7877 2.86189 6.69979 2.94979C6.61189 3.0377 6.5625 3.15693 6.5625 3.28125V8.4375C6.56253 8.52012 6.58439 8.60127 6.62588 8.67273C6.66737 8.74418 6.72701 8.80339 6.79875 8.84437L10.08 10.7194C10.1877 10.7776 10.3139 10.7913 10.4315 10.7577C10.5492 10.7241 10.6491 10.6458 10.7099 10.5396C10.7706 10.4333 10.7873 10.3075 10.7565 10.189C10.7257 10.0706 10.6498 9.96885 10.545 9.90563L7.5 8.16562V3.28125Z" fill="#6F767E"/>
                                            </svg>
                                            <span class="otProject_subText grayText fs_12 f_w_400" >4 PM</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="otEvent_single style3 d-flex justify-content-between  align-items-center">
                                <div class="otEvent_singleSep w-100">
                                    <div class="icon">
                                        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.1914 4.78112L13.1914 21.6561" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M6.41363 11.5877C6.41363 11.5877 10.0823 4.78145 13.1895 4.78145C16.299 4.78145 19.9688 11.5877 19.9688 11.5877" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                    <h4 class="fs_18 fw_500 mt-0 titleText max_275">New Projects Deals Completed</h4>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fs_16 fw_400 grayText" >Today | 4.00PM</span>
                                        <div class="clockIcon">
                                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15 7.5C15 9.48912 14.2098 11.3968 12.8033 12.8033C11.3968 14.2098 9.48912 15 7.5 15C5.51088 15 3.60322 14.2098 2.1967 12.8033C0.790176 11.3968 0 9.48912 0 7.5C0 5.51088 0.790176 3.60322 2.1967 2.1967C3.60322 0.790176 5.51088 0 7.5 0C9.48912 0 11.3968 0.790176 12.8033 2.1967C14.2098 3.60322 15 5.51088 15 7.5ZM7.5 3.28125C7.5 3.15693 7.45061 3.0377 7.36271 2.94979C7.2748 2.86189 7.15557 2.8125 7.03125 2.8125C6.90693 2.8125 6.7877 2.86189 6.69979 2.94979C6.61189 3.0377 6.5625 3.15693 6.5625 3.28125V8.4375C6.56253 8.52012 6.58439 8.60127 6.62588 8.67273C6.66737 8.74418 6.72701 8.80339 6.79875 8.84437L10.08 10.7194C10.1877 10.7776 10.3139 10.7913 10.4315 10.7577C10.5492 10.7241 10.6491 10.6458 10.7099 10.5396C10.7706 10.4333 10.7873 10.3075 10.7565 10.189C10.7257 10.0706 10.6498 9.96885 10.545 9.90563L7.5 8.16562V3.28125Z" fill="#6F767E"/>
                                            </svg>
                                            <span class="otProject_subText grayText fs_12 f_w_400" >4 PM</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="otEvent_single style4 d-flex justify-content-between  align-items-center">
                                <div class="otEvent_singleSep w-100">
                                    <div class="icon">
                                        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.1914 4.78112L13.1914 21.6561" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M6.41363 11.5877C6.41363 11.5877 10.0823 4.78145 13.1895 4.78145C16.299 4.78145 19.9688 11.5877 19.9688 11.5877" stroke="#15B974" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                    <h4 class="fs_18 fw_500 mt-0 titleText max_275">New Projects Deals Completed</h4>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fs_16 fw_400 grayText" >Today | 4.00PM</span>
                                        <div class="clockIcon">
                                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M15 7.5C15 9.48912 14.2098 11.3968 12.8033 12.8033C11.3968 14.2098 9.48912 15 7.5 15C5.51088 15 3.60322 14.2098 2.1967 12.8033C0.790176 11.3968 0 9.48912 0 7.5C0 5.51088 0.790176 3.60322 2.1967 2.1967C3.60322 0.790176 5.51088 0 7.5 0C9.48912 0 11.3968 0.790176 12.8033 2.1967C14.2098 3.60322 15 5.51088 15 7.5ZM7.5 3.28125C7.5 3.15693 7.45061 3.0377 7.36271 2.94979C7.2748 2.86189 7.15557 2.8125 7.03125 2.8125C6.90693 2.8125 6.7877 2.86189 6.69979 2.94979C6.61189 3.0377 6.5625 3.15693 6.5625 3.28125V8.4375C6.56253 8.52012 6.58439 8.60127 6.62588 8.67273C6.66737 8.74418 6.72701 8.80339 6.79875 8.84437L10.08 10.7194C10.1877 10.7776 10.3139 10.7913 10.4315 10.7577C10.5492 10.7241 10.6491 10.6458 10.7099 10.5396C10.7706 10.4333 10.7873 10.3075 10.7565 10.189C10.7257 10.0706 10.6498 9.96885 10.545 9.90563L7.5 8.16562V3.28125Z" fill="#6F767E"/>
                                            </svg>
                                            <span class="otProject_subText grayText fs_12 f_w_400" >4 PM</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-8 col-xl-12  table-content table-basic">
                <div class="card ot_heightFull mb-24">
                    <div class="card-header d-flex justify-content-between gap_10 flex-wrap">
                        <div class="card-title m-0">
                            <h4>{{ ___('common.unpaid_invoices') }}</h4>
                        </div>
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button" id="revenueBtn1" data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.last_07_days') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">{{ ___('common.last_07_days') }}</a>
                                </li>
                                <li><a class="dropdown-item" href="#">{{ ___('common.last_month') }}</a>
                                </li>
                                <li><a class="dropdown-item" href="#">{{ ___('common.last_year') }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table_height_450 niceScroll">
                            <table class="table ot-table-bg">
                                <thead class="thead">
                                    <tr>
                                        <th class="serial">{{ ___('common.project_name') }}</th>
                                        <th class="purchase">{{ ___('common.customer_name') }}</th>
                                        <th class="purchase">{{ ___('common.sub_total') }}</th>
                                        <th class="purchase">{{ ___('common.ended_date') }}</th>
                                        <th class="purchase">{{ ___('common.status') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span></td>
                                    </tr>

                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span></td>
                                    </tr>

                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span></td>
                                    </tr>

                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span></td>
                                    </tr>

                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span></td>
                                    </tr>


                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span></td>
                                    </tr>

                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span></td>
                                    </tr>

                                    <tr>
                                        <td>Macbook Air M1</td>
                                        <td>Arlene McCoy</td>
                                        <td>$1,630.00</td>
                                        <td>02 Apr, 2022</td>
                                        <td><span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--  table end -->
                    </div>
                </div>
            </div>
            {{-- Revenue --}}
            <div class="col-12 col-lg-6 col-xl-6 col-xxl-4 ">
                <div class="ot-card ot_heightFull mb-24">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h4>{{ ___('common.revenue') }}</h4>
                        </div>
                    </div>
                    <div class="d-flex flex-column align-items-center w-100">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div id="ot-line-chart-alpha"></div>
                            <div class="chart-custom-content gap-0 flex-column align-items-start">
                                <h3>{{ ___('common.total_earnings') }}</h3>
                                <div class="d-flex align-items-baseline gap-2">
                                    <h2 class="counter">$13,314</h2>
                                    <div class="percentage-spike d-flex align-items-center gap-1">
                                        <img src="{{ asset('backend/assets/images/icons/rotated-down-arrow.svg') }}"
                                            alt="" />
                                        <p class="primary-blue">-10%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div id="ot-line-chart-beta"></div>
                            <div class="chart-custom-content gap-0 flex-column align-items-start">
                                <h3>{{ ___('common.total_expense') }}</h3>
                                <div class="d-flex align-items-baseline gap-2">
                                    <h2 class="counter">$3,814</h2>
                                    <div class="percentage-spike d-flex align-items-center gap-1">
                                        <img src="{{ asset('backend/assets/images/icons/rotated-up-arrow.svg') }}"
                                            alt="" />
                                        <p class="secondary-blue">10%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            {{-- Browser States --}}
            <div class="col-12 col-lg-6 col-xl-6 col-xxl-4">
                <div class="ot-card ot_heightFull mb-24">
                    <div class="card-header d-flex justify-content-between mb-30">
                        <div class="card-title">
                            <h4>{{ ___('common.browser_states') }}</h4>
                        </div>
                    </div>
                    <div class="browser-details">
                        <div class="row d-flex align-items-center">
                            <div class="col-6 d-flex align-items-center gap-2">
                                <img src="{{ asset('backend/assets/images/grommet-icons_chrome.png') }}" alt="">
                                <p class="browser-name">{{ ___('common.google_chrome') }}</p>
                            </div>
                            <div class="col-6 d-flex align-items-center justify-content-end gap-2">
                                <p class="browser-percent">50.2%</p>

                                <div class="progress-container">
                                    <div class="progress" data-percentage="65">
                                        <span class="progress-left">
                                            <span class="progress-bar progress-c-violet"></span>
                                        </span>
                                        <span class="progress-right">
                                            <span class="progress-bar progress-c-violet"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex align-items-center ">
                            <div class="col-6 d-flex align-items-center  gap-2">
                                <img src="{{ asset('backend/assets/images/firefox.png') }}" alt="">
                                <p class="browser-name">{{ ___('common.mozilla_firefox') }}</p>
                            </div>
                            <div class="col-6 d-flex justify-content-end align-items-center gap-2">
                                <p class="browser-percent">50.2%</p>
                                <div class="progress-container">
                                    <div class="progress" data-percentage="90">
                                        <span class="progress-left">
                                            <span class="progress-bar progress-c-skyblue"></span>
                                        </span>
                                        <span class="progress-right">
                                            <span class="progress-bar progress-c-skyblue"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex align-items-center ">
                            <div class="col-6 d-flex align-items-center  gap-2">
                                <img src="{{ asset('backend/assets/images/Safari.png') }}" alt="">
                                <p class="browser-name">{{ ___('common.apple_safari') }}</p>
                            </div>
                            <div class="col-6 d-flex justify-content-end align-items-center gap-2">
                                <p class="browser-percent">50.2%</p>
                                <div class="progress-container">
                                    <div class="progress" data-percentage="40">
                                        <span class="progress-left">
                                            <span class="progress-bar progress-c-yellow"></span>
                                        </span>
                                        <span class="progress-right">
                                            <span class="progress-bar progress-c-yellow"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex align-items-center ">
                            <div class="col-6 d-flex align-items-center  gap-2">
                                <img src="{{ asset('backend/assets/images/logos_microsoft-edge.png') }}" alt="">
                                <p class="browser-name">{{ ___('common.microsoft_edge') }}</p>
                            </div>
                            <div class="col-6 d-flex justify-content-end align-items-center gap-2">
                                <p class="browser-percent">50.2%</p>
                                <div class="progress-container">
                                    <div class="progress" data-percentage="50">
                                        <span class="progress-left">
                                            <span class="progress-bar progress-c-blue"></span>
                                        </span>
                                        <span class="progress-right">
                                            <span class="progress-bar progress-c-blue"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex align-items-center ">
                            <div class="col-6 d-flex align-items-center  gap-2">
                                <img src="{{ asset('backend/assets/images/logos_opera.png') }}" alt="">
                                <p class="browser-name">{{ ___('common.opera') }}</p>
                            </div>
                            <div class="col-6 d-flex justify-content-end align-items-center gap-2">
                                <p class="browser-percent">50.2%</p>
                                <div class="progress-container">
                                    <div class="progress" data-percentage="60">
                                        <span class="progress-left">
                                            <span class="progress-bar progress-c-red"></span>
                                        </span>
                                        <span class="progress-right">
                                            <span class="progress-bar progress-c-red"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-flex align-items-center ">
                            <div class="col-6 d-flex align-items-center  gap-2">
                                <img src="{{ asset('backend/assets/images/Group.png') }}" alt="">
                                <p class="browser-name">{{ ___('common.opera') }}</p>
                            </div>
                            <div class="col-6 d-flex justify-content-end align-items-center gap-2">
                                <p class="browser-percent">50.2%</p>
                                <div class="progress-container">
                                    <div class="progress" data-percentage="75">
                                        <span class="progress-left">
                                            <span class="progress-bar progress-c-black"></span>
                                        </span>
                                        <span class="progress-right">
                                            <span class="progress-bar progress-c-black"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-4 col-xl-6 col-lg-6">
                <div class="ot-card ot_heightFull mb-24">
                    <div class="datepicker-here ot__datePicker" data-language="en"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('backend') }}/assets/js/apex-chart.js"></script>
@endpush