@extends('layout.layout')

@section('content')
<div id="report" class="pageForm">
    <div class="container-fluid mt-3">
      <div class="row justify-content-start align-items-center g-5 mb-0">
        <div class="col-6 d-flex">
          <button type="button" class="pageNav active">Modifier une formula</button>

        </div>
        @if(Session::has('message'))
          <div class="col-12">
            <div class="alert alert-success">
              {{Session::get('message')}}
            </div>
          </div>
        @endif
      </div>
      <div class="row">
        <div class="col-md-12 mt-5" >
          <form action="{{route('edit-formula',$formula->id)}}" method="post">
              @csrf
              <div class="mb-3">
                  <label class="form-label">Titre</label>
                  <input type="text" class="form-control" name="controle_name" value="{{$formula->controle_name}}">
              </div>
              <div class="mb-3">
                  <label class="form-label">Controle</label>
                  <input type="text" class="form-control" name="controle" value="{{$formula->controle}}">
              </div>
              <div class="mb-3">
                  <label class="form-label">Excel 1</label>
                  <select class="form-control" name="filetype_name1" onchange="loadSubCategorie(this)">
                      <option value=""></option>
                      @foreach($categories as $categorie)
                      <option value="{{$categorie->filetype_name}}" {{($categorie->filetype_name==$formula->filetype_name1)?'selected':''}}>{{$categorie->filetype_name}}</option>
                      @endforeach
                  </select>
              </div>
              <div class="mb-3">
                  <label class="form-label">Excel 2</label>
                  <select id="subCategories" class="form-control" name="filetype_name2">
                       <option value=""></option>
                      @foreach($childCategories as $childCategorie)
                      <option value="{{$childCategorie->filetype_name}}" {{($childCategorie->filetype_name==$formula->filetype_name2)?'selected':''}}>{{$childCategorie->filetype_name}}</option>
                      @endforeach
                  </select>
              </div>
              <div class="mb-3">
                  <label class="form-label">Formula</label>
                  <textarea class="form-control" rows="5" id="formula_text" name="formula_text">{{$formula->formula_text}}</textarea>
              </div>
              <div class="mb-3">
                  <label class="form-label">Periodicite</label>
                  <select class="form-control" name="periodicite_id">
                      <option value=""></option>
                      @foreach($periodicites as $periodicite)
                      <option value="{{$periodicite->id}}" {{($periodicite->id==$formula->periodicite_id )?'selected':''}}>{{$periodicite->period}}</option>
                      @endforeach
                  </select>
              </div>
              <input type="hidden" name="formula_id" value="{{$formula->id}}"/>

           <div class="col-12">
             <button type="submit" class="actionBtn" style="margin-top:10px">
               <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 33.595 23.995">
                 <path id="Tracé_211" data-name="Tracé 211" d="M40.1,12.7a2.42,2.42,0,0,1,0,3.4L20.9,35.3a2.42,2.42,0,0,1-3.4,0L7.9,25.7a2.4,2.4,0,1,1,3.4-3.4l7.9,7.91L36.7,12.7A2.42,2.42,0,0,1,40.1,12.7Z" transform="translate(-7.202 -12.003)" fill="#fff" fill-rule="evenodd"></path>
             </svg>
                 Appliquer les Modifications</button>
           </div>
        </form>

       </div>
     </div>
    </div>
  </div>
  <script>
    function loadSubCategorie(that){
      var data = {_token:'{{csrf_token()}}',parent_id:$(that).val(),action:'get-categories'}
      axios({
          method: 'post',
          url: '{{route('ajax')}}',
          data:data
      })
      .then(function (response) {
          var html = '<option value=""></option>';
          response.data.forEach(item => {
              html += '<option value="'+item.id+'">'+item.filetype_name+'</option>';
          });
          $('#subCategories').html(html)

      });
    }
  </script>
@endsection