@extends('admin.layouts.container')

@section('content')
<div class="dashboard-body">

    @if(auth()->user()->canAccess('home','stats'))
        <div class="title-wrapper">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <h6 class="pg-title"> Tasks </h6>
                </div>
                <div class="col-lg-7 text-lg-end mt-3 mt-lg-0">
                    <div class="title-aside d-flex justify-content-lg-end mt-4 mt-lg-0 align-items-center">
                        <div class="avatars-imgs">
                            <a href="#" class="user-img"> <img src="{{url('')}}/assets/admin/images/av1.png" alt=""> </a>
                            <a href="#" class="user-img"> <img src="{{url('')}}/assets/admin/images/av2.png" alt=""> </a>
                            <a href="#" class="user-img"> <img src="{{url('')}}/assets/admin/images/av3.png" alt=""> </a>
                        </div>
                        <div class="dropdown ms-2">
                            <button class="btn bg-transparent border-0 p-0 dropdown-toggle after-none" type="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                <i class="fas fa-ellipsis-vertical"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-title mt-4">
            <div class="row">
                <div class="col-lg-6">
                    <a href="#" class="ref-btn butn-st2 line-butn py-2 px-3"> <i class="fal fa-calendar"></i> <span class="txt mx-2"> Last updated: Feb 28, 2024 </span> <i class="fal fa-repeat"></i> </a>
                </div>
                <div class="col-lg-6">
                    <div class="nav-butns d-flex justify-content-lg-end mt-4 mt-lg-0">
                        <div class="dropdown">
                            <button class="butn-st2 line-butn py-2 px-3 ms-2 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fal fa-filter me-2"></i> Filter
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Filter</a></li>
                                <li><a class="dropdown-item" href="#">Filter</a></li>
                            </ul>
                        </div>
                        <a href="#" class="ref-btn butn-st2 blue-butn py-2 px-3 ms-2"> <i class="fal fa-download"></i> <span class="txt ms-2"> Import/Export </span> </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="charts_container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="chart_box mt-5">
                        <div class="chart_head mb-4">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <!-- <h5>Revenue</h5> -->
                                    <div class="form-group">
                                        <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                                            <option value=""> Revenue </option>
                                            <option value=""> Revenue </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="d-flex justify-content-lg-end mt-4 mt-lg-0">
                                        <div class="form-group ms-2">
                                            <select name="" id="" class="form-control input-sm form-select w-auto ms-2">
                                                <option value=""> Monthly </option>
                                                <option value=""> Weekly </option>
                                            </select>
                                        </div>
                                        <div class="form-group ms-2">
                                            <select name="" id="" class="form-control input-sm form-select w-auto ms-2">
                                                <option value=""> All Products </option>
                                                <option value=""> All Products </option>
                                            </select>
                                        </div>
                                        <div class="form-group ms-2">
                                            <input type="date" class="form-control input-sm w-auto ms-2" placeholder="Select Date">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="line_chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="statics-sec">
            <div class="row">
                <div class="col-lg-8">
                    <div class="statics">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st1.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Total profit </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st2.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Avg Sales </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-danger"> -0.12% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st3.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Total Sales </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st4.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Annual Target </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st5.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text"> Communication Rate </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="item">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/admin/images/icons/st6.svg" alt="">
                                    </div>
                                    <div class="cont">
                                        <div class="text">  New Customer </div>
                                        <h5> $29,435.00 </h5>
                                        <div class="btm-txt"> <span class="alert alert-success"> +0.32% </span> <span class="txt"> Higher than last month </span> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="preformance-table">
                        <div class="btn-title d-flex align-items-center justify-content-between">
                            <h5> Top preformance </h5>
                            <a href="#" class="butn-st2 line-butn butn-md"> <span> View All </span> </a>
                        </div>
                        <div class="users">
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av1.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av2.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av3.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av4.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row align-items-center">
                                    <div class="col-7">
                                        <div class="user-wrapper">
                                            <div class="avatar">
                                                <img src="{{url('')}}/assets/admin/images/av5.png" alt="">
                                            </div>
                                            <div class="inf">
                                                <h6> Yasmin Ali </h6>
                                                <small> Yasmin Ali@Gmail.com </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <h6 class="text-end"> $9,249.00 </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="charts_container">
            <div class="row gx-0">
                <div class="col-lg-5">
                    <div class="chart_box mt-5">
                        <div class="chart_head mb-4">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                                            <option value=""> Sales Heatmap </option>
                                            <option value=""> Sales Heatmap </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <select name="" id="" class="form-control input-sm form-select w-auto ms-auto">
                                            <option value=""> Weekly </option>
                                            <option value=""> Monthly </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="chart7"></div>
                    </div>
                </div>
                <div class="col-lg-7 ps-lg-5">
                    <div class="dash-item mt-5">
                        <div class="chart_head mb-4">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                                            <option value=""> Customer Transaction </option>
                                            <option value=""> Customer Transaction </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 text-lg-end mt-4 mt-lg-0">
                                    <a href="#" class="butn-st2 line-butn butn-md"> <span> View All <i class="fal fa-arrow-up-right"></i> </span> </a>
                                </div>
                            </div>
                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="transaction1">
                                            <label class="form-check-label" for="transaction1">
                                                Name
                                            </label>
                                        </div>
                                    </th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Orders</th>
                                    <th scope="col">MRR</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                            <label class="form-check-label" for="transaction3">
                                                Pfizer
                                            </label>
                                        </div>
                                    </td>
                                    <td> <span class="tag tag-green"> Subscribed </span> </td>
                                    <td> 2 </td>
                                    <td> $93.00 </td>
                                    <td>
                                        <div class="dropdown">
                                        <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-ellipsis"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                        </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                            <label class="form-check-label" for="transaction3">
                                                Pfizer
                                            </label>
                                        </div>
                                    </td>
                                    <td> <span class="tag tag-red"> Pending </span> </td>
                                    <td> 2 </td>
                                    <td> $93.00 </td>
                                    <td>
                                        <div class="dropdown">
                                        <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-ellipsis"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                        </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                            <label class="form-check-label" for="transaction3">
                                                Pfizer
                                            </label>
                                        </div>
                                    </td>
                                    <td> <span class="tag tag-green"> Subscribed </span> </td>
                                    <td> 2 </td>
                                    <td> $93.00 </td>
                                    <td>
                                        <div class="dropdown">
                                        <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-ellipsis"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                        </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                            <label class="form-check-label" for="transaction3">
                                                Pfizer
                                            </label>
                                        </div>
                                    </td>
                                    <td> <span class="tag tag-red"> Pending </span> </td>
                                    <td> 2 </td>
                                    <td> $93.00 </td>
                                    <td>
                                        <div class="dropdown">
                                        <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-ellipsis"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                        </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                            <label class="form-check-label" for="transaction3">
                                                Pfizer
                                            </label>
                                        </div>
                                    </td>
                                    <td> <span class="tag tag-green"> Subscribed </span> </td>
                                    <td> 2 </td>
                                    <td> $93.00 </td>
                                    <td>
                                        <div class="dropdown">
                                        <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-ellipsis"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                            <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                        </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection

