@extends("layouts.dashboard")

@section("wrapper")
    <div class="page-wrapper">
    @include("layouts.second-header")
<div class="container-fluid p-4">

    <div class="card">
        <div class="card-header bg-rouge d-flex justify-content-sm-start align-items-center" style="margin-top: -50px;">
            <div class="d-flex align-items-center" style="margin-right: 1.5rem !important;">
                <a href="{{ \Illuminate\Support\Facades\URL::previous() }}" class="btn mr-4 text-white">
                    <i class="lni lni-chevron-left"></i>@lang("Retour")
                </a>
                <h4 class="mb-0 text-white"><i class="{{$icon}}"></i>@lang("Nouvelle")   {{ $title ?? "Titre" }}</h4>
            </div>
            <div class="col-4 d-flex justify-content-sm-center align-items-end">
                <div></div>
            </div>

        </div>
    </div>

    @if(session()->has('error'))
        @include("layouts.alert")
    @endif
    <div class="p-4 border rounded bg-white">
        <form class="row" action="{{ route("reservation.store") }}" method="post" enctype="multipart/form-data">
            @csrf
             <fieldset class="border" style="padding-bottom: 10px">
                        <legend class="float-none w-auto p-2">@lang("Information generale")</legend>
                        <div class="row justify-content-start align-content-center">

        <div  class="col-sm-6"  >Dimension: {{$espacepublicitaires->dimensions}} , Dimension en pixels: <span style="color:red; "> {{round($espacepublicitaires->largeur * (300 / 25.4));}} X {{round($espacepublicitaires->longueur * (300 / 25.4));}}</span></div>
		 <div  class="col-sm-6">Tarif TTC: {{$espacepublicitaires->tarif}} F CFA
            <br /><span  class="col-sm-6"> + 3,5% de frais  (Payement en ligne)</span>
         </div>

		 <br><br><br>
          <div class="col-sm-12">
          @if($isannonceur==null)
<div class="col-sm-6">
	<label for="annonceur_id" class="form-label">@lang("annonceur_id")</label>
	<select id="annonceur_id" name="annonceur_id" class="form-control select2" required="">
		<option value=""> ---- @lang("annonceur_id") ----</option>
		@foreach ( $annonceurs as $annonceur)
		<option value="{{$annonceur->id}}">{{$annonceur->nom_prenoms_contact}}</option>
		@endforeach
	</select>
</div>
@endif
@isset($countable)
    {{$countable}}
@endisset

	<input hidden type="text" id="libelle" name="tarif" class="form-control @error("libelle") is-invalid @enderror" required="" value={{$espacepublicitaires->id}}>
		@error("libelle") <div class="invalid-feedback">{{$message}}</div> @enderror
</div>

<div class="col-sm-12 hide">
	<input type="hidden" id="espacepublicitaire_id" name="espacepublicitaire_id" class="form-control @error("espacepublicitaire_id") is-invalid @enderror" required="" value="{{$espacepublicitaires->id}}">
		@error("libelle") <div class="invalid-feedback">{{$message}}</div> @enderror
</div>
         <div class="col-sm-6">
	<label for="libelle" class="form-label">@lang("libelle")</label>
	<input type="text" id="libelle" name="libelle" class="form-control @error("libelle") is-invalid @enderror" required="">
		@error("libelle") <div class="invalid-feedback">{{$message}}</div> @enderror
</div>


<!--div class="col-sm-6">
	<label for="description" class="form-label">@lang("description")</label>
	<input type="text" id="description" name="description" class="form-control @error("description") is-invalid @enderror" required="">
		@error("description") <div class="invalid-feedback">{{$message}}</div> @enderror
</div-->

<div class="col-sm-6">
	<label for="date_parution" class="form-label">@lang("date_parution")</label>
	<select id="date_parution" name="date_parution" class="form-control select2" required="">
		<option value=""> ---- @lang("date_parution") ----</option>
		@foreach ( $magazines as $magazine)
		<option value=" {{$magazine->numero}}">{{$magazine->numero}}</option>
		@endforeach
	</select>
