@extends("../dashboard._blank")

@section("sidebar")
    @include("../dashboard._sidebar")
@endsection

@section("content")
    <style>
figure{
    display: inline-block;
}
        .activation{
            display: block;
        }
        #description_include_livraison{
            display: none;
        }
        #button{
            display:block;
            margin:20px auto;
            padding:10px 30px;
            background-color:#eee;
            border:solid #ccc 1px;
            cursor: pointer;
        }
        .is-hide{
            display:none;
        }
        input[type="checkbox"][id^="myCheckbox"] {
            display: none;
        }
        label {
            border: 1px solid #fff;
            padding-top: 10px;
            display: block;
            position: relative;
            margin-top: 10px;
        }
        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);
            border: 1px solid #060e1c;
        }
        .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;
            border: 1px solid #060e1c;
        }
        .list-media a{
            font-size: 12pt;
            color: #fff;
            margin-bottom: 2px;
        }
        .list-media {
            margin-bottom: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .list-media:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 500ms ease;
        }
        .boutique_liste:hover #media-share{
            display: block;
        }
        #media-share{
            z-index: 99;
            display: none;
        }
        .whatsapp{
            width: 30px;
            height: 30px;
            line-height: 32px;
            text-align: center;
            background: green;
            border-radius: 100%;
            font-weight: bold;
        }

        .facebook{
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #0e0ea0;
            border-radius: 100%;
            font-weight: bold;
        }
        .instagram{
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #48aed6;
            border-radius: 100%;
            font-weight: bold;
        }
        ul{
            list-style-type: disc;
        }
        ul li{

        }
        ul ul{
            list-style-type: circle;
        }

        ul ul ul{
            list-style-type: decimal-leading-zero;
        }
        h5{
            color: green;
        }
        .btn-primary{
            border: none;
        }
        .btn{
            border-radius: 0px;
        }
        .supression_demande sup{
            border-radius: 100%;
            font-size: 8pt;
            color: red;
        }
        /* The container */
        .container-checkbox {
            display: block;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .container-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Create a custom checkbox */
        .container-checkbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 15px;
            width: 15px;
            background-color: #2a3f54;
        }

        /* On mouse-over, add a grey background color */
        .container-checkbox:hover input ~ .checkmark {
            background-color: #2a3f54;
        }

        /* When the checkbox is checked, add a blue background */
        .container-checkbox input:checked ~ .checkmark {
            background-color: #2a3f54;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .container-checkbox .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .container-checkbox input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .container-checkbox .checkmark:after {
            left: 5px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }


        /* The container */
        .container-radio {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default radio button */
        .container-radio input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Create a custom radio button */
        .container-radio .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 15px;
            width: 15px;
            background-color: #2a3f54;
            border-radius: 50%;
        }

        /* On mouse-over, add a grey background color */
        .container-radio:hover input ~ .checkmark {
            background-color: #2a3f54;
        }

        /* When the radio button is checked, add a blue background */
        .container-radio input:checked ~ .checkmark {
            background-color: #2a3f54;
        }

        /* Create the indicator (the dot/circle - hidden when not checked) */
        .container-radio .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the indicator (dot/circle) when checked */
        .container-radio input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the indicator (dot/circle) */
        .container-radio .checkmark:after {
            top: 4px;
            left: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
        }
        .myOptionBtn .row{
            margin: 0;
        }
        .myOptionBtn .btn{
            width: 100%;
            margin: 1px;
        }
        .myOptionBtn .col-xs-4{
            padding: 2px;
        }
        .btn-sm{
            font-size:8pt;
        }
        .nav-pills>li.active>#pills-home-tab, .nav-pills>li.active>#pills-home-tab:focus, .nav-pills>li.active>#pills-home-tab:hover{
            background: none;
            border-bottom: 6px solid #ba9412;
            /*background:  #ba9412;*/
            color: #ba9412;
            border-radius: 0;
        }
        .nav-pills>li.active>#pills-contact-tab, .nav-pills>li.active>#pills-contact-tab:focus, .nav-pills>li.active>#pills-contact-tab:hover{
            background: none;
            border-bottom: 6px solid #176e2c;
            /*background:  #176e2c;*/
            color: #176e2c;
            border-radius: 0;
        }
        .nav-pills>li.active>#pills-profile-tab, .nav-pills>li.active>#pills-profile-tab:focus, .nav-pills>li.active>#pills-profile-tab:hover{
            background: none;
            border-bottom: 6px solid #d21d19;
            /*background:  #d21d19;*/
            color: #d21d19;
            border-radius: 0;
        }
        .nav-item a{
            font-size: 12pt;
            font-weight: 500;
        }
        #pills-tab{
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex-flow: row;
            width: 100%;
        }
        #pills-tab>li {
            width: 33.33%;
            text-align: center;
        }
        @media (max-width: 991px){
            .nav-item a{
                font-size: 5pt;
                font-weight: 500;
            }
            .number_badge{
                font-size: 5pt;
            }
        }
        .number_badge{
            position: absolute;
            right: 3px;
            top: 5px;
            border-radius: 50px;
        }
        #internationalisation_label{
            display: none;
        }