@section('inner_js')

    <script>
        var line_chart_options = {
          series: [{
        //   name: 'عضو عادى',
          data: [31, 40, 28, 51, 42, 87, 50,28, 51, 70, 109, 150]
        }],
          chart: {
          height: 350,
          type: 'area'
        },
        colors: ['#3D2E84'],
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
                categories: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            },
        tooltip: {
          x: {
            formatter: function(val) {
                return val + "unit"
            }
          },
        },
        };

        var chart = new ApexCharts(document.querySelector("#line_chart"), line_chart_options);
        chart.render();
    </script>

    <script>
        var bar_chart_options = {
            series: [{
                name: 'Yasmin Ali ',
                data: [12, 20, 35, 85, 80, 72, 63]
            }, {
                name: 'Abdulrahman ',
                data: [15, 24, 35, 74, 41, 76, 55]
            }, {
                name: 'Ezz Eldin  ',
                data: [23, 56, 24, 42, 20, 54, 55]
            }, {
                name: 'Noor Abdullah ',
                data: [40, 54, 65, 78, 54, 24, 35]
            }, {
                name: 'Hussein Ali ',
                data: [15, 25, 45, 74, 78, 80, 65]
            }, {
                name: 'Norhan  ',
                data: [15, 24, 35, 44, 45, 65, 70]
            },],
            colors: ['#3D2E84'],
            chart: {
                type: 'heatmap',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                // colors: ['transparent']
            },
            xaxis: {
                categories: ['Mon','Sun','Mon','Wed','Thu', 'Fri','Sat'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            },
            fill: {
                opacity: 1
            },
        };
        var chart = new ApexCharts(document.querySelector("#chart7"), bar_chart_options);
        chart.render();
    </script>

@endsection