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

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

@section("css_add")
    <style>
        .error{
            color: red;
        }

        .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .inputfile + label {
            font-size: 1em;
            display: inline-block;
        }

        .inputfile:focus + label,
        .inputfile + label:hover {
        }

        .inputfile + label {
            cursor: pointer; /* "hand" cursor */
        }

        .inputfile:focus + label {
            outline: 1px dotted #000;
            outline: -webkit-focus-ring-color auto 5px;
        }

        #upload:hover {
            color: #D40025;
            border: #D40025 2px solid;
        }

        #selectedFiles img {
            max-width: 125px;
            max-height: 125px;
            float: left;
            margin-bottom: 10px;
        }

        #upload2 {
        }

        #upload2:hover {
            color: #D40025;
            border: #D40025 2px solid;
        }

        #selectedFiles2 img {
            max-width: 125px;
            max-height: 125px;
            float: left;
            margin-bottom: 10px;
        }

        .error {
            color: red;
        }

        .btn {
            border-radius: 0px;
        }

    </style>
@endsection

@section("content")

    <style>
        @media (min-width: 768px){
            .form-horizontal .control-label{
                text-align: left;
            }
        }
        .btn{
            border-radius: 0px;
        }
        .contact{
            border: 1px solid #ddd;
            border-radius: 50px;
        }
    </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-8 col-sm-12 col-xs-12">Les points de vente de la boutique {{\App\Boutique::formatName($boutique->nom_boutique)}} </h5>
                        <div class="col-md-4 col-xs-12 text-right pt-2">
                            <a class="btn btn-success btn-sm" style="border-radius: 0px" href="{{route('boutique.index',$boutique->nom_boutique)}}" target="_blank"><i class="fas fa-store"></i>  Accéder à {{\App\Boutique::formatName($boutique->nom_boutique)}}</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if(session("success"))

                            <div class="alert alert-success">
                                {{session('success')}}
                            </div>

                        @elseif(session("error"))
                            <div class="alert alert-danger">
                                {{session('error')}}
                            </div>
                        @endif

                        <div class="row" style="margin-bottom: 10px;">
                            <button type="button" class="btn btn-secondary btn-sm"
                                    data-toggle="tooltip" data-placement="top"
                                    title="Veuillez ajouter vos points de vente afin de faciliter accès aux produits à vos clients">
                                <i class="fa fa-info-circle"></i>
                            </button>
                                <button onclick="reset()" id="add_article" data-toggle="modal" data-target="#articleModal"
                                        class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> Ajouter un
                                    point de vente
                                </button>
                        </div>

                        <div class="row">
                                <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                    <thead>
                                    <tr>
                                        <th>N°</th>
                                        <th title="titre de l'annonce">Nom du point d vente</th>
                                        <th title="description">coordonnée geographique (L-l)</th>
                                        <th title="description">Adresse de localisation</th>
                                        <th>Créer</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @php $i=1; @endphp
                                    @foreach($pointVentes as $pointVente)
                                        <tr>
                                            <td>{{$i}}</td>
                                           <td>{{$pointVente->nom}}</td>
                                            <td>{{$pointVente->latitude}},{{$pointVente->longitude}}</td>
                                            <td>{{$pointVente->adresse}}</td>
                                            <td>{{date("d-m-Y",strtotime($pointVente->created_at))}}</td>
                                            <td>
                                                <div>
                                                    <a title="details" data-name="{{$pointVente->nom}}" data-presentation="{{$pointVente->horaire}}"  class="details btn btn-xs btn-light">détails  </a>
                                                    <a title="Modifier" data-slug="{{$pointVente->slug}}"  class="modifier_annonce btn btn-xs btn-warning" style="color: #fff;"><i class="fa fa-edit"></i>  </a>
                                                    <a title="Suprimer" href="{{route('pointvente.delete_pointvente',$pointVente->slug)}}" class="delete-action btn btn-xs btn-danger"  style="color: #fff;"><i class="fa fa-trash"></i> </a>
                                                </div>
                                            </td>
                                        </tr>
                                        @php $i++; @endphp
                                    @endforeach

                                    </tbody>
                                </table>
                        </div>

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

    <div id="articleModal" class="modal fade">
        <div class="modal-dialog modal-md">
            <form name="pointVenteForm" method="post" id="pointVenteForm" enctype="multipart/form-data" action="{{route("pointvente.add_up")}}">
                @csrf

                <div class="modal-content" style="border-radius: 0px;">
                    <div class="modal-header">
                        <h4 class="modal-title" ><i class="fa fa-plus"></i>
                            <span id="textTitleModel">Ajouter</span> un nouveau
                            point de vente </h4>
                    </div>
                    <div class="modal-body">

                        <div>
                            <div class="row">
                                <div class="form-group col-md-12 col-xs-12">
                                    <label>Nom du point de vente </label><span style="color: red"> (requis)</span><br>
                                    <input type="text" id="nom"
                                           name="nom" class="form-control"
                                           placeholder="" style="width: 100%;" value="">
                                </div>
                                 <div class="form-group col-md-12 col-xs-12">
                                    <label>Adresse de localisation</label><span style="color: red"> (requis)</span><br>
                                    <input type="text" id="adresse"
                                           name="adresse" class="form-control"
                                           placeholder="" style="width: 100%;" value="">
                                </div>
                                <div class="form-group col-md-12">
                                    <h6>Coordonnée géographique</h6>
                                    Les corrdonnées géographique du point de vente permetrons au client de suivre un ittinéraire grâce au map.
                                    <br>Laissez vide si vous n'avez pas ces données.
                                </div>
                                 <div class="form-group col-md-6 col-xs-12">
                                    <label>Longitude </label><span style="color: red"> </span><br>
                                    <input type="text" id="longitude"
                                           name="longitude" class="form-control"
                                           placeholder="" style="width: 100%;" value="">
                                </div>
                                 <div class="form-group col-md-6 col-xs-12">
                                    <label>Latitude </label><span style="color: red"> </span><br>
                                    <input type="text" id="latitude"
                                           name="latitude" class="form-control"
                                           placeholder="" style="width: 100%;" value="">
                                </div>

                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Présentation et horaires de travail </label>
                                    <textarea name="horaire" id="horaire"   required="required" style="width: 100%" rows="5" minlength="100" placeholder="Vous pouvez renseigner les détails de ce point de vente afin d'orienter vos clients"></textarea>
                                </div>

                            </div>
                            <input type="hidden" name="id" id="id" >
                            <input type="hidden" name="boutique_slug" id="boutique_slug"  value="{{$boutique->slug}}">
                        </div>
                        <div class="row">
                            <div class="modal-footer">
                                <input type="submit" name="action" id="action_catalogue" class="btn btn-sm btn-primary"
                                       style="border-radius: 0px;color: white;"
                                       value="Enregistrer"/>

                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

  <div id="detailsModal" class="modal fade">
        <div class="modal-dialog modal-md">
                <div class="modal-content" style="border-radius: 0px;">
                    <div class="modal-header">
                        <h4 class="modal-title" ><i class="fa fa-plus"></i>
                            Présentation et horraire   <span id="textDetailsTitleModel"> </span>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div>
                            <div class="row">
                               <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                 <p id="details_presentation"></p>
                                </div>

                            </div>
                            </div>
                        <div class="row">
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light btn-sm close_details" >Fermer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.tiny.cloud/1/imnai4k01hp1s5jemj6974k5x25h7ncbmq8osv1jnlq0i4rs/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://cdn.tiny.cloud/1/imnai4k01hp1s5jemj6974k5x25h7ncbmq8osv1jnlq0i4rs/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>


    <script type="text/javascript">

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('textarea#horaire').tinymce({
            height: 200,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        });
        function reset(){
            $("#textTitleModel").html("Ajouter");
            $("#nom").attr("value","");
            $("#id").attr("value","");
            $("#adresse").attr("value","");
            $("#longitude").attr("value","");
            $("#latitude").attr("value","");
            $('form#pointVenteForm')[0].reset();
        }

        $(document).ready(function(){
            $(document).on('click','.details',function(){
               let presentation= $(this).data('presentation');
               let name= $(this).data('name');
               $('#textDetailsTitleModel').html(name);
               $('#details_presentation').html(presentation);
                $('#detailsModal').modal('show');
            })

          $(document).on('click','.close_details',function(){
               $('#details_presentation').html("");
              $('#textDetailsTitleModel').html("");
              $('#detailsModal').modal('hide');
            })

            $("form[name='pointVenteForm']").validate({
                rules: {
                    nom: "required",
                    adresse: "required",
                    latitude: {
                        required: false,
                        strongCoord: false
                    },
                    longitude: {
                        required: false,
                        strongCoord: false
                    }
                },
                messages: {
                    nom: "Champ requis",
                    adresse: "Champ requis",
                },
                submitHandler: function(form) {
                    $('#action_catalogue').val('patientez ...');
                    $('#action_catalogue').attr('disabled',true);
                    $('form#pointVenteForm').submit();
                }
            });
            $.validator.addMethod('strongCoord', function(value, element) {
                return this.optional(element) ||
                    value.length >= 4 && /^(?=.)-?((8[0-5]?)|([0-7]?[0-9]))?(?:\.[0-9]{1,20})?$/.test(value);
            }, 'les données saisis sont incorrectes')

            $(document).on('click', '.modifier_annonce', function () {
                let slug = $(this).attr("data-slug");
                console.log(slug);
                $.ajax({
                    url: "{{route('pointvente.get_pointvente')}}",
                    method: 'post',
                    data: {slug:slug},
                    success: function(result) {
                        console.log(result.data)
                        $("#textTitleModel").html("Modifier");
                        $("#nom").attr("value",result.data.nom);
                        $("#adresse").attr("value",result.data.adresse);
                        $("#horaire").val(result.data.horaire);
                        $("#longitude").val(result.data.longitude);
                        $("#latitude").val(result.data.latitude);
                        $("#id").val(result.data.id);

                        $('#articleModal').modal('show');
                    },
                    error: function(result) {

                    },

                });
            });

        })
    </script>

@endsection