@extends('layouts.frontend.appVendor')
@section('title', "Mon compte")
@section('css')
    <style>
        .p-input{
            padding:15px;
            width: 100%;
            border-color: darkgrey;
        }
        .select2 .select2-selection--single{
            padding: 8px!important;
        }
        .header .header__actions {
            margin-top: 18px;
        }
        .header--standard .header__content {
            padding: 2px 0;
        }
        .ps-footer__copyright {
            padding: 5px 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            background: #047112;
        }
        .ps-footer__copyright p {
            margin-bottom: 0;
            line-height: 30px;
            color: #ffffff;
        }
        h3,h4,h1{
            color: #047112;
        }
        h5 {
            font-size: 20px;
            color: #666;
        }
        .ps-block--categories-box, .ps-block__content{
            box-shadow: 2px 2px 6px #ccc;
            border-radius: 10px;
        }
        .ps-block--categories-box {
            margin-bottom: 0;
            padding: 9px 25px 10px 25px;
            background-color: #ffffff;
        }
        .top {
            min-height: 193px;
        }
        .ps-list--link li a {
            display: inline-block;
            color: #666;
            line-height: 41px;
            font-size: 16px;
            position: relative;
            margin-left: 25px;
        }
        .ps-product-list .ps-section__content {
            padding-top: 20px;
        }
        .menu-item-has-children{
            margin-top: 10px;
        }
        .menu-item-icon{
            font-size: 20px;
            padding: 10px;
            box-shadow: inset 0 0 0 2000px rgb(19 177 51 / 16%);
            color: #047112;
            border-radius: 50%;
            margin-right: 50px;
        }
        .menu-item-icon-user {
            font-size: 23px!important;
            font-weight: bold;
            padding: 4px;
            border-radius: 50%;
            border: 2px solid;
        }
            .ps-list--menu-cateogories,.ps-list--categories{
                padding-left: 40px !important;
                padding-right: 20px !important;
                padding-top: 20px !important;
                padding-bottom: 20px !important;
            }
            .ps-list--categories li a {
                display: block;
                line-height: 25px;
                font-size: 18px;
            }
            .ps-block--menu-categories .ps-list--menu-cateogories > li > a {
                display: block;
                padding: 10px 0;
                font-size: 16px;
                line-height: 26px;
                border-bottom: none;
            }
            .ps-list--categories li .sub-toggle i:before {
                content: "\f054";
                font-family: 'FontAwesome' !important;
            }
            .ps-block--site-features.ps-block--site-features-2 .ps-block__item {
                max-width: 100%;
                padding: 5px 11px;
            }
            .ps-block--menu-categories {
                position: relative;
                background-color: #ffffff;
                padding: 15px 15px;
            }
        #shop-categories .ps-product-list {
            margin-bottom: 20px;
            padding: 20px 20px 50px;
            background-color: #f5f5f5;
        }
            .ps-block--menu-categories {
                display: block;
            }
            #shop-categories .ps-catalog-top {
                padding: 1px 0;
            }
        .ps-shopping .ps-shopping__header {
            margin-bottom: 0;
            margin-top: 10px;
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            background-color: #ffffff;
            align-items: center;
            padding: 8px 15px;
        }
        .widget_shop {
            padding: 25px 20px;
            background-color: #ffffff;
        }
        .ps-tabs{
            background: #f5f5f5;
        }
        .ps-list--categories li.active {
            background: green;
            color: #fff;
            border-radius: 25px;
        }
        .ps-list--categories .active a:hover {
            color: #fff;
        }
        .ps-list--categories li {
            position: relative;
            padding: 6px 20px 6px 33px;
            margin-bottom: 10px;
        }
        .ps-list--categories li a {
            line-height: 35px;
        }
        .ps-block--categories-box p {
            font-size: 33px;
            font-weight: 300;
            color: #068d18;
        }
        .ps-block--categories-box span {
            font-size: 24px;
            font-weight: 200;
            color: #068d18;
        }
        @media (min-width: 1200px){
            .container {
                min-width: auto;
            }}
        .disconection{
            margin-left: 73px !important;
            margin-top: 50px!important;
            font-size: 18px;
        }
