@extends('theme.template')

@section('css')

@endsection


@section('contenu')

<div class="form-head mb-4">
    <h2 class="text-black font-w600 mb-0">Annonce</h2>
</div>

<div class="page-titles">
    <ol class="breadcrumb">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle-filled" width="50" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor" /></svg>
        <li class="breadcrumb-item"><a href="javascript:void(0)">Cette section est réservée a la modification d'une annonce</a></li>
    </ol>
</div>



@include('theme.alert')



<div class="col-xl-12 col-lg-12">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title text-primary"> <i class="flaticon-381-add-2"></i> modifier une annonce</h4>
        </div>
        <div class="card-body">
            <div class="basic-form">
                <form id="annonceForm" action="{{route("annonce.update",['id'=>$publication->id])}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Date debut de l'annonce<span style="color: red">*</span> </label>
                            <input type="date" class="form-control" id="date_debut" name="date_debut" value="{{\Carbon\carbon::parse($publication->date_debut)->format('Y-m-d') }}" disabled>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Date de fin de l'annonce <span style="color: red"> *</span> </label>
                            <input type="date" class="form-control"  id="date_fin" name="date_fin" value="{{\Carbon\carbon::parse($publication->date_fin)->format('Y-m-d') }}" disabled>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Titre de l'annonce <span style="color: red"> *</span> </label>
                            <input type="text" class="form-control" placeholder="Titre de l'annonce" id="titre" name="titre" value="{{ $publication->title_document}}">
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Categorie de l'annonce <span style="color: red"> *</span> </label>
                            <select class="select2 size-1 form-control wide mb-3"  id="categorie" name="category_id">
                                <option value=""  >Choisir une categorie {{$publication->category_id }}</option>
                                    @foreach ($categories as $category)
                                     <option value="{{ $category->id}}" {{ $publication->category_id ===$category->id ?'selected':'' }}>{{ $category->category_label}}</option>
                                    @endforeach
                            </select>
                        </div>

                        <div class="mb-3 col-md-6">
                            <label class="form-label">Ajouter le document de l'annonce </label>
                            <input class="form-control" type="file" id="formFile" accept=".pdf" name="pdf_file">
                        <span class="text-warning" > Si vous ne voulez pas modifier le document de l'annonce , laisser vide .</span>
                        </div>


                        <div class="mb-3 col-md-6">
                            <label class="form-label">Nombre de page du document</label>
                            <input type="text" class="form-control" disabled id="nombre_page" name="nombre_page" value="{{$publication->nombre_de_page}}">
                        </div>

                        <div class="mb-3 col-md-6">
                            <label class="form-label">Ville de l'Annonce <span style="color: red"> *</span></label>
                            <select  class="select2 form-control wide" multiple id="idVille" name="ville_id[]"  disabled>
                                {{-- <option value="" selected disabled>Choisire la ville...</option> --}}
                                @if ($publication->villes->count()>0)
                                    @foreach ($publication->villes as $pv)
                                        @foreach ($villes as $ville)
                                        <option value="{{$ville->id}}" {{ $pv->id ===$ville->id?'selected':"" }}>{{$ville->ville_name}}</option>
                                        @endforeach
                                    @endforeach
                                @else
                                    @foreach ($villes as $ville)
                                    <option value="{{$ville->id}}">{{$ville->ville_name}}</option>
                                    @endforeach
                                @endif

                            </select>
                        </div>

                        <div class="mb-3 col-md-6">
                            <label class="form-label">Nombre d'utilisateurs</label>
                            <input type="text" class="form-control" id="nombre_client" disabled name="nombre_user" value="{{$publication->nombre_de_user}}">
                        </div>




                        <div class="mb-3 col-md-6">
                            <label class="form-label">Prix total à Payer HT (EURO) </label>
                            <input type="text" class="form-control" disabled id="prixHT" name="prixHT" value="{{$publication->getPrixHT()}}"  >
                        </div>


                        <div class="mb-3 col-md-6">
                            <label class="form-label">Prix total à Payer TTC (EURO)</label>
                            <input type="text" class="form-control" disabled value="{{$publication->getPrixHTT()}}" id="prixTTC" name="prixTTC">
                        </div>

                        <div class="mb-3 col-md-12">
                            <label class="form-label">Ajouter une image banière de l'annonce </label>
                            <input class="form-control" type="file" id="formFileimage" accept=".jpg, .jpeg, .png" name="image_file">
                        </div>
                        <span class="text-warning" > Si vous ne voulez pas modifier l'image banière de l'annonce , laisser vide .</span>


                        <div class="mb-3 col-md-12">
                          <img src="{{ !empty($publication->picture_file)? $publication->picture_file :'https://placehold.co/600x400' }}" width="150" height="500"  class="img-thumbnail" alt=""  id="imgPreview">
                        </div>
                    </div>



                    <button type="button"  class="btn btn-primary" id="submit-annonce"> <i class="flaticon-381-add-2"></i> Diffusser l'annonce</button>
                </form>
            </div>
        </div>
    </div>
</div>

@include('v_1.annonce.modal_create')



<!-- Large modal -->



@endsection

@section('js')

//Sweelt alert
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.2.0/luxon.min.js" integrity="sha512-PfFrIEubsypd3vt/oczIh4r7FCpU7qbELQ9L+JRCzc3B2xHp43H6ZtjJCpEaPIDo/52Mettp/5RZicGPz6ObZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

<script src="{{asset('v_1/js/annonce_update.js')}}"></script>

<script>

    //Recuperer tous les utilisateurs d'une ville
     var url = "{{ route('get.user.ville') }}"


     $(document).ready(function() {
            var fileUplod = document.getElementById("formFileimage")
            fileUplod.addEventListener("change", function() {
                previewImage(this)
            })
        })

     function previewImage(image) {
        var style = {
            "border-radius": "10px",
            // width: "50%",
            // height: "50%",
            padding: "0",
        };
        var reader
        var previewfile = document.getElementById("r-imgPreview");
        var previewfileResume = document.getElementById("imgPreview");
        if (image.files && image.files[0]) {
            reader = new FileReader();

            reader.onload = function (e) {
                previewfile.setAttribute("src", e.target.result);
                $("#imgPreview").css(style);

                previewfileResume.setAttribute("src", e.target.result);
                $("#r-imgPreview").css(style);
            };
            reader.readAsDataURL(image.files[0]);
        }
    }
</script>

    <script>
        $(document).ready(function(){
            let imageUrl = "{!! $publication->picture_file !!}"
            if(imageUrl){
                $("#r-imgPreview").attr("src", imageUrl)
            }
        })
    </script>



@endsection