@extends('app')
@section('content')

        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Ajouter un produit</h1>
</section>
<!-- Main content -->
<section class="content">
    <!-- Messages -->

    @if(Session::has('msgAdd'))
        <div class="box box-success box-solid">
            <div class="box-header with-border">
                <div class="box-title">
                    <span> <i class="fa fa-check"></i></span>
                    <em>{!! session('msgAdd') !!}</em>
                </div>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="remove">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(Session::has('msgIdf'))
        <div class="box box-warning box-solid">
            <div class="box-header with-border">
                <div class="box-title">
                    <span> <i class="fa fa-check"></i></span>
                    <em>{!! session('msgIdf') !!}</em>
                </div>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="remove">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    @endif

    @if(Session::has('msgPsw'))
        <div class="box box-warning box-solid">
            <div class="box-header with-border">
                <div class="box-title">
                    <span> <i class="fa fa-check"></i></span>
                    <em>{!! session('msgPsw') !!}</em>
                </div>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="remove">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
        @endif
                <!-- fin messages -->

        <!-- Default box -->
        <div class="box">
            <div class="panel-body">
                <div class="col-sm-12">
                    {!! Form::open(['method'=>'POST','action' => ['ProduitController@postForm']]) !!}
                    <table>
                        <tbody>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Désignation
                                </label>
                                <div class="col-sm-6">
                                    <input type="text"  class="form-control" name="designation" placeholder="Désignation" required value="{{old('designation')}}">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Catégorie
                                </label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="categorie" required="required">
                                        <option selected disabled="disabled" value="" style="background-color: white">Sélectionner une catégorie du produit...</option>
                                        @foreach($categories as $categorie)
                                            <option value="{{$categorie->id_categorie}}" >{{$categorie->libelle}}  </option>
                                        @endforeach
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Unité de mesure
                                </label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="unite_mesure" required="required">
                                        <option selected disabled value="" style="background-color: white">Sélectionner l'unité de mesure de ce produit...</option>
                                        @foreach($unites_mesure as $unite_mesure)
                                            <option value="{{$unite_mesure->id_unite_mesure}}" >{{$unite_mesure->libelle}} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Poids (Kg)
                                </label>
                                <div class="col-sm-6">
                                    <input type="number" step="0.01" class="form-control" name="poids" placeholder="Poids"  value="{{old('poids')}}">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Volume (m³)
                                </label>
                                <div class="col-sm-6">
                                    <input type="number" step="0.01" class="form-control" name="volume" placeholder="Volume"  value="{{old('volume')}}">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Code produit
                                </label>
                                <div class="col-sm-6">
                                    <input type="text"  class="form-control" name="code_a_barre" placeholder="Code produit" required value="{{old('code_a_barre')}}">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Référence
                                </label>
                                <div class="col-sm-6">
                                    <input type="text"  class="form-control" name="reference" placeholder="Référence" required value="{{old('reference')}}">
                                </div>
                            </td>
                        </tr>
                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    TVA
                                </label>
                                <div class="col-sm-6">
                                    <input type="number"  class="form-control" name="tva" placeholder="TVA" required value="{{old('tva')}}">
                                </div>
                            </td>
                        </tr>

                        <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    Statut
                                </label>
                                <div class="col-sm-6">
                                    <input type="radio" checked name="statut" required value="actif"> Actif
                                    <input type="radio" name="statut" required value="inactif">Inactif
                                </div>
                            </td>
                        </tr>
                        @if (Session::get('NUMERO_SERIE'))
                             <tr style="height:50px">
                            <td class="col-sm-4">
                                <label class="col-sm-4 control-label">
                                    N° de série
                                </label>
                                <div class="col-sm-6">
                                    <input type="radio" checked name="serie" required value="0"> Non
                                    <input type="radio" name="serie" required value="1">Oui
                                </div>
                            </td>
                        </tr>
                        @endif
                       
                        </tbody>
                    </table>
                     <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                @if(Session::get('COMPOSE_PACK'))
                    <li class="active"><a href="#tab_1" data-toggle="tab">Produit composé pack</a></li>
                @endif
                @if(Session::get('COMPOSE_MP'))
                    <li
                    @if(! Session::get('COMPOSE_PACK'))
                        class="active"
                    @endif
                    ><a href="#tab_2" data-toggle="tab">Produit composé MP</a></li>
                @endif
            </ul>
            <input type="hidden" name="savoirPak" id="savoirPak" value="0">
            <input type="hidden" name="savoirMP" id="savoirMP" value="0">
            @if(Session::get('COMPOSE_PACK') || Session::get('COMPOSE_MP') )
                <div class="tab-content">
            @endif
                @if(Session::get('COMPOSE_PACK'))
                  <div class="tab-pane active" id="tab_1">
                    <b>Ajouter un produit</b> <a style="color:black; cursor: pointer;" id="compose_pack" onclick="addLignePack()">
                                                      <span class="glyphicon glyphicon-plus-sign"></span></a>
                    <br>
                    <br>
                    <div id="divTab" style="width: 70%">
                        <table id="tabPack" class="table">
                            <tr id="trPack0" hidden>
                                <td style="width: 40%;"><b>Produit</b></td>
                                <td style="width: 20%;"><b>Quantité</b></td>
                                <td style="width: 1%;text-align: center"><b>Supprimer</b></td>
                            </tr>
                            <tr id="trPack1" hidden>
                                <td style="width: 40%">
                                    <select class="form-control selectpicker" data-live-search="true" style="width:90%;" name="produit_Pack[]">
                                        <option selected value=''>Choisir un produit ...</option>
                                        @foreach($produitsPack as $produitIndex)
                                        <option value="{{$produitIndex->id_produit}}" >{{$produitIndex->reference}} </option>
                                    @endforeach
                                    </select>
                                </td>
                                <td style="width: 20%">
                                    <input  type="number" min=1 class="form-control"style="width:100%;text-align: center" placeholder="Quantité" name="quantite_Pack[]" 
                                    id="quantite_num"> 
                                </td>
                                <td style="font-size: 20px;text-align: center">
                                    <i class="fa fa-trash-o" onclick="deletePack(this)" style="color:red;cursor: pointer; " id="deletee"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                  </div>
                @endif
              <!-- /.tab-pane -->
                @if(Session::get('COMPOSE_MP'))
                  <div  
                   @if(Session::get('COMPOSE_PACK'))
                    class="tab-pane"
                    @else
                    class="tab-pane active"
                    @endif
                  id="tab_2">
                    <b>Ajouter un produit</b> <a style="color:black; cursor: pointer;" id="compose_mp" onclick="addLigneMP()">
                                                      <span class="glyphicon glyphicon-plus-sign"></span></a>
                    <br>
                    <br>
                    <div id="divTab" style="width: 70%">
                        <table id="tabMP" class="table">
                            <tr id="trMP0" hidden>
                                <td style="width: 40%"><b>Produit</b></td>
                                <td style="width: 20%"><b>Quantité</b></td>
                                <td style="width: 1%;text-align: center"><b>Supprimer</b></td>
                            </tr>
                            <tr id="trMP1" hidden>
                                <td style="width: 40%">
                                    <select class="form-control selectpicker" data-live-search="true" style="width:90%;" name="produit_mp[]">
                                        <option selected style="background-color: ##e6e6fa"value=''>Choisir un produit ...</option>
                                        @foreach($produitsMP  as $produitIndex)
                                        <option value="{{$produitIndex->id_produit}}" >{{$produitIndex->reference}}</option>
                                    @endforeach
                                    </select>
                                </td>
                                <td style="width: 20%">
                                    <input type="number" min=1 class="form-control"style="width:100%;text-align: center" placeholder="Quantité" name="quantite_mp[]" id="quantite_numMP"> 
                                </td>
                                <td style="font-size: 20px;text-align: center">
                                    <i class="fa fa-trash-o" onclick="deleteMP(this)" style="color:red;cursor: pointer " id="deleteeMP"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                  </div>
                @endif
              <!-- /.tab-pane -->
            @if(Session::get('COMPOSE_PACK') || Session::get('COMPOSE_MP') )
                </div>
            @endif
            <!-- /.tab-content -->
          </div>
                    <input class="btn btn-flat btn-primary pull-right" type="submit" value="Valider">
                    <a href="{{url('produit/index')}}" class="btn btn-flat btn-danger pull-right">Annuler</a>

                    {!! Form::close() !!}

                </div>
            </div>
        </div><!-- /.box -->
