@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>
        /* Modern Points de Vente Page - Sharp Edges Design */
        :root {
            --pv-primary: #6d8f1a;
            --pv-primary-dark: #5a7515;
            --pv-primary-light: #88b121;
            --pv-warning: #f59e0b;
            --pv-danger: #dc2626;
            --pv-info: #3b82f6;
            --pv-success: #10b981;
            --pv-text: #1f2937;
            --pv-text-muted: #6b7280;
            --pv-border: #e5e7eb;
            --pv-bg: #ffffff;
            --pv-bg-gray: #f9fafb;
        }

        @media (min-width: 768px){ .form-horizontal .control-label{ text-align: left; } }
        .btn{ border-radius: 0px; }
        .contact{ border: 1px solid #ddd; border-radius: 50px; }

        .pv-page-header { background: var(--pv-bg); border-bottom: 1px solid var(--pv-border); padding: 24px 20px; margin-bottom: 24px; }
        .pv-page-title { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--pv-text); margin: 0; }
        .pv-btn { padding: 8px 16px; font-weight: 600; font-size: 9pt; border: 1px solid transparent; transition: all 0.3s ease; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: 8px; }
        .pv-btn-primary { background: var(--pv-primary); color: #ffffff; border-color: var(--pv-primary); }
        .pv-btn-primary:hover { background: var(--pv-primary-dark); color: #ffffff; transform: translateY(-2px); }
        .pv-btn-success { background: var(--pv-success); color: #ffffff; border-color: var(--pv-success); }
        .pv-btn-success:hover { background: #059669; color: #ffffff; }
        .pv-btn-secondary { background: var(--pv-bg-gray); color: var(--pv-text); border-color: var(--pv-border); }
        .pv-table-container { background: var(--pv-bg); border: 1px solid var(--pv-border); overflow-x: auto; }
        .pv-table { width: 100%; border-collapse: collapse; }
        .pv-table thead { background: var(--pv-bg-gray); }
        .pv-table thead th { padding: 16px; text-align: left; font-weight: 700; font-size: 9pt; color: var(--pv-text); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--pv-border); white-space: nowrap; }
        .pv-table tbody td { padding: 12px 16px; text-align: left; font-size: 9pt; color: var(--pv-text); border-bottom: 1px solid var(--pv-border); }
        .pv-table tbody tr { transition: background 0.2s ease; }
        .pv-table tbody tr:hover { background: var(--pv-bg-gray); }
        .pv-action-dropdown { position: relative; display: inline-block; }
        .pv-action-btn { padding: 6px 12px; background: var(--pv-bg-gray); color: var(--pv-text); border: 1px solid var(--pv-border); font-size: 9pt; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s ease; white-space: nowrap; }
        .pv-action-btn:hover { background: var(--pv-primary); border-color: var(--pv-primary); color: #ffffff; }
        .pv-action-menu { position: absolute; top: 100%; right: 0; background: var(--pv-bg); border: 1px solid var(--pv-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 160px; z-index: 1000; display: none; margin-top: 4px; }
        .pv-action-dropdown:hover .pv-action-menu { display: block; }
        .pv-action-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 9pt; color: var(--pv-text); text-decoration: none; transition: background 0.2s ease; border-bottom: 1px solid var(--pv-border); white-space: nowrap; }
        .pv-action-menu-item:last-child { border-bottom: none; }
        .pv-action-menu-item:hover { background: var(--pv-bg-gray); }
        .pv-action-menu-item.view:hover { background: rgba(59, 130, 246, 0.1); color: var(--pv-info); }
        .pv-action-menu-item.edit:hover { background: rgba(245, 158, 11, 0.1); color: var(--pv-warning); }
        .pv-action-menu-item.delete:hover { background: rgba(220, 38, 38, 0.1); color: var(--pv-danger); }
    </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">
                    <div class="pv-page-header">
                        <div class="row">
                            <div class="col-md-8 col-sm-12 col-xs-12">
                                <h1 class="pv-page-title">
                                    <i class="fa fa-map-marker-alt"></i>
                                    <span>Points de Vente - {{\App\Boutique::formatName($boutique->nom_boutique)}}</span>
                                </h1>
                            </div>
                            <div class="col-md-4 col-xs-12 text-right pt-2">
                                <a class="pv-btn pv-btn-success" href="{{route('boutique.index',$boutique->nom_boutique)}}" target="_blank">
                                    <i class="fas fa-store"></i>
                                    <span>Accéder à {{\App\Boutique::formatName($boutique->nom_boutique)}}</span>
                                </a>
                            </div>
                        </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: 20px;">
                            <button type="button" class="pv-btn pv-btn-secondary"
                                    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="pv-btn pv-btn-primary">
                                <i class="fa fa-plus-circle"></i>
                                <span>Ajouter un point de vente</span>
                            </button>
                        </div>

                        <div class="pv-table-container">
                            <table id="articledatatable-buttons" class="pv-table">
                                <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>Nom du point de vente</th>
                                    <th>Coordonnée géographique</th>
                                    <th>Adresse de localisation</th>
                                    <th>Créé le</th>
                                    <th style="text-align: right;">Actions</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 style="text-align: right;">
                                            <div class="pv-action-dropdown">
                                                <button class="pv-action-btn">
                                                    <span>Actions</span>
                                                    <i class="fa fa-chevron-down"></i>
                                                </button>
                                                <div class="pv-action-menu">
                                                    <a data-name="{{$pointVente->nom}}" data-presentation="{{$pointVente->horaire}}" class="pv-action-menu-item view details">
                                                        <i class="fa fa-eye"></i>
                                                        <span>Détails</span>
                                                    </a>
                                                    <a data-slug="{{$pointVente->slug}}" class="pv-action-menu-item edit modifier_annonce">
                                                        <i class="fa fa-edit"></i>
                                                        <span>Modifier</span>
                                                    </a>
                                                    <a href="{{route('pointvente.delete_pointvente',$pointVente->slug)}}" class="pv-action-menu-item delete delete-action">
                                                        <i class="fa fa-trash"></i>
                                                        <span>Supprimer</span>
                                                    </a>
                                                </div>
                                            </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