@extends('layout.index')
@section('content')
<div class="row" style="margin-top:40px">
   <div class="col-md-8">
    <h1>Ajouter formula</h1>
        <form action="{{route('add-formula')}}" method="post">
            @csrf
            <div class="mb-3">
                <label class="form-label">Titre</label>
                <input type="text" class="form-control" name="controle_name">
            </div>
            <div class="mb-3">
                <label class="form-label">Controle</label>
                <input type="text" class="form-control" name="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}}</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>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Formula</label>
                <textarea class="form-control" rows="5" id="formula_text" name="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->period}}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary" style="margin-top:10px">Ajouter</button>
        </form>
   </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.filetype_name+'">'+item.filetype_name+'</option>';
        });
        alert(html);
        $('#subCategories').html(html)

    });
  }
</script>
@endsection