</section><!-- /.content -->
<script>
    var pack = 0;
    var mp = 0;

    function addLignePack(){
        document.getElementById("savoirPak").value = 1;
        if(!pack){
            pack++;
            return addFirstLignePack();
        }else{
            return addLigneComposePack();
        }
    }
    function addLigneMP(){
        document.getElementById("savoirMP").value = 1;
        if(!mp){
            mp++;
            return addFirstLigneMP();
        }else{
            return addLigneComposeMP();
        }
    }

    function addFirstLignePack(){
        document.getElementById("trPack1").hidden= false;
        document.getElementById("trPack0").hidden= false;
    }
    function addFirstLigneMP(){
        document.getElementById("trMP1").hidden= false;
        document.getElementById("trMP0").hidden= false;
    }

    function addLigneComposePack(){
        document.getElementById("deletee").style.color = "#ff9999";
        document.getElementById("deletee").style.cursor = "not-allowed"
        pack++;
        var cloned = $('#trPack1').clone();
        //then use this to solve duplication problem    
        cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); })    
        cloned.find('.selectpicker').selectpicker('render');
        cloned.find('#deletee').css("cursor","pointer");
        cloned.find('#deletee').css("color","red");
        cloned.find('#deletee').prop('id',"deletee"+pack);
        cloned.find('#quantite_num').val('');
        cloned.find('#quantite_num').prop('id',"quantite_num"+pack);
        cloned.prop('id',"trPack"+pack);
        //Then Append
        cloned.appendTo('#tabPack');
    }
    function addLigneComposeMP(){
        document.getElementById("deleteeMP").style.color = "#ff9999";
        document.getElementById("deleteeMP").style.cursor = "not-allowed"
        mp++;
        var cloned = $('#trMP1').clone();
        //then use this to solve duplication problem    
        cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); })    
        cloned.find('.selectpicker').selectpicker('render');
        cloned.find('#deleteeMP').css("cursor","pointer");
        cloned.find('#deleteeMP').css("color","red");
        cloned.find('#deleteeMP').prop('id',"deleteeMP"+mp);
        cloned.find('#quantite_numMP').val('');
        cloned.find('#quantite_numMP').prop('id',"quantite_numMP"+mp);
        cloned.prop('id',"trMP"+mp);
        //Then Append
        cloned.appendTo('#tabMP');
    }

    function deletePack(packk){
        if ( confirm( "Voulez-vous vraiment supprimer la ligne ?" ) ) {
            if(packk.id != "deletee"){
            $(packk).closest('tr').find('input,select').remove();
            $(packk).closest('tr').hide();
            pack--;
        }else{
            if(pack == 1){
                document.getElementById("trPack1").hidden= true;
                document.getElementById("trPack0").hidden= true;
                pack--;
                document.getElementById("savoirPak").value = 0;
            }
        }
        if(pack == 1){
            document.getElementById("deletee").style.color = "red";
            document.getElementById("deletee").style.cursor = "pointer"
        } 
        }
          
    }
    function deleteMP(mpp){
         if ( confirm( "Voulez-vous vraiment supprimer la ligne ?" ) ) {
        if(mpp.id != "deleteeMP"){
            $(mpp).closest('tr').find('input,select').remove();
            $(mpp).closest('tr').hide();
            mp--;
        }else{
            if(mp == 1){
                document.getElementById("trMP1").hidden= true;
                document.getElementById("trMP0").hidden= true;
                mp--;
                document.getElementById("savoirMP").value = 0;
            }
        }
        if(mp == 1){
            document.getElementById("deleteeMP").style.color = "red";
            document.getElementById("deleteeMP").style.cursor = "pointer"
        }   
    }
    }    
</script>



@endsection