@extends('app')
@section('title', 'Add new matter')
@section('content')
<div class="pcoded-inner-content">
    @include('includes._alert')
    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-body">
                <div class="card">
                    <div class="card-header mb-0 pb-0">
                        <div class="d-flex justify-content-between pb-2">
                            <h4>Disciplines Pour {{ucfirst($valeur)}}</h4>
                            <span class="form-control-variant">Les champ avec asterisk (<code>*</code>) sont obligatoires.</span>
                            <span>
                                <a href="{{route('matiere.index')}}" class="btn btn-inverse btn-outline-inverse  btn-sm py-1" title="Return Back"><i class="fas fa-reply mx-0"></i></a>
                            </span>
                        </div>
                    </div>
                    <hr class="mx-3 my-0">
                    <div class="card-block mx-3">
                        <form action="{{route('matiere.store')}}" method="post">
                            @csrf
                            <input type="hidden" value="{{$valeur}}" name="type">
                            <table class="table table-bordered mb-0" id="addStudent">
                                <tbody>
                                    @php $i = 1; @endphp
                                    @forelse ($matters as $item)
                                    @php $i++ @endphp
                                    <tr class="py-0">
                                        <td class="py-0" style="width: 30%">
                                            <div class="form-group my-0">
                                                <label class="col-form-label fw-bold" for="name_{{$i}}">Nom de la matière<span class="text-danger">*</span> :</label>
                                                <input type="text" name="name[]" id="name_{{$i}}" class="form-control mb-0" value="{{$item->libelle}}" readonly>
                                            </div>
                                        </td>
                                        <td class="py-0" style="width: 30%">
                                            <div class="form-group my-0">
                                                <label class="col-form-label fw-bold" for="abrege_{{$i}}">Nom abrégé de la matière :</label>
                                                <input type="text" name="abrege[]" id="abrege_{{$i}}" class="form-control mb-0" value="{{$item->abbreviated}}" readonly>
                                            </div>
                                        </td>
                                        <td class="py-0" style="width: 30%">
                                            <div class="form-group my-0">
                                                <label class="col-form-label fw-bold" for="bilan_{{$i}}">Type {{$libelle}}<span class="text-danger">*</span> :</label>
                                                <select name="bilan[]" id="bilan_{{$i}}" class="form-control" readonly>
                                                    <option value="">Choise one option</option>
                                                    @foreach ($bilans as $bilan)
                                                        <option value="{{$bilan->id}}" {{$item ? ($item->libelle_bilan_id == $bilan->id ? 'selected':null):null}}>{{ucwords($bilan->libelle)}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </td>
                                        <td class="text-center py-0" style="width: 5%;">
                                            <div class="my-0" style="display: flex;align-items: flex-end;height: 70px;">
                                                <input type="checkbox" name="select" class="checkbox mb-0 ms-auto" style="margin-bottom: 0%">
                                            </div>
                                                
                                        </td>
                                    </tr>
                                    @empty
                                    <tr class="py-0">
                                        <td class="py-0" style="width: 30%">
                                            <div class="form-group my-0">
                                                <label class="col-form-label fw-bold" for="name_1">Nom de la matière<span class="text-danger">*</span> :</label>
                                                <input type="text" name="name[]" id="name_1" class="form-control mb-0" placeholder="Entrez le nom de la matière">
                                            </div>
                                        </td>
                                        <td class="py-0" style="width: 30%">
                                            <div class="form-group my-0">
                                                <label class="col-form-label fw-bold" for="abrege_1">Nom abrégé de la matière :</label>
                                                <input type="text" name="abrege[]" id="abrege_1" class="form-control mb-0" placeholder="Entrez le nom abrégé de la matière">
                                            </div>
                                        </td>
                                        <td class="py-0" style="width: 30%">
                                            <div class="form-group my-0">
                                                <label class="col-form-label fw-bold" for="bilan_1">Type {{$libelle}}<span class="text-danger">*</span> :</label>
                                                <select name="bilan[]" id="bilan_1" class="form-control">
                                                    <option value="">Choise one option</option>
                                                    @foreach ($bilans as $bilan)
                                                        <option value="{{$bilan->id}}">{{ucwords($bilan->libelle)}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </td>
                                        <td class="text-center py-0" style="width: 5%;">
                                            <div class="my-0" style="display: flex;align-items: flex-end;height: 70px;">
                                                <input type="checkbox" name="select" class="checkbox mb-0 ms-auto" style="margin-bottom: 0%">
                                            </div>
                                                
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="text-right mt-1">
                                <a href="#" class="btn btn-sm btn-danger" id="delete" title="Delete Row">-</a>
                                <a href="#" class="btn btn-sm btn-info" id="addRow" title="Add Row">+</a>
                            </div>
                            <hr class="text-center mt-3">
                            <div class="text-center">
                                <button type="submit" class="btn btn-inverse btn-outline-inverse py-2"> <i class="fas fa-check-circle"></i> Valider les informations</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{asset('assets/js/pcoded.min.js')}}"></script>
<script src="{{asset('assets/js/vartical-layout.min.js')}}"></script>
<script src="{{asset('assets/js/jquery.mCustomScrollbar.concat.min.js')}}"></script>

<script>
    $(document).ready(function(){

        // Ajouter une ligne
        let nbLignes = $('table#addStudent tbody tr').length;
        let cmpte = nbLignes;
        $('#addRow').on('click', function(){
            if($('#name_'+cmpte).val() && $('#bilan_'+cmpte).val()){
                cmpte += cmpte;
                let newRow = ('<tr class="py-0">'+
                    '<td class="py-0" style="width: 30%">'+
                        '<div class="form-group my-0">'+
                            '<label class="col-form-label fw-bold" for="name_'+cmpte+'">Nom de la matière<span class="text-danger">*</span> :</label>'+
                            '<input type="text" name="name[]" id="name_'+cmpte+'" class="form-control mb-0" placeholder="Entrez le nom de la matière">'+
                        '</div>'+
                    '</td>'+
                    '<td class="py-0" style="width: 30%">'+
                        '<div class="form-group my-0">'+
                            '<label class="col-form-label fw-bold" for="abrege_'+cmpte+'">Nom abrégé de la matière :</label>'+
                            '<input type="text" name="abrege[]" id="abrege_'+cmpte+'" class="form-control mb-0" placeholder="Entrez le nom abrégé de la matière">'+
                        '</div>'+
                    '</td>'+
                    '<td class="py-0" style="width: 30%">'+
                        '<div class="form-group my-0">'+
                            '<label class="col-form-label fw-bold" for="bilan_'+cmpte+'">Type {{$libelle}}<span class="text-danger">*</span> :</label>'+
                            '<select name="bilan[]" id="bilan_'+cmpte+'" class="form-control">'+
                                '<option value="">Choise one option</option>'+
                                '@foreach ($bilans as $bilan)'+
                                    '<option value="{{$bilan->id}}">{{ucwords($bilan->libelle)}}</option>'+
                                '@endforeach'+
                            '</select>'+
                        '</div>'+
                    '</td>'+
                    '<td class="text-center py-0" style="width: 5%;">'+
                        '<div class="my-0" style="display: flex;align-items: flex-end;height: 70px;">'+
                            '<input type="checkbox" name="select" class="checkbox mb-0 ms-auto" style="margin-bottom: 0%">'+
                        '</div>'+
                    '</td>'+
                '</tr>');
                $('table#addStudent').append(newRow);
                
                $('#name_'+cmpte).focus();
                var nvlRow = $("table#addStudent tbody tr:last");
                $('html, body').animate({
                    scrollTop: nvlRow.offset().top
                }, 500);

                if(cmpte > 1){
                    $('.checkbox').prop('disabled', false);
                }
            }
        });

        // Supprimer une ligne
        $('#delete').on('click', function(){
            $("table#addStudent").find('input[name="select"]').each(function() {
                if ($(this).is(":checked")) {
                    cmpte-=1;
                    $(this).parents("table#addStudent tr").remove();
                    if(cmpte == 1){
                        $('.checkbox').prop('disabled', true);
                    }
                }
            });
        });
    })
</script>
@endsection