</div>
<!--div class="col-sm-6">
	<label for="date_parution" class="form-label">@lang("date_parution")</label>
	<input type="text" id="date" name="date_parution" class="form-control @error("date_parution") is-invalid @enderror" required="">
		@error("date_parution") <div class="invalid-feedback">{{$message}}</div> @enderror
</div-->

 </div>
                    </fieldset>

                     <fieldset class="border" style="padding-bottom: 10px">
                        <legend class="float-none w-auto p-2">@lang("Image")
                         <p style="color:red">Vérifier que l'image est bien visible pour les dimensions de l'annonce</p>
                        </legend>

                        <div class="row justify-content-start align-content-center">

             <div class="col-sm-12">

                <div class="col-xs-12 col-sm-12 col-md-12">

                    <div class="form-group col-xs-12 col-sm-12 col-md-12">
                        <div class="text-align-center">
                        <div sdtyle=" height:{{$espacepublicitaires->longueur *4}}px; width:{{$espacepublicitaires->largeur *4}}px; background-color:red">
                        <img  style="object-fit: cover; width: {{$espacepublicitaires->largeur *4}}px; height: {{$espacepublicitaires->longueur *4}}px;" xeight="{{$espacepublicitaires->longueur *4}}px" xidth="{{$espacepublicitaires->largeur *4}}px" id="preview-image-before-upload" src="https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png"
                              alt="preview image" style="mhax-height: 200px;">
                        </div>
                        </div>
                        <input id="image" type="file" name="image_id" class="form-control  @error("image_id") is-invalid @enderror" placeholder="image_id" required="">
                        @error("image_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                </div>
                        </div>


        <!--div id="infsup" class="col-md-12  row  ">


</div-->
 </div>
                    </fieldset>


<!--fieldset class="border" style="padding-bottom: 10px">
                        <legend class="float-none w-auto p-2">@lang("Informations Complementaire")</legend>
                        <div class="row justify-content-start align-content-center">
<div id="infcomp" class="col-md-12  row  ">


</div>



                             </div>
                    </fieldset>




 <fieldset class="border" style="padding-bottom: 10px">
                        <legend class="float-none w-auto p-2">@lang("Autres precisions")
                              <button class="btn btn-primary  btn-succ1 " type="button"><i class="glyphicon glyphicon-plus"></i>+</button>
                        </legend>
                        <div class="row justify-content-start align-content-center">
<div hidden class="col-md-12  increment1  ">
    <div class= " row control-group1">
 <div class="  col-sm-5 " >


	<input type="text" id="description" name="infsup1[]" class="form-control @error("description") is-invalid @enderror" >
		@error("description") <div class="invalid-feedback">{{$message}}</div> @enderror
</div>
        <div class="col-sm-5" >


	<input type="text" id="description" name="infsup1[]" class="form-control @error("description") is-invalid @enderror" >
		@error("description") <div class="invalid-feedback">{{$message}}</div> @enderror

        </div>
         <div class="input-group-btn col-sm-2">
            <button class="btn btn-success btn-succ1" type="button"><i class="glyphicon glyphicon-plus"></i>Add</button>
          </div>
</div>

</div>
<div hidden class="col-md-12  clone1 hide control-group1 ">
      <div class= "row control-group1">
 <div class="  col-sm-5 " >


	<input type="text" id="description" name="infsup1[]" class="form-control @error("description") is-invalid @enderror" >
		@error("description") <div class="invalid-feedback">{{$message}}</div> @enderror
</div>
        <div class="col-sm-5" >


	<input type="text" id="description" name="infsup1[]" class="form-control @error("description") is-invalid @enderror" >
		@error("description") <div class="invalid-feedback">{{$message}}</div> @enderror

        </div>
        <div class="input-group-btn col-sm-2">
              <button class="btn btn-danger btn-dan1" type="button"><i class="glyphicon glyphicon-remove"></i> X</button>
            </div>
</div>

</div>
                             </div>
                    </fieldset-->




	<!--div id="infsup" class="col-md-12  row  ">


</div-->



            <div class="col-12 mt-3 pull-right">
                <a href="{{ route("reservation.create") }}" class="btn btn-danger">@lang("Annuler") </a>
                <button class="btn btn-primary" type="submit">@lang("Valider") </button>

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

</div>
</div>

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

           var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $('#rubrique-dropdown').on('change', function () {
                var idRubrique = this.value;
                console.log(idRubrique);
                $("#inf-dropdown").html('');
                $.ajax({
                    url: "{{route('autocomplete.store')}}",
                    type: "post",
                    data: {
                        rubrique_id: idRubrique,
                          _token: CSRF_TOKEN,
                    },
                    dataType: 'json',
                    success: function (result) {
                        console.log(result.sousrubriques);
                       /* $('#inf-dropdown').html('<option value="">-- Select State --</option>');
                        $.each(result.sousrubriques, function (key, value) {
                            $("#inf-dropdown").append('<option value="' + value
                                .id + '">' + value.libelle + '</option>');
                        });*/
                       // $('#infcomp').html("");
                       var myNode = document.getElementById("infcomp");
                 myNode.innerHTML = '';

                        $.each(result.sousrubriques, function (key, value) {
                             $jsonrubrique=JSON.parse(value);
                                 $.each($jsonrubrique, function (key, value) {
                                     console.log(value);
                           /* $("#infcomp").append('<option value="' + value
                                .id + '">' + value.libelle + '</option>');*/
                                $("#infcomp").append(
                                    '<div class="  col-sm-6 ""><input disabled type="text"  value="'+ value.titre +'"   class="form-control @error("description") is-invalid @enderror" required=""></div><div class="  col-sm-6 ""><input type="text"  name="infcomp[]" class="form-control @error("description") is-invalid @enderror" required=""></div>'

                              );
                              result.sousrubriques=[];
                               });
                        });

                    }
                });
            });





        });
    </script>

    <script type='text/javascript'>