.btn-action-suv{
            display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    text-align: center;
    transition-duration: 500ms;
    top: 0;
    left: 0;
        }
 .image-view-dis:hover > .btn-action-suv{
display: inline-block;

}

.btn-action-suv .btn{
    margin-top: 75px
}
    </style>
    <div class="right_col" role="main">

        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel text-uppercase">
{{--                    <div class="x_title" style="padding-left: 20px;">--}}
{{--                        <h5 class="col-md-12 col-sm-12 col-xs-12">FREE PIK COC</h5>--}}
{{--                        <div class="clearfix"></div>--}}
{{--                    </div>--}}
                    <div class="x_content mt-0 pt-0">
                        <br/>
                        <div class="row">
                        <div class="col-sm-12 col-xs-12 col-lg-12">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist" style="">
                                <li class="nav-item active" style="border:1px solid #fff;background: #ededed;">
                                    <a class="nav-link active" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
                                        Catalogues <sup class="badge badge-default number_badge" style="background-color:#176e2c;color:#ffffff;">  </sup>
                                    </a>
                                </li>
                                <li class="nav-item" style="border:1px solid #fff;background: #ededed;">
                                    <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">
                                        Mes commandes <sup class="badge badge-default number_badge" style="background-color:#ba9412;color:#ffffff;">   </sup>
                                    </a>
                                </li>
                                <li class="nav-item" style="border:1px solid #fff;background: #ededed;">
                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">
                                       Mes images  <sup class="badge badge-default number_badge" style="background-color:#d21d19;color:#fff;"> </sup>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent" style="margin-top: 5px;">
                                <div class="col-sm-12 col-xs-12 col-lg-12 text-left tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">


                                </div>
                                <div class="col-sm-12 col-xs-12 col-lg-12 text-center tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                                    <div class="row">
                                        <div class="col-lg-3 ">
                                            <div class="col-lg-12 text-center image-view-dis"  style="background: #f8f8f8;padding: 20px;">
                                                <figure>
                                                    <img src="{{asset('images/background.jpg')}}" alt="Image of a laptop" height="150px">
                                                </figure>
                                                <div class="btn-action-suv">
                                                    <button class="btn btn-light-btn-xs"><i class="fa fa-eye"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-xs-12 col-lg-12 text-center tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" style="padding: 10%;font-weight: bold;font-size: 15pt;">
                                </div>
                                </div>
                        </div>
                        </div>
                        <div class="ln_solid"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="pubModal" class="modal fade" style="background: rgba(0,0,0,0.5);">
        <div class="modal-dialog modal-dialog-centered" style="border-radius: 20px">
            <input type="hidden" value="" name="slug" id="boutique-slug">
            <div class="modal-content" style="border-radius: 20px;">
                <div class="modal-body">
                    <h2 class="col-12 text-center mt-4" style="font-weight: bold">
                        HELLO, BIENVENUE
                    </h2>
                    <div class="col-lg-12">
                    <div class="row">
                    <div class="col-lg-6 text-center image-view-dis"  style="background: #f8f8f8;padding: 20px;">
                        <figure>
                            <img src="{{asset('images/background.jpg')}}" alt="Image of a laptop" height="150px">
                        </figure>
                    </div>
                        <div class="col-6">
                            <h2>Nom de l'image</h2>
                            <span class="badge badge-info">secteur activité</span>
                            <h4>Prix</h4>
                            <div>
                                <button class="btn btn-primary btn-sm">Acheter maintenant</button>
                            </div>

                            <p>
                                En cliquant sur acheter vous accepter
                            </p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
