@extends('layouts.admin')

@section('content')
{{--    {{dd($curr)}}--}}
    <div id="main-content">
        <div class="container-fluid">
            <div class="block-header">
{{--                <div class="row">--}}
{{--                    <div class="col-lg-3 col-md-6">--}}
{{--                        <div class="card info-box-2">--}}
{{--                            <div class="body">--}}
{{--                                <div class="icon">--}}
{{--                                    <div class="chart chart-bar">4,6,-3,-1,2,-2,4,3,6,7,-2,3</div>--}}
{{--                                </div>--}}
{{--                                <div class="content">--}}
{{--                                    <div class="text">Page Views</div>--}}
{{--                                    <div class="number">1,195</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row clearfix">
                        <div class="col-lg-4 col-md-4 col-sm-12">
                            <div style="min-height: 200px;">
                                <div class="body text-center pro-img">
                                    <h6 class="project-title text-primary mb-3"><a href="javascript:void(0);" >Détails de l'administrateur</a></h6>
                                        <form>
                                            @csrf
                                            <div class="form-group">
                                                <label class="project-title text-primary text-center">E-mail</label>
                                                <input type="email" name="email" class="form-control" v-model="adminEmail">
                                            </div>
                                            <div class="form-group">
                                                <label class="project-title text-primary text-center">Mot de passe actuel</label>
                                                <input type="password" name="password" class="form-control" v-model="password">
                                            </div>
                                            <div class="form-group">
                                                <label class="project-title text-primary text-center">Nouveau mot de passe</label>
                                                <input type="password" name="password" class="form-control" v-model="new_password">
                                            </div>
                                            <div class="form-group">
                                                <label class="project-title text-primary text-center">Confirmez le mot de passe</label>
                                                <input type="password" name="password_confirmation" class="form-control" v-model="password_confirmation">
                                            </div>
                                            <button type="button" class="btn btn-primary":disabled="savingAdmin" @click="editAdminInfo()">Modifier les informations<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled v-if="savingAdmin"></span></button>
                                        </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12">
                            <div style="min-height: 200px;">
                                <div class="body text-center pro-img">
                                    <img class="mx-auto d-block mb-3" src="{{$conf->logo}}" alt="" style="max-width: 100px;">
                                    <h6 class="project-title text-primary mb-3"><a href="javascript:void(0);"  data-toggle="modal" data-target="#changeLogo">Mon logo</a></h6>
                                    <p>Téléchargez <strong> le logo </strong> souhaité.</p>
                                    <div class="align-items-center">
                                        <ul class="list-unstyled text-center team-info margin-0">
                                            <li class="text-center"><img src="{{asset('plus.svg')}}" data-toggle="modal" data-target="#changeLogo" data-placement="top" title="" alt=""
                                                                         data-original-title="Add Logo"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12">
                            <div style="min-height: 200px;">
                                <div class="body text-center pro-img">
                                    <img class="mx-auto d-block mb-3" src="{{$conf->logo}}" alt="" style="max-width: 100px;">
                                    <h6 class="project-title text-primary mb-3"><a href="/">{{ $conf->company_name }}</a></h6>
                                    <p>Changer <strong> le nom </strong> de votre page.</p>
                                    <div class="align-items-center">
                                        <div class="accordion" id="accordionName">
                                            <div>
                                                <div id="collapseName" class="collapse" aria-labelledby="headingName" data-parent="#accordionName">
                                                    <div class="card-body">
                                                        <form method="POST" action="admin/updatePageName" class="input-group mb-3">
                                                            @csrf
                                                            <input type="text" id="shop_name" name="shop_name" class="form-control" placeholder="Nom de la boutique" aria-label="Shop name" value="{{ $conf->company_name }}" aria-describedby="basic-addon2">
                                                            <div class="input-group-append">
                                                                <button class="btn btn-outline-secondary" type="submit">Mettre à jour</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <ul class="list-unstyled text-center team-info margin-0">
                                            <li class="text-center"><img src="{{asset('plus.svg')}}" data-toggle="collapse" data-target="#collapseName" aria-expanded="false" aria-controls="collapseName" data-placement="top" title="" alt=""
                                                                         data-original-title="Change shop name"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Change Logo Modal -->
                        <div class="modal fade" id="changeLogo" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="title" id="largeModalLabel">Changer de logo</h4>
                                    </div>
                                    <form action="/admin/logoUpload" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <div class="modal-body">
                                            <div class="card">
                                                <div class="header">
                                                    <h2></h2>
                                                </div>
                                                <div class="body">
                                                    <input type="file" id="image" name="image" class="dropify" data-allowed-file-extensions="png jpg" data-default-file="{{ $conf->logo }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-primary">TÉLÉCHARGER LE LOGO</button>
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">FERMER</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div class="card">
                <div class="card-header text-center" id="editData" style="background: #fff;">
                    <h5 class="mb-2">
                        <div class="align-items-center">
                            <ul class="list-unstyled text-center team-info margin-0" style="background: #fff;">
                                <li class="text-center dropdown-toggle" data-toggle="collapse" data-target="#editCollapse" aria-expanded="false" aria-controls="editCollapse">
                                    Modifier toutes les données
                                </li>
                            </ul>
                        </div>
                    </h5>
{{--                    <a class="project-title text-primary  collapsed text-center dropdown-toggle" type="button" data-toggle="collapse" data-target="#editCollapse" aria-expanded="false" aria-controls="editCollapse">--}}
{{--                        Edit all data--}}
{{--                    </a>--}}
                </div>
                <div class="row clearfix">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-12">
                        <div class="accordion" id="editAccordion">
                            <div>
                                <div id="editCollapse" class="collapse" aria-labelledby="editData" data-parent="#editAccordion">
                                    <div class="card-body">
                                        <form id="basic-form" method="post" action="/admin/updateShopData" novalidate>
                                            @csrf
{{--                                            <div class="form-group">--}}
{{--                                                <label class="project-title text-primary text-center">About My Shop</label>--}}
{{--                                                <textarea type="string" class="form-control" id="about_shop" name="about_shop" rows="5" cols="50">{{$conf->about_desc}}</textarea>--}}
{{--                                            </div>--}}
{{--                                            <div class="row">--}}
{{--                                                <div class="col-lg-6 col-md-6 col-sm-12">--}}
{{--                                                    <div class="form-group">--}}
{{--                                                        <label class="project-title text-primary text-center">Privacy policy</label>--}}
{{--                                                        <textarea type="string" class="form-control" id="privacy_policy" name="privacy_policy" rows="5" cols="50">{{$conf->privacy_policy}}</textarea>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                                <div class="col-lg-6 col-md-6 col-sm-12">--}}
{{--                                                    <div class="form-group">--}}
{{--                                                        <label class="project-title text-primary text-center">Terms and Conditons</label>--}}
{{--                                                        <textarea type="string" class="form-control" id="terms_and_conditions" name="terms_and_conditions" rows="5" cols="50">{{$conf->terms_condition}}</textarea>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Adresse de la société</label>
                                                        <input type="text" id="address" name="address" class="form-control"  value="{{$conf->address}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Email de l'entreprise</label>
                                                        <input type="email" id="email" name="email" class="form-control" value="{{$conf->main_email}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Numéro de téléphone</label>
                                                        <input type="tel" id="tel" name="tel" class="form-control" value="{{$conf->tel}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Lien Facebook</label>
                                                        <input type="text" id="facebook" name="facebook" class="form-control"  value="{{$conf->facebook}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Lien Instagram</label>
                                                        <input type="text" id="insta" name="insta" class="form-control" value="{{$conf->instagram}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Lien Twitter</label>
                                                        <input type="text" id="twitter" name="twitter" class="form-control" value="{{$conf->twitter}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Frais d'expédition</label>
                                                        <input type="number" id="shipping_fee" name="shipping_fee" class="form-control"  value="{{$conf->shipping_fee}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Commande minimum pour la livraison gratuite</label>
                                                        <input type="number" id="min_free" name="min_free" class="form-control" value="{{$conf->min_o_free}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Frais de traitement en ligne</label>
                                                        <input type="number" id="p_fee" name="p_fee" class="form-control" value="{{$conf->processing_fee}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-4 col-sm-6">
                                                    <p class="project-title text-primary"> <b>Type de devise</b> </p>
                                                    <select class="form-control show-tick ms select2" data-placeholder="Select" name="currency" id="currency_form">
                                                        <option></option>
                                                        @foreach($curr as $currency)
                                                            <option {{$conf->currency == $currency ? 'selected': ''}}>{{$currency}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-2 col-md-6 col-sm-12">
                                                    <div class="form-group" style="margin-bottom: 0!important; margin-top: 1.3rem;">
                                                        <br/>
                                                        <label class="fancy-checkbox">
                                                            <input type="checkbox" id="pay_cash" name="pay_cash" data-parsley-errors-container="#error-checkbox" @if($conf->cash_payment) checked @endif>
                                                            <span>Accepter le paiement en espèces</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-12">
                                                    <div class="form-group" style="margin-bottom: 0!important; ">
                                                        <p class="project-title text-primary"> <b>Les options d'expédition</b> </p>
                                                        <label class="fancy-radio custom-color-green"><input name="shipping" value="0" type="radio" @if($conf->shipping_type == 0) checked @endif><span><i></i>Tous les deux</span></label>
                                                        <label class="fancy-radio custom-color-green"><input name="shipping" value="1" type="radio" @if($conf->shipping_type == 1) checked @endif><span><i></i>Livraison uniquement</span></label>
                                                        <label class="fancy-radio custom-color-green"><input name="shipping" value="2" type="radio" @if($conf->shipping_type == 2) checked @endif><span><i></i>Sélectionner seulement</span></label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group accordion" id="editHotline">
                                                        <br/>
                                                        <label class="fancy-checkbox">
                                                            <input type="checkbox" id="hotline" name="hotline" data-parsley-errors-container="#error-checkbox" data-toggle="collapse"
                                                                   data-target="#hotlineNums" aria-expanded="false" aria-controls="hotlineNums" @if($conf->hotline_support) checked @endif>
                                                            <span>Disponibilité de la hotline</span>
                                                        </label>
                                                    </div>
                                                    <div class="accordion" id="editHotline">
                                                        <div>
                                                            <div id="hotlineNums" class="{{$conf->hotline_support == 0 ? 'collapse': 'collapse show'}}" aria-labelledby="hotlineAcc" data-parent="#editHotline">
                                                                <div class="input-group demo-tagsinput-area">
                                                                    <input id="hotline_numbers" name="hotline_numbers" type="tel" class="form-control"
                                                                           data-role="tagsinput" value="{{$conf->hotline_num}}" placeholder="Ajouter un numéro de hotline">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-primary" style="margin: 8px auto 0; width: 100%">Mettre à jour</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

{{--            <div class="row clearfix" >--}}
{{--                <div class="col-lg-6 col-md-12">--}}
{{--                    <div class="card">--}}
{{--                        <div class="header">--}}
{{--                            <h2>Daily Users</h2>--}}
{{--                        </div>--}}
{{--                        <div class="body">--}}
{{--                            <div id="dailyUsers" class="ct-chart"></div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="shippingSectionRow">
                        <div class="card">
                            <div class="card-header" id="shippingSectionHeader" style="background: #fff;">
                                <h5 class="mb-2 mt-2">
                                    <div class="align-items-center">
                                        <ul class="list-unstyled text-center team-info margin-0 pointer-hover" data-toggle="collapse" data-target="#shippingSection" aria-expanded="true" aria-controls="shippingSection" style="background: #fff;">
                                            <li class="text-center dropdown-toggle" >
                                                Gamme de prix d'expédition
                                                {{--                                                <img src="{{asset('plus.svg')}}"--}}
                                                {{--                                                     data-original-title="Edit">--}}
                                            </li>
                                        </ul>
                                    </div>
                                </h5>
                            </div>
                            <div id="shippingSection" class="collapse" aria-labelledby="headingOne" data-parent="#shippingSectionRow">
                                <div class="card-body">
                                    <form novalidate enctype="multipart/form-data">
                                        @csrf
                                        <div class="row" v-if="shippingPrices.length > 0">
                                            <div class="col-4 card" v-for="(sp, i) in shippingPrices">
                                                <div class="row card-body">
                                                    <div class="col-4">
                                                        <label class="project-title text-primary text-center">De</label>
                                                        <input type="number" class="form-control" v-model="sp.from" min="0">
                                                    </div>
                                                    <div class="col-4">
                                                        <label class="project-title text-primary text-center">À</label>
                                                        <input type="number" class="form-control" v-model="sp.to" min="0">
                                                    </div>
                                                    <div class="col-4">
                                                        <label class="project-title text-primary text-center">Prix</label>
                                                        <input type="number" class="form-control" v-model="sp.price" min="0">
                                                    </div>
                                                    <div class="col-12 text-center mt-2">
                                                        <a class="btn btn-danger text-light" @click="removeShippingPrice(i)">Effacer</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center mb-2" v-if="shippingPrices.length > 0">
                                            <a class="btn btn-success text-light" @click="addShippingPrices()" :disabled="savingSPrices">Sauver <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled v-if="savingSPrices"></span></a>
                                        </div>
                                        <div class="mb-2 mt-2 pointer-hover" >
                                            <div class="align-items-center">
                                                <ul class="list-unstyled text-center team-info margin-0" style="background: #fff;">
                                                    <li class="text-center" @click="addPriceRange()">
                                                        Ajouter une gamme de prix
                                                        <img src="{{asset('plus.svg')}}"
                                                             data-original-title="Add Section" />
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="accordion">
                        <div class="card">
                            <div class="card-header" id="headingOne" style="background: #fff;">
                                <h5 class="mb-2 mt-2">
                                    <div class="align-items-center">
                                        <ul class="list-unstyled text-center team-info margin-0 pointer-hover" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="background: #fff;">
                                            <li class="text-center dropdown-toggle" >
                                                À propos de nous
{{--                                                <img src="{{asset('plus.svg')}}"--}}
{{--                                                     data-original-title="Edit">--}}
                                            </li>
                                        </ul>
                                    </div>
                                </h5>
                            </div>
                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                <div class="card-body">
                                    <form novalidate enctype="multipart/form-data">
                                        @csrf
                                        <div v-if="aboutSections.length !== 0" v-for="(sec, i) in aboutSections">
                                            <div class="row">
                                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Section d'en-tête</label>
                                                        <input type="text" class="form-control" v-model="sec.title">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                    <p class="project-title text-primary" style="margin-bottom: 0.5rem;"><b>Section de style</b> </p>
                                                    <select class="form-control show-tick ms select2" data-placeholder="Select" v-model="sec.styling">
                                                        <option>Pas d'image</option>
                                                        <option>Image à gauche</option>
                                                        <option>Image droite</option>
                                                        <option>Image du bas</option>
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Section de paragraphe</label>
                                                        <textarea type="string" class="form-control" v-model="sec.about_desc" rows="50" cols="50"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-12" v-if="sec.styling !== 'No Image'" @click="prepare('about', i)">
                                                    <div class="text-center" data-toggle="tooltip" data-original-title="Category Icon" data-placement="bottom">
                                                        <el-upload
                                                            class="avatar-uploader"
                                                            action=""
                                                            :auto-upload=false
                                                            :show-file-list=false
                                                            :on-change="handlePreview"
                                                            :on-remove="handleRemove">
                                                            <img v-if="sec.image" :src="sec.image" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center mb-2">
                                                <a class="btn btn-danger text-light" @click="removeSec('about', i)">Supprimer la section</a>
                                            </div>
                                        </div>
                                        <div v-if="aboutSections.length === 0">
                                            <h5 class="text-center">Pas encore de sections</h5>
                                        </div>
                                        <div class="text-center mb-2" v-if="aboutSections.length > 0">
                                            <a class="btn btn-success text-light" @click="saveSection('about')" :disabled="savingAbout">Sauver <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled v-if="savingAbout"></span></a>
                                        </div>
                                        <div class="mb-2 mt-2 pointer-hover" >
                                            <div class="align-items-center">
                                                <ul class="list-unstyled text-center team-info margin-0" style="background: #fff;">
                                                    <li class="text-center" @click="createSection('about')">
                                                        Ajouter une section
                                                        <img src="{{asset('plus.svg')}}"
                                                             data-original-title="Add Section" />
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="accordion2">
                        <div class="card">
                            <div class="card-header" id="headingTwo" style="background: #fff;">
                                <h5 class="mb-2 mt-2">
                                    <div class="align-items-center">
                                        <ul class="list-unstyled text-center team-info margin-0 pointer-hover" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" style="background: #fff;">
                                            <li class="text-center dropdown-toggle" >
                                                Conditions et services
                                                {{--                                                <img src="{{asset('plus.svg')}}"--}}
                                                {{--                                                     data-original-title="Edit">--}}
                                            </li>
                                        </ul>
                                    </div>
                                </h5>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion2">
                                <div class="card-body">
                                    <form novalidate enctype="multipart/form-data">
                                        @csrf
                                        <div v-if="termsSections.length !== 0" v-for="(sec, i) in termsSections">
                                            <div class="row">
                                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Section d'en-tête</label>
                                                        <input type="text" class="form-control" v-model="sec.title">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                    <p class="project-title text-primary" style="margin-bottom: 0.5rem;"><b>Section de style</b> </p>
                                                    <select class="form-control show-tick ms select2" data-placeholder="Sélectionner" v-model="sec.styling">
                                                        <option>Pas d'image</option>
                                                        <option>Image à gauche</option>
                                                        <option>Image droite</option>
                                                        <option>Image du bas</option>
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Section de paragraphe</label>
                                                        <textarea type="string" class="form-control" v-model="sec.about_desc" rows="50" cols="50"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-12" v-if="sec.styling !== 'No Image'" @click="prepare('terms', i)">
                                                    <div class="text-center" data-toggle="tooltip" data-original-title="Category Icon" data-placement="bottom">
                                                        <el-upload
                                                            class="avatar-uploader"
                                                            action=""
                                                            :auto-upload=false
                                                            :show-file-list=false
                                                            :on-change="handlePreview"
                                                            :on-remove="handleRemove">
                                                            <img v-if="sec.image" :src="sec.image" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center mb-2">
                                                <a class="btn btn-danger text-light" @click="removeSec('terms', i)">Supprimer la section</a>
                                            </div>
                                        </div>
                                        <div v-if="termsSections.length === 0">
                                            <h5 class="text-center">Pas encore de sections</h5>
                                        </div>
                                        <div class="text-center mb-2" v-if="termsSections.length > 0">
                                            <a class="btn btn-success text-light" @click="saveSection('terms')" :disabled="savingTerms">Sauver <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled v-if="savingTerms"></span></a>
                                        </div>
                                        <div class="mb-2 mt-2 pointer-hover" >
                                            <div class="align-items-center">
                                                <ul class="list-unstyled text-center team-info margin-0" style="background: #fff;">
                                                    <li class="text-center" @click="createSection('terms')">
                                                        Ajouter une section
                                                        <img src="{{asset('plus.svg')}}"
                                                             data-original-title="Add Section" />
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="accordion3">
                        <div class="card">
                            <div class="card-header" id="headingThree" style="background: #fff;">
                                <h5 class="mb-2 mt-2">
                                    <div class="align-items-center">
                                        <ul class="list-unstyled text-center team-info margin-0 pointer-hover"  data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree" style="background: #fff;">
                                            <li class="text-center dropdown-toggle">
                                                Politique de confidentialité
                                                {{--                                                <img src="{{asset('plus.svg')}}"--}}
                                                {{--                                                     data-original-title="Edit">--}}
                                            </li>
                                        </ul>
                                    </div>
                                </h5>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion3">
                                <div class="card-body">
                                    <form novalidate enctype="multipart/form-data">
                                        @csrf
                                        <div v-if="privacySections.length !== 0" v-for="(sec, i) in privacySections">
                                            <div class="row">
                                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Section d'en-tête</label>
                                                        <input type="text" class="form-control" v-model="sec.title">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                    <p class="project-title text-primary" style="margin-bottom: 0.5rem;"><b>Section de style</b> </p>
                                                    <select class="form-control show-tick ms select2" data-placeholder="Select" v-model="sec.styling">
                                                        <option>Pas d'image</option>
                                                        <option>Image à gauche</option>
                                                        <option>Image droite</option>
                                                        <option>Image du bas</option>
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label class="project-title text-primary text-center">Section de paragraphe</label>
                                                        <textarea type="string" class="form-control" v-model="sec.about_desc" rows="50" cols="50"></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-12" v-if="sec.styling !== 'No Image'" @click="prepare('privacy', i)">
                                                    <div class="text-center" data-toggle="tooltip" data-original-title="Category Icon" data-placement="bottom">
                                                        <el-upload
                                                            class="avatar-uploader"
                                                            action=""
                                                            :auto-upload=false
                                                            :show-file-list=false
                                                            :on-change="handlePreview"
                                                            :on-remove="handleRemove">
                                                            <img v-if="sec.image" :src="sec.image" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center mb-2">
                                                <a class="btn btn-danger text-light" @click="removeSec('privacy', i)">Supprimer la section</a>
                                            </div>
                                        </div>
                                        <div v-if="privacySections.length === 0">
                                            <h5 class="text-center">Pas encore de sections</h5>
                                        </div>
                                        <div class="text-center mb-2" v-if="privacySections.length > 0">
                                            <a class="btn btn-success text-light" :disabled="savingPrivacy" @click="saveSection('privacy')">Sauver <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled v-if="savingPrivacy"></span></a>
                                        </div>
                                        <div class="mb-2 mt-2 pointer-hover" >
                                            <div class="align-items-center">
                                                <ul class="list-unstyled text-center team-info margin-0" style="background: #fff;">
                                                    <li class="text-center" @click="createSection('privacy')">
                                                        Ajouter une section
                                                        <img src="{{asset('plus.svg')}}"
                                                             data-original-title="Add Section" />
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // window.onload = function () {
        //     let labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        //     let usersSeries = [[30, 50, 27, 80, 40, 70, 50]];
        //     let salesSeries = [[50, 56, 100, 60, 87, 24, 50]];
        //     let height = '200px';
        //     setLineGraph('dailyUsers', labels, usersSeries, height);
        //     setLineGraph('dailySales', labels, salesSeries, height);
        // }

    </script>
@endsection
@section('footer')
    <style>
        .avatar-uploader .el-upload {
            margin-top: 1.6rem;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        .avatar {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
    <script>

        const Vue_comp = new Vue({
            el:"#main-content",
            data: {
                // sections: [],
                aboutSections: [], termsSections: [], privacySections: [], shippingPrices: [],
                currentInd: null, currentType: null, savingAbout: false, savingTerms: false, savingPrivacy: false,
                savingSPrices: false,
                adminEmail: '{{auth()->user()->email}}', password: '', new_password: '', password_confirmation: '', savingAdmin: false
            },
            created() {
                const self = this;
                console.log('email', this.adminEmail)
                axios.post( '/api/V1/getSections', {}, {
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                    }
                ).then(function(response){
                    self.aboutSections = response.data.values[0];
                    self.termsSections = response.data.values[1];
                    self.privacySections = response.data.values[2];
                    console.log('sections', response);
                }).catch(function(error){});
                axios.post( '/api/V1/getShippingPrices', {}, {
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                    }
                ).then(function(response){
                    self.shippingPrices = response.data.values;
                    console.log('prices', response);
                }).catch(function(error){});
            },
            methods: {
                editAdminInfo() {
                  let self = this;
                  this.savingAdmin = true;
                  let params = {email: this.adminEmail, current_password: this.password, new_password: this.new_password, new_password_confirmation: this.password_confirmation};
                    axios.post( '/admin/editAdminInfo', params, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        console.log('edit', response);
                        if (response.data.status) {
                            self.password = '';
                            self.new_password = '';
                            self.password_confirmation = '';
                            showToast('success', 'Your info has been changed')
                        } else {
                            showToast('warning', response.data.message)
                        }
                        self.savingAdmin = false;
                    }).catch(function(error){self.savingAdmin = false;});
                },
                addPriceRange() {
                    let blank = {price: 0, from: 0, to: 0};
                    this.shippingPrices.push(blank);
                },
                addShippingPrices() {
                    let self = this;
                    // let flag = false;
                    // self.savingSPrices = true;
                    // $.each(self.shippingPrices, function (index, value) {
                    //     if (value.from > value.to) {
                    //         flag = true; return;
                    //     }
                    // });
                    // if (flag) {
                    //     showToast('warning', 'Make sure you provided proper ranges');
                    //     return;
                    // }
                    axios.post( '/admin/addShippingRange', {ranges: self.shippingPrices}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        self.savingSPrices = false;
                        self.shippingPrices = response.data.values;
                        showToast('sucess', 'Price ranges added.');
                        console.log('prices', response);
                    }).catch(function(error){});
                },
                removeShippingPrice(i) {
                  this.shippingPrices.splice(i, 1);
                },
                createSection(type) {
                    let blank = {title: '', about_desc: '', image: '', file: null, styling: 'No Image'};
                    // if (!this.sections[type])
                    //     this.sections[type] = [];
                    // this.sections[type].push(blank);
                    // console.log('here', this.sections['about']);
                    if (type === 'about') {
                        this.aboutSections.push(blank);
                    } else if (type === 'terms') {
                        this.termsSections.push(blank);
                    } else if (type === 'privacy') {
                        this.privacySections.push(blank);
                    }
                },
                prepare(type, ind) {
                  this.currentType = type;
                  this.currentInd = ind;
                },
                handlePreview(file) {
                    let i = this.currentInd;
                    if (this.currentType === 'about') {
                        this.aboutSections[i].image = URL.createObjectURL(file.raw);
                        this.aboutSections[i].file = file;
                    } else if (this.currentType === 'terms') {
                        this.termsSections[i].image = URL.createObjectURL(file.raw);
                        this.termsSections[i].file = file;
                    } else if (this.currentType === 'privacy') {
                        this.privacySections[i].image = URL.createObjectURL(file.raw);
                        this.privacySections[i].file = file;
                    }
                },
                handleRemove(file) {
                    console.log(file);
                },
                removeSec(type, i) {
                    if (type === 'about') {
                        this.aboutSections.splice(i, 1);
                    } else if (type === 'terms') {
                        this.termsSections.splice(i, 1);
                    } else if (type === 'privacy') {
                        this.privacySections.splice(i, 1);
                    }
                },
                saveSection(type) {
                    const self = this;
                    let formData = new FormData();
                    let sec = null;
                    if (type === 'about') {
                        sec = this.aboutSections;
                        self.savingAbout = true;
                    } else if (type === 'terms') {
                        sec = this.termsSections;
                        self.savingTerms = true;
                    } else if (type === 'privacy') {
                        sec = this.privacySections;
                        self.savingPrivacy = true;
                    }
                    let flag = false;
                    $.each(sec, function (index,value){
                        if (value.title === '' || value.paragraph === '') {
                            flag = true;
                        } else if (value.styling !== 'No Image' && value.image === '') {
                            flag = true;
                        } else if (value.styling !== 'No Image') {
                            if(value.file && value.file.raw)
                                formData.append('files['+index+']',value.file.raw);
                            else
                                formData.append('files['+index+']',value.image);
                        }
                    });
                    if (flag) {
                        showToast('warning', 'Please make sure to fill the form first.');
                        return;
                    }
                    formData.append('sec', JSON.stringify(sec));
                    formData.append('type', type);
                    axios.post( '/admin/addSection', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        self.savingAbout = false;
                        self.savingPrivacy = false;
                        self.savingTerms = false;
                        if (response.data.status) {
                            showToast('success', response.data.message);
                        } else {
                            showToast('warning', response.data.message);
                        }
                    }).catch(function(error){});
                }
            }
        });
    </script>
    <style>
        .banner-desc-input {
            margin-top: 12px;
        }
        .banner-desc-input:first-child {
            margin-top: 42px !important;
        }
        textarea{
            height: 200px !important;
        }
        .pointer-hover {
            cursor: pointer !important;
        }
    </style>
@endsection