@php
    $home = new \App\Http\Controllers\HomeController();
    use Illuminate\Http\Request;
    $request = Request::capture();
    $startDate = $request->startDay ? $request->startDay : date('Y-01-01');
    $endDate = $request->endDay ? $request->endDay : date('Y-12-31');
    $chart = $home->chart_vente($startDate, $endDate);
    $chart2 = $home->chart_achat($startDate, $endDate);

    $privilegecheck = new \App\Users_controle();
    $check_privilege = $privilegecheck->has_privilege(
        \Illuminate\Support\Facades\Session::get('user')['id'],
        'producteur',
    );
@endphp
@extends('dashboard._blank')

@section('sidebar')
    @include('dashboard._sidebar')
@endsection

@section('content')
    <style>
        .item img {
            width: 100%;
        }

        .pace {
            -webkit-pointer-events: none;
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .pace-inactive {
            display: none;
        }

        .contact {
            border: 1px solid #ddd;
            border-radius: 50px;
        }

        .pace .pace-progress {

            background: #88b121;

            position: fixed;
            z-index: 2000;
            top: 0;
            right: 100%;
            width: 100%;
            height: 2px;
        }

        .pace .pace-progress-inner {
            display: block;
            position: absolute;
            right: 0px;
            width: 100px;
            height: 100%;

            box-shadow: 0 0 10px #88b121, 0 0 5px #88b121;

            opacity: 1.0;
            -webkit-transform: rotate(3deg) translate(0px, -4px);
            -moz-transform: rotate(3deg) translate(0px, -4px);
            -ms-transform: rotate(3deg) translate(0px, -4px);
            -o-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
        }

        .pace .pace-activity {
            display: block;
            position: fixed;
            z-index: 2000;
            top: 15px;
            right: 15px;
            width: 14px;
            height: 14px;
            border: solid 2px transparent;

            border-top-color: #88b121;
            border-left-color: #88b121;

            border-radius: 10px;
            -webkit-animation: pace-spinner 400ms linear infinite;
            -moz-animation: pace-spinner 400ms linear infinite;
            -ms-animation: pace-spinner 400ms linear infinite;
            -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;
        }

        @-webkit-keyframes pace-spinner {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes pace-spinner {
            0% {
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-o-keyframes pace-spinner {
            0% {
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-ms-keyframes pace-spinner {
            0% {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes pace-spinner {
            0% {
                transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .chosen-container-single .chosen-single {
            height: 38px;
            background: none;
            border-radius: 0px;
            line-height: 38px;
        }

        .chosen-container-single .chosen-single div {
            margin-top: 8px;
        }

        #button {
            display: block;
            margin: 20px auto;
            padding: 10px 30px;
            background-color: #eee;
            border: solid #ccc 1px;
            cursor: pointer;
        }

        #overlay {
            position: fixed;
            top: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }

        .cv-spinner {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px #ddd solid;
            border-top: 4px #2e93e6 solid;
            border-radius: 50%;
            animation: sp-anime 0.8s infinite linear;
        }

        @keyframes sp-anime {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(359deg);
            }
        }

        .is-hide {
            display: none;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        input[type="checkbox"][id^="myCheckbox"] {
            display: none;
        }

        label {
            border: 1px solid #fff;
            padding-top: 10px;
            display: block;
            position: relative;
            /* margin-top: 10px; */
            font-weight: bold;
            color: #000;
        }

        label:before {
            background-color: white;
            color: white;
            content: " ";
            display: block;
            border-radius: 50%;
            border: 1px solid grey;
            position: absolute;
            top: -5px;
            left: -5px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 28px;
            transition-duration: 0.4s;
            transform: scale(0);
        }

        label img {
            height: 100%;
            width: 100%;
            transition-duration: 0.2s;
            transform-origin: 50% 50%;
        }

        :checked+label {
            border-color: #ddd;
        }

        :checked+label:before {
            content: "✓";
            background-color: grey;
            transform: scale(1);
        }

        :checked+label img {
            transform: scale(0.9);
            /* box-shadow: 0 0 5px #333; */
            z-index: -1;
        }

        .card-1 {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }

        .card-1:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 1000ms ease;
        }


        .card-3:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 1000ms ease;
        }

        select {
            margin-left: 0px;
        }

        p a {
            font-size: 10pt;
            font-family: 'Montserrat';
            border-bottom: none;
            background: none;
        }

        p a i {
            color: #fff;
        }

        p a:hover {
            color: #2A3F54;
            font-weight: bold;
            font-size: 10pt;
            background: none;

        }

        .carousel-item {
            height: 100%;
        }

        .carousel-caption h5 {
            font-size: 20pt;
            color: #000;
            font-weight: bold;
        }

        .panel {
            padding: 5%;
            text-align: center;
            font-weight: bold;
            color: #000;
            font-size: 15pt;
        }

        .panel .count {
            font-size: 20pt;
            padding: 2% 5%;
            font-weight: bold;
            text-align: center;
            border-radius: 50px;
            color: #000;
        }

        .card-1 {
            text-align: center;
            border: none;
        }

        .myslick {
            max-width: 350px !important;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 10px
        }

        .btn-success {
            background: #88b121;
        }

        td .btn {
            display: block !important;
        }
    </style>
    <style>
        .card {
            /* width: 300px; */
            height: 200px;
            background-color: #88b121;
            /* background-image: linear-gradient(43deg, #88b121 0%, #88b121 46%, #88b121 100%); */
            border-radius: 8px;
            color: white;
            overflow: hidden;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
            cursor: pointer;
        }

        .card-content {
            padding: 20px;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            color: white;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100%;
        }

        .card-content .card-title {
            font-size: 24px;
            font-weight: 700;
            color: inherit;
            text-transform: uppercase;
        }

        .card-content .card-para {
            /* color: inherit; */
            opacity: 0.8;
            font-weight: 400;
            font-size: 20px;
        }

        .card:hover {
            transform: rotateY(10deg) rotateX(10deg) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .card:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
            z-index: 1;
        }

        .card:hover:before {
            transform: translateX(-100%);
        }

        .card:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
            z-index: 1;
        }

        .card:hover:after {
            transform: translateX(100%);
        }
    </style>
    @if ($check_privilege)
        <div class="right_col" role="main">
            <div class="row">
                
                {{-- Home slider --}}
                @include('dashboard.Boutique/Components/admin/home-slider')

                <div class="col-sm-12 col-lg-12 col-xs-12">
                    <div class="row">
                        @if ($total_boutique < 1)
                            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">

                                <div class="alert alert-light"
                                    style="font-size: 12pt;padding: 2%;border-radius: 0;background: #f8f8f8;">
                                    <p style="font-size: 14pt;">Tableau de bord</p>
                                </div> 
                            </div>
                        @endif
                    </div>
                </div>

                @include('dashboard.Boutique/Components/admin/statistique-filter')

                 @include('dashboard.Boutique.Components/admin/panel-statistique',[
                    'articleProducteur'=>$articleProducteur,
                    'article_merchant'=>$article_merchant,
                    'producerPercentage'=>$producerPercentage,
                    'total_commande'=>$total_commande
                ])
            </div>
        @else
            <div class="right_col" role="main">
                <div class="row">

                    {{-- Slider --}}
                    @include('dashboard.Boutique.Components/merchant/home-slider')

                    <div class="col-lg-12 mb-4" style="margin-top: 20px;">

                        {{-- Bouton Toutes les boutiques --}}
                        @include('dashboard.Boutique.Components/common/btn-all-boutique')

                        {{-- Bouton de retrait --}}
                        @include('dashboard.Boutique.Components/common/btn-retrait', [
                            'portefeuilles'=>$portefeuilles,
                            'total_boutique'=>$total_boutique
                        ])

                        {{-- Faq --}}
                        @include('dashboard.Boutique.Components/common/faq')
                    </div>

                    <div class="col-sm-12 col-lg-12 col-xs-12">
                        <div class="row">

                            {{-- Demarrer l'aventure --}}
                            @include('dashboard.Boutique.Components/common/demarrer-aventure',[
                                'total_boutique'=>$total_boutique
                            ])
                            
                            {{-- Identite utilisateur --}}
                            @include('dashboard.Boutique.Components/common/user-should-be-identify')
                        </div>

                        {{-- Code de Parrainage --}}
                        @include('dashboard.Boutique.Components/common/code-parrainage',[
                            'code'=>$code
                        ])

                        @include('dashboard.Boutique.Components.merchant.panel-marketer',[
                            'marketers'=>$marketers
                        ])

                        <div class="row">
                        </div>
                        </div>
                            <h2 class="col-sm-12 col-xs-12 text-center" style="margin-top: 5%;">
                                STATISTIQUES GENERALES

                                <hr style="background: #88b121;color: #88b121;width: 5%;padding: 1px">

                            </h2>

                            {{-- Filter Panel For Statistique --}}
                            @include('dashboard.Boutique.Components.merchant.statistique-filter')

                            {{-- List des portefeuilles par devise --}}
                            @include('dashboard.Boutique.Components.common.list-portefeuille',[
                                'portefeuilles'=>$portefeuilles
                            ])

                            {{-- Panel Statistique --}}
                            @include('dashboard.Boutique.Components.merchant.panel-statistique',[
                                'total_articles_activer'=>$total_articles_activer,
                                'total_achat'=>$total_achat,
                                'total_vente'=>$total_vente,
                                'total_shipping'=>$total_shipping,
                                'total_commande'=>$total_commande,
                                'total_boutique'=>$total_boutique
                            ])

                            @include('dashboard.Boutique.Components.merchant.rapport-vente-achat')
                </div>
                <div class="row">

                    {{-- Last Added Product --}}
                    @include('dashboard.Boutique.Components.common.recent-added-product', [
                        'articles_lists'=>$articles_lists
                    ])

                   {{-- Product added to Favorite --}}
                    @include('dashboard.Boutique.Components.common.favorite-product',[
                        'favoris_article'=>$favoris_article
                    ])

                   {{-- Recent visited boutique --}}
                    @include('dashboard.Boutique.Components.common.recent-visited-boutique',[
                        'boutiques'=>$boutiques
                    ])

                    {{-- Favorite market --}}
                    @include('dashboard.Boutique.Components.common.favorite-boutique',[
                        'favoris_boutique'=>$favoris_boutique
                    ])
                    
                </div>
            </div>


            @include('dashboard.Boutique.Components.common.description-modal')

            {{-- Demande de Retrait --}}
            @if (\Illuminate\Support\Facades\Session::get('user')['doc_validated'])
                @include('dashboard.paiement_box.retrait')
            @endif
    @endif

@endsection
@section('script')
    <script>
        $(document).ready(function() {

            $('#subscribe').click(function() {
                $('#subscribeModal').modal('show')
                console.log('ok');
            })

            console.log($('#startDay').val());
            console.log($('#endDay').val());

            $('#filterButton').on('click', function() {
                $('#filterForm').fadeToggle();
            });
        });
    </script>
@endsection