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

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

@section("css_add")
    <style>
        .error{
            color: red;
        }
    </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-12 col-sm-12 col-xs-12">ANNONCES </h5>
                        <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 consulter votre profile pour modifier les informations reliées à votre compte annnonceur">
                                   <i class="fa fa-info-circle"></i>
                               </button>
                               @if($profileAnnonceur)
                               <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 une
                                   annonce
                               </button>
                               @endif
                               <a href="{{route('liste_annonces')}}" class="btn btn-light btn-sm"> <i class="fa fa-newspaper-o"></i> Annuaires des Annonces </a>
                           </div>

                           <div class="row">
                               @if($profileAnnonceur)
                               <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                   <thead>
                                   <tr>
                                       <th>N°</th>
                                       <th title="titre de l'annonce">Titre</th>
                                       <th title="description">Description</th>
                                       <th title="">Secteur d'activité</th>
                                       <th title="">Type</th>
                                       <th title="">Pays</th>
                                       <th title="">Couverture</th>
                                       <th title="">Visibilité</th>
                                       <th>Date limite</th>
                                       <th>Créer</th>
                                       <th>Action</th>
                                   </tr>
                                   </thead>
                                   <tbody>
                                    @php $i=1; @endphp
                                   @foreach($annonces as $annonce)
                                       <tr>
                                           <td>{{$i}}</td>
                                           <td>{{$annonce->title}}</td>
                                           <td>{{substr($annonce->description,0,10)}} ...</td>
                                           <td>{{$annonce->metier->intitule_metier}}</td>
                                           <td>{{$annonce->type}}</td>
                                           <td>{{$annonce->pays->name}}</td>
                                           <td>{{$annonce->couverture}}</td>
                                           <td>
                                               <a href="javascript:void(0)" onclick="visibility(@if($annonce->state==1) 'cloturer' @else 'activer' @endif,'{{route("annonce.visibility",[$annonce->slug])}}')">
                                                   @if($annonce->state==1) <span class="badge" style="background-color: #0d82d3">Visible</span> @else <span class="badge" style="background-color: #4F0800">Cloturée</span> @endif
                                               </a>
                                           </td>
                                           <td>{{$annonce->date_limit?date("d-m-Y",strtotime($annonce->date_limit)):"Non défini"}}</td>
                                           <td>{{date("d-m-Y",strtotime($annonce->created_at))}}</td>
                                           <td>
                                               <div>
                                                   <a title="Modifier" data-slug="{{$annonce->slug}}"  class="modifier_annonce btn btn-xs btn-warning" style="color: #fff;"><i class="fa fa-edit"></i>  </a>
                                                   <a title="Suprimer" href="{{route('annonce.delete_annonce',$annonce->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>
                               @else
                                <div class="alert alert-warning">
                                    <h4>Profile annonceur non configuré</h4>
                                    <p>
                                        Veuillez consulter votre profile pour modifier les informations reliées à votre compte annnonceur
                                       : <a href="{{route("update_view")}}" style="color: #0b2e13">Mettre à jour le profile</a>
                                    </p>
                                </div>
                               @endif

                           </div>

                   </div>
                </div>
            </div>
        </div>
    </div>
    @php
        $metier=new \App\Http\Controllers\metierController();
    @endphp
    <div id="articleModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <form name="annonce_form" method="post" id="annonce_form" enctype="multipart/form-data" action="{{route("annonce.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> une nouvelle
                            annonce </h4>
                    </div>
                    <div class="modal-body">

                         <div>
                            <div class="row">

                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Titre </label><span style="color: red"> (requis)</span><br>
                                    <input type="text" id="title"
                                        name="title" class="form-control"
                                           placeholder="Titre" style="width: 100%;" value="">
                                </div>
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Type </label><span style="color: red"> (requis)</span><br>
                                    <select name="type" id="type" class="form-control choosen">
                                        <option value="achat">Achat</option>
                                        <option value="vente">Vente</option>
                                        <option value="autres">Autres</option>
                                    </select>
                                    <span id="errorreference" class="error"></span>
                                </div>
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Secteur </label><span style="color: red"> (requis)</span><br>
                                    <select name="sector" id="sector" data-input_name="secteur d(activité" onblur="check_error(['metier_slug']);" class="choosen form-control">
                                        {{$metier->liste_output_metier()}}
                                    </select>
                                    <span id="errorreference" class="error"></span>
                                </div>

                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Pays </label><span style="color: red"> (requis)</span><br>
                                    <select  name="country" id="country" data-placeholder="Choisissez le pays" class="form-control pays choosen" @if(Illuminate\Support\Facades\Session::has('country')) data-country="{{Illuminate\Support\Facades\Session::get('country')}}" @endif>
                                        @foreach ($pays as $country)
                                            <option value="{{$country->id}}" @if(Illuminate\Support\Facades\Session::has('country') && Illuminate\Support\Facades\Session::get('country')==$country->name) selected @endif>{{$country->name}}</option>
                                        @endforeach
                                    </select>
                                    <span id="errorreference" class="error"></span>
                                </div>
                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Couverture </label><span style="color: red"> (requis)</span><br>
                                    <select name="couverture" id="couverture" class="form-control choosen">
                                        <option value="pays">Pays</option>
                                        <option value="international">International</option>
                                    </select>
                                    <span id="errorreference" class="error"></span>
                                </div>

                                <div class="form-group col-md-6 col-xs-12">
                                    <label>Date limite </label><span style="color: red"> (requis)</span><br>
                                    <input type="datetime-local" id="date_limit"
                                           data-input_name="date_limit"
                                           name="date_limit" class="form-control"
                                           placeholder="Date limit" style="width: 100%;">
                                    <span id="errorreference" class="error"></span>
                                </div>
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Description </label>
                                    <textarea name="description" id="description"   required="required" style="width: 100%" rows="5" minlength="10" placeholder="Décrivez vos  différents besoins"></textarea>
                                </div>

                            </div>
                             <input type="hidden" name="id" id="id" >
                        </div>
                        <div class="row">
                            <div class="modal-footer">
                                <input type="submit" name="action" id="action_catalogue" class="btn btn-sm"
                                       style="background-color: #0D3349;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>

@endsection

@section('script')

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        function reset(){
            $("#textTitleModel").html("Ajouter");
        }

        function visibility(text,url){
            $.Zebra_Dialog('Etes vous sur de vouloir '+text+' cet annonce ?', {
                'type':     'question',
                'title':    'Mise à jour ',
                'buttons':  [
                    {caption: 'Oui', callback: function() {

                            window.location.href = url;

                        }
                    },{
                        caption: 'Non', callback: function() {
                            $.notify('Mise à jour annuler','error')
                        }
                    }
                ]
            });
        }

        $(document).ready(function(){


            $("form[name='annonce_form']").validate({
                rules: {
                    title: "required",
                },
                messages: {
                    title: "Champ requis",
                },
                submitHandler: function(form) {
                    $('form#annonce_form').submit();
                }
            });

            $(document).on('click', '.modifier_annonce', function () {
                let slug = $(this).attr("data-slug");
                console.log(slug);
                $.ajax({
                    url: "{{route('annonce.get_annonce')}}",
                    method: 'post',
                    data: {slug:slug},
                    success: function(result) {
                        console.log(result.data)
                        $("#textTitleModel").html("Modifier");
                        $("#title").attr("value",result.data.title);
                        $("#description").val(result.data.description);
                        $("#date_limit").val(result.data.date_limit);
                        $("#id").val(result.data.id);
                        document.getElementById('type').value = result.data.type;
                        document.getElementById('sector').value = result.data.sector;
                        document.getElementById('couverture').value = result.data.couverture;
                        document.getElementById('country').value = result.data.country;

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

                    },

                });
            });

        })
    </script>

@endsection