</style>
@endsection
@section('content')

    <div class="ps-page--shop" id="shop-sidebar">
        <div class="row">
            @component('components.alert')
                @slot('status')
                    {{ session('status') }}
                @endslot
                @slot('error')
                    {{ session('error') }}
                @endslot
                {!! session('message') !!}
            @endcomponent
            <div class="col-md-3">
                <div class="ps-layout__left">
                    <aside class="widget widget_shop">
                        <ul class="ps-list--categories ps-tab-list">
                            <li class="active"><a href="#Dtab-1">Tableau de bord</a></li>
                            <li><a href="#Dtab-2">Catégories de produits</a></li>
                            <li><a href="#Dtab-3">Commandes</a></li>
                            <li><a href="#Dtab-4">Promotion</a></li>
                            <li><a href="#Dtab-5">Gestion personnel</a></li>
                            <li><a href="#Dtab-6">Mode de paiment</a></li>
                            <li><a href="#Dtab-7">Avis</a></li>
                            <li><a href="#Dtab-8">Reporting</a></li>
                            <li><a href="#Dtab-9">Mes paramètres</a></li>
                        </ul>
                        <ul class="disconection">
                            <li style="color: #e53f3f;font-weight: bold"><a href="#">Déconnexion</a>
                            </li>
                        </ul>
                    </aside>
                </div>
            </div>
            <div class="col-md-9"><div class="ps-layout__right">
                    <div class="ps-shopping ps-tab-root">
                        <div class="ps-shopping__header">
                            <h3>Tableau de bord</h3>
                        </div>
                        <div class="">
                            <div class="ps-tab active" id="Dtab-1">
                                <div class="ps-page--shop" id="shop-categories">
                                    <div class="container">

                                        <div class="ps-catalog-top">
                                        </div>

                                        <div class="ps-product-list ps-product-list--2">
                                            <div class="ps-section__content">
                                                <div class="row" style="margin-bottom: 40px">
                                                    <div class="col-md-6">
                                                        <div class="ps-block--categories-box top">
                                                            <p>Salut</p>
                                                            <h3>Toncho Rene</h3>
                                                            <span>Vous avez réalisé un bénéfice de <strong>905,435$</strong> ce mois</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="ps-block--categories-box top">
                                                            <h1 style="text-align: center">789</h1><br>
                                                            <span>Visiteurs ce mois</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="ps-block--categories-box top">
                                                            <h1 style="text-align: center">465</h1><br>
                                                            <span>Commandes ce mois</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h4>Ventes journalières</h4>
                                                <div class="row" style="margin-bottom: 40px">
                                                    <div class="col-md-6">
                                                        <div class="ps-block--categories-box top">
                                                            <br><br><br><br><br>
                                                            <span>Vente du jour</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>789 $</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="fa fa-chevron-right"></i></a></span></div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="ps-block--categories-box top">
                                                            <br><br><br><br><br>
                                                            <span>Produits livrés</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>789 $</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="fa fa-chevron-right"></i></a></span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h4>Commandes journalières</h4>
                                                <div class="row" style="margin-bottom: 20px">
                                                    <div class="col-md-12">
                                                        <div class="ps-block--categories-box">
                                                            <span>Commandes d'aujourd'hui</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>125</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="fa fa-chevron-right"></i></a></span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="ps-block--categories-box">
                                                            <span>Commandes livrées d'aujourd'hui</span>
                                                            <div class="row">
                                                                <div class="col-md-5"><h3>94</h3></div>
                                                                <div class="col-md-7" style="text-align: right"><span><a href="#">Plus de détails <i class="fa fa-chevron-right"></i></a></span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ps-tab" id="Dtab-2">
                                <h3>Catégories de produits</h3>
                                <h4>Créer une catégorie</h4>
                                <div class="row">
                                        <form action="{{ route('product-category.store') }}" method="post" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row col-md-12">
                                                <div class="col-md-6">
                                                    <label for="nom">Nom catégorie*</label>
                                                    <input name="name" type="text" class="p-input form-control" id="nom" placeholder="Ex: Boucherie" required><br><br>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="parentCateg">Catégorie parent</label>
                                                    <select name="parent_category" id="" class="select2 form-control">
                                                        <option value="">Choisir une catégorie</option>
                                                        @forelse($productCategories as $productCategory)
                                                        <option value="{{$productCategory->name}}">{{$productCategory->name}}</option>
                                                        @empty
                                                        <option value="">Pas de catégorie enregistrée</option>
                                                        @endforelse
                                                    </select>
                                                </div>
                                            </div>
                                            <br>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="imgCategory">Image par défaut</label>
                                                    <input name="image" type="file" class="p-input" id="imgCategory" placeholder="Choisir une image par défaut"><br>
                                                </div>
                                                <div class="col-md-6">
                                                    <img id="preview" class="d-none" alt="category image" style="width: 100px; height: 100px;">
                                                </div>
                                            </div>
                                            <br><br>
                                            <div class="text-center">
                                                <button type="submit" class="btn" style="font-size: inherit; color: white; background-color: #068d18; width: 20%;">Créer</button>
                                            </div>
                                            <br><br>
                                        </form>

                                </div>
                                <div class="row">
                                    <h4>Listing des catégories</h4>
                                </div>
                                <div class="row">
                                    <table class="table table-hover table-striped crm-tab" id="tableInfo">
                                        <thead>
                                        <tr>
                                            <th>N°</th>
                                            <th>Nom de la catégorie</th>
                                            <th>Catégorie parent</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($productCategories as $key=>$productCategory)
                                            <tr>
                                                <td>{{++$key}}</td>
                                                <td>{{$productCategory->name}}</td>
                                                <td>{{$productCategory->parent_category}}</td>

                                                <td class="text-center">
                                                    <a href="" title="Modifier" data-toggle="modal" data-target="#editModal"
                                                       style="padding: 5px;">
                                                        <span class="fa fa-pencil"></span>
                                                    </a>
                                                    <button  href="javascript:$('#myformd').submit();" type="submit" title="Supprimer" class="btn btn-mc" style="color: #ff0000" onclick="return confirm('Voulez-vous réellement supprimer cet employé?')">
                                                        <span class="fa fa-trash"></span>
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                        <tr>
                                            <td colspan="3">Aucune catégorie enregistrée pour l'instant</td>
                                        </tr>
                                        @endforelse
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                            <div class="ps-tab " id="Dtab-3">
                                <h3>Commandes</h3>
                            </div>
                            <div class="ps-tab " id="Dtab-4">
                                <h3>Promotion</h3>
                            </div>
                            <div class="ps-tab " id="Dtab-5">
                                <h3>Gestion personnel</h3>
                            </div>
                            <div class="ps-tab " id="Dtab-6">
                                <h3>Mode de paiement</h3>

                            </div>
                            <div class="ps-tab " id="Dtab-7">
                                <h3>Avis</h3>

                            </div>
                            <div class="ps-tab " id="Dtab-8">
                                <h3>Reporting</h3>

                            </div>
                            <div class="ps-tab " id="Dtab-9">
                                <h3>Mes paramètres</h3>

                            </div>
                        </div>
                    </div>
                </div></div>
        </div>

        <!-- Edit category Modal -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             style="width: 100%;" aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-center" id="exampleModalLabel">Modifier la catégorie</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                       {{-- {!! Form::model($productCategory, ['route' => ['product-category.update', $productCategory->id], 'method' => 'put']) !!}
                            <div class="row col-md-12">
                                <div class="col-md-6">
                                    <label for="nom">Nom catégorie*</label>
                                    <input name="" type="text" class="p-input form-control" id="nom" placeholder="Ex: Boucherie" required><br><br>
                                </div>
                                <div class="col-md-6">
                                    <label for="parentCateg">Catégorie parent</label>
                                    <select name="" id="" class="select2 form-control">
                                        <option value="">Choisir une catégorie</option>
                                        <option value="">Poissonnerie</option>
                                        <option value="">Fruits</option>
                                        <option value="">Légumes</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="imgCategory1">Image par défaut</label>
                                    <input name="" type="file" class="p-input" id="imgCategory1" placeholder="Choisir une image par défaut"><br>
                                </div>
                                <div class="col-md-6">
                                    <img id="preview1" class="d-none" alt="category image" style="width: 100px; height: 100px;">
                                </div>
                            </div>
                            <br><br>
                        {!! Form::close() !!}--}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn" style="font-size: inherit; color: white; background-color: #068d18; width: 20%;">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        (function ($) {
            $('.select2').select2({
                tags: false
            });

            ('#tableInfo').dataTable();

            //preview the uploaded image
            $('input[type="file"] #imgCategory').on('change', (e) => {
                let that = e.currentTarget;
                if (that.files && that.files[0]) {
                    $(that).next('.custom-file-label').html(that.files[0].name);
                    let reader = new FileReader();
                    reader.onload = (e) => {
                        $('#preview').attr('src', e.target.result);
                        $('#preview').removeClass('d-none');
                    };
                    reader.readAsDataURL(that.files[0])
                }
            });

        })(jQuery)
    </script>
    @endsection