function preview_image0(event)
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image0');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
</script>
    <script type='text/javascript'>
function preview_image1(event)
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image1');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
</script>
    <script type='text/javascript'>
function preview_image2(event)
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image2');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
</script>
    <script type='text/javascript'>
function preview_image3(event)
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image3');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
</script>


    <script type="text/javascript">

    $(document).ready(function() {

      $(".btn-succ1").click(function(){
          var html = $(".clone1").html();
          $(".increment1").after(html);
      });

      $("body").on("click",".btn-dan1",function(){
        if(document.getElementsByClassName("btn-dan1").length>1){
          $(this).parents(".control-group1").remove();
             }
      });


    });
    </script>
 <script type="text/javascript">

    $(document).ready(function() {

      $(".btn-succ").click(function(){

       var countimage=document.getElementsByClassName("clone").length;
         if(document.getElementsByClassName("btn-dan").length<4){
            $("#infsup").append(
                                 '<div class="clone hide col-sm-6" ><div class="control-group input-group" style="margin-top:10px"><img id="output_image'+countimage+'"  src="https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png" alt="preview image" style="max-height: 200px;"><input id="image" type="file" name="filename[]" class="form-control col-sm-4" required="" accept="image/*" onchange="preview_image'+countimage+'(event)"><div class="input-group-btn col-sm-2"> <button class="btn btn-danger btn-dan" type="button"><i class="glyphicon glyphicon-remove"></i> X</button></div></div></div>'

                               // '<div class="  col-sm-6 ""><input disabled type="text"     class="form-control @error("description") is-invalid @enderror" required=""></div><div class="  col-sm-6 ""><input type="text"  name="infcomp[]" class="form-control @error("description") is-invalid @enderror" required=""></div>'
                              );
                            //  $("#form").submit();
                             }
      });


      $("body").on("click",".btn-dan",function(){
        console.log("ddd");
      //  if(document.getElementsByClassName("btn-dan").length>1){
          $(this).parents(".clone").remove();
       //      }
      });


    });
    </script>
@endsection