@include('./dashboard.Stocks-images.script')
    <script type="text/javascript">
        $(document).ready(function(){



            $(document).on('click','#suivant1',function(){
                if(check_error(['prenom','nom','nationnalite'])){
                    $('#etape1').slideUp(1000,function(){
                        $('#etape2').slideDown(1000);
                    })
                }
            });

            $(document).on('click','#suivant2',function(){
                $('#etape2').slideUp(1000,function(){
                    $('#etape3').slideDown(1000);
                })
            });

            $(document).on('click','#retour2',function(){
                $('#etape2').slideUp(1000,function(){
                    $('#etape1').slideDown(1000);
                })
            });

            $(document).on('click','#suivant3',function(){
                $('#etape3').slideUp(1000,function(){
                    $('#etape4').slideDown(1000);
                })
            });

            $(document).on('click','#retour3',function(){
                $('#etape3').slideUp(1000,function(){
                    $('#etape2').slideDown(1000);
                })
            });

            $(document).on('click','#suivant4',function(){
                $('#etape4').slideUp(1000,function(){
                    $('#etape5').slideDown(1000);
                })
            });

            $(document).on('click','#retour4',function(){
                $('#etape4').slideUp(1000,function(){
                    $('#etape3').slideDown(1000);
                })
            });



            $(document).on('click','#retour5',function(){
                $('#etape5').slideUp(1000,function(){
                    $('#etape4').slideDown(1000);
                })
            });

            $(document).on('click', '#valider', function () {
                let form=$('#post_marketer_data'),
                    url=form.attr('action'),
                    $form = new FormData(form[0]),
                    btn=$(this);
                btn.attr('disabled',true).html('<img src="{{asset('images/loader.gif')}}" width="20px"> veuillez patienter ...');
                $.ajax({
                    url:url,
                    method:"POST",
                    data:$form,
                    dataType:'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success:function(data) {
                        console.log(data)
                        btn.attr('disabled',false).html('Valider');
                        if(data.error){
                            $.notify(data.message,'error')
                            Swal.fire({
                                title: 'Echec mise à jour du profil',
                                text: data.message,
                                type: 'error',
                                showCancelButton: true,
                                confirmButtonColor: '#88b121',
                                cancelButtonColor: '#d33',
                                cancelButtonText: 'Réactualiser',
                                confirmButtonText: 'Reéssayer'
                            }).then((result) => {
                                if (!result.value) {
                                    location.reload();
                                }
                            })
                        }else{
                            Swal.fire({
                                title: 'PROFIL SUNMARKETER',
                                text: data.message,
                                type: 'success',
                                showCancelButton: false,
                                confirmButtonColor: '#88b121',
                            }).then((result) => {
                                if (result.value) {
                                    location.reload();
                                }
                            })

                        }
                    },error:function (data) {
                        console.log(data)
                        btn.attr('disabled',false).html('Valider');
                        $.notify('Une erreur s\'est est survenue au cours du processus. Veuillez réactualiser la page et reéssayer si elle persiste.','error')
                    }
                })
            });

        })
    </script>

@endsection