<div class="pd-20 card-box">
    <div class="tab">
        <div class="row clearfix">
            <div class="col-md-2 col-sm-12">
                <ul
                    class="nav flex-column vtabs nav-tabs customtab"
                    role="tablist"
                >
                    <li class="nav-item">
                        <a  
                            wire:click.prevent="selectTab('facture')"
                            class="nav-link {{ $tab == 'facture' ? 'active' : '' }}"
                            data-toggle="tab"
                            href="#sur_facture"
                            role="tab"
                            aria-selected="true"
                            >Règlement sur Facture</a
                        >
                    </li>
                    <li class="nav-item">
                        <a  
                            wire:click.prevent="selectTab('tiers')"
                            class="nav-link {{ $tab == 'tiers' ? 'active' : '' }}"
                            data-toggle="tab"
                            href="#sur_tiers"
                            role="tab"
                            aria-selected="false"
                            >Règlement sur Tiers</a
                        >
                    </li>
                    <li class="nav-item">
                        <a  
                            wire:click.prevent="selectTab('td')"
                            class="nav-link {{ $tab == 'td' ? 'active' : '' }}"
                            data-toggle="tab"
                            href="#transac_diverse"
                            role="tab"
                            aria-selected="false"
                            >Transactions diverses</a
                        >
                    </li>
                </ul>
            </div>
            <div class="col-md-10 col-sm-12">
                <div class="tab-content">
                    <div class="spinner_t">
                    <div class="spinner-border spinner-border-sm"  role="status" wire:loading wire:target="selectTab">
                        <span class="visually-hidden"></span>
                    </div>
                    </div>
                    <div wire:loading.remove wire:target="selectTab"
                        class="tab-pane fade {{ $tab == 'facture' ? 'show active' : '' }}"
                        id="sur_facture"
                        role="tabpanel"
                    >
                        <div class="pd-20">
                    
                            <form enctype="multipart/form-data" >
                                         <div class="row mb-2">
                                             <div class="col-md-4">
                                                     <label for="">Date <span style="color:red;">*</span></label>
                                                     <input type="date"  class="form-control form-control-sm" wire:model="date_facture" tabindex="1" maxlength="50" >
                                                     @error('date_facture')
                                                         <small class="form-text text-danger">{{ $message }}</small>
                                                     @enderror
                                             </div>
                                             <div class="col-md-4">
                                                 
                                                     <label for="">Réference doc. <span style="color:red;">*</span></label>
                                                     <input type="text"  class="form-control form-control-sm" wire:model="Reference_facture" tabindex="2" maxlength="50"   >
                                                     @error('Reference_facture')
                                                         <small class="form-text text-danger">{{ $message }}</small>
                                                     @enderror
                                                 
                                             </div>
                                             <div class="col-md-4">
                                                 
                                                <label for="">Justification</label>
                                                <input type="text"  class="form-control form-control-sm" wire:model="justification_facture" tabindex="2" maxlength="50"   >
                                                @error('justification_facture')
                                                    <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            
                                        </div>
                                             </div>
                                             <div class=" row mb-2">
                                                 <div class="col-md-8">
                                                         <label for="">Libellé<span style="color:red;">*</span></label>
                                                         <input type="text"  class="form-control form-control-sm" wire:model="libelle_facture" tabindex="5" maxlength="150"   >
                                                         @error('libelle_facture')
                                                             <small class="form-text text-danger">{{ $message }}</small>
                                                         @enderror
                                                     
                                                 </div>
                                                 <div class="col-md-4">
                                                    <label for="">Pièce justificative</label> <small class="text-muted">(.pdf)</small>
                                                    <input type="file"  class="form-control form-control-sm" wire:model="file_piece_justif_facture" accept=".pdf" placeholder="attachez pdf">
                                                    @error('file_piece_justif_facture')
                                                        <small class="form-text text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                             </div>
                        
                                             <div class="row mb-3">
                                         
                                             <div class="col-md-4">
                                                     <label for="">Compte de Caisse</label>
                                                     <select 
                                                                 class="form-control form-control-sm"
                                                                 wire:model="CompteCaisse_facture" 
                                                                 tabindex="7"
                                                                         >
                                                                         <option value="" ></option>
                                                                         @foreach(get_compte_caisse() AS $compte)
                                                                             <option value="{{ $compte->num_compte }}">{{ $compte->num_compte}} - {{ $compte->nom_compte }}</option>
                                                                         @endforeach
                                                                             
                                                     </select>
                                                     @error('CompteCaisse_facture')
                                                         <small class="form-text text-danger">{{ $message }}</small>
                                                     @enderror
                                             </div>
                                             <div class="col-md-4">
                                                 
                                                <label for="">Montant</label>
                                                <input type="text"  class="form-control form-control-sm" wire:model="montant_facture" 
                                                tabindex="10" maxlength="20"
                                                >
                                                @error('montant_facture')
                                                    <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            
                                        </div>

                                             <div class="col-md-4">
                                                <label for="">Devise <span style="color:red;">*</span></label>
                                                <select class="form-control form-control-sm" wire:model="devise_facture" tabindex="4">
                                                   @foreach ( get_select_devise() as $devise )
                                                       <option value="{{ $devise->devise }}">{{ $devise->devise}} - {{ $devise->intitule }}</option>
                                                   @endforeach
                                                </select>
                                                @error('devise_facture')
                                                    <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            
                                        </div>
                                          
                                         </div>           
                                 
                                <div class="row zone_btn">
                                         <button type="button" wire:click="resetForm_Facture" class="btn btn-light btn-sm">Annuler</button>
                                                     
                                         <button type="button" class="btn btn-primary btn-sm" wire:click="saveSurFacture" wire:loading.attr="disabled" style="width:15%;" > 
                                                 
                                                 <div class="spinner-border spinner-border-sm"  role="status" wire:loading wire:target="saveSurFacture">
                                                     <span class="visually-hidden"></span>
                                                 </div>
                                 
                                                 <div wire:loading.remove wire:target="saveSurFacture">
                                                     Enregistrer 
                                                 </div>
                                             
                                         </button>
                                         <button type="button" wire:click="$dispatch('OpenModalFactureCliquable',['caisse'])"  class="btn btn-outline-success btn-sm">Facture Client | Fournisseur</button>
                                         <button type="button" wire:click="goToJournalCompta" class="btn btn-outline-success btn-sm">Apercu Journal</button>
                                         <button type="button" wire:click="$dispatch('NewTiers')" class="btn btn-outline-primary btn-sm">Solde des Caisses</button>
                                </div>
                            </form>
                           
                        </div>
                    </div>
                    <div wire:loading.remove wire:target="selectTab"
                        class="tab-pane fade  {{ $tab == 'tiers' ? 'show active' : '' }}"
                        id="sur_tiers"
                        role="tabpanel"
                    >
                        <div class="pd-20">
                            
                            <form enctype="multipart/form-data" >
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                       
                                            <label for="">Date <span style="color:red;">*</span></label>
                                            <input type="date"  class="form-control form-control-sm" wire:model="date_tiers" tabindex="1" maxlength="50" >
                                            @error('date_tiers')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                            @enderror
                                        
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Tiers <span style="color:red;">*</span></label>
                                        <select 
                                            class="form-control form-control-sm"
                                            wire:model.live="idTiers"
                                            tabindex="6"
                                                    >
                                                <option value="">select</option>
                                                <optgroup label="FOURNISSEUR">  
                                                   @foreach(get_tiers('fourn') AS $info )
                                                           <option value="{{ $info->id }}">{{ $info->denomination}} </option>
                                                   @endforeach
                                               </optgroup>
                                               <optgroup label="CLIENT">  
                                                   @foreach(get_tiers('client') AS $info )
                                                           <option value="{{ $info->id }}">{{ $info->denomination}} </option>
                                                   @endforeach
                                               </optgroup>           
                                        </select>
                                </div>
                                    <div class="col-md-4">
                                       <label for="">Justification</label>
                                       <input type="text"  class="form-control form-control-sm" wire:model="justification_tiers" tabindex="2" maxlength="50"   >
                                       @error('justification_tiers')
                                           <small class="form-text text-danger">{{ $message }}</small>
                                       @enderror
                                    </div>
                                   
                                    </div>
                              
                                    <div class=" row mb-2">
                                        <div class="col-md-8">
                                           
                                                <label for="">Libellé<span style="color:red;">*</span></label>
                                                <input type="text"  class="form-control form-control-sm" wire:model="libelle_tiers" tabindex="5" maxlength="150"   >
                                                @error('libelle_tiers')
                                                    <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            
                                        </div>
                                        <div class="col-md-4">
                                    
                                
                                           <label for="">Pièce justificative</label> <small class="text-muted">(.pdf)</small>
                                           <input type="file"  class="form-control form-control-sm" wire:model="file_piece_justif_tiers" accept=".pdf" placeholder="attachez pdf">
                                           @error('file_piece_justif_tiers')
                                               <small class="form-text text-danger">{{ $message }}</small>
                                           @enderror
                                       </div>
                                    </div>
               
                                    <div class="row mb-3">

                                        <div class="col-md-3">
                                            <label for="">Compte tiers</label>
                                            <select 
                                                        class="form-control form-control-sm"
                                                        wire:model.live="CompteTiers_tiers" 
                                                        tabindex="7"
                                                                >
                                                            <option value="" ></option>
                                                        @if($ListCompte)
                                                            @foreach($ListCompte AS $compte )
                                                                    <option @selected($value_tiers == $compte->num_compte) value="{{ $compte->num_compte }}">{{ $compte->num_compte}} - {{ $compte->nom_compte }}</option>
                                                            @endforeach
                                                        @endif
                                                                    
                                            </select>
                                            @error('CompteTiers_tiers')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                            @enderror
                                            
                                    </div>
                                
                                    <div class="col-md-3">
                                            <label for="">Compte de Caisse</label>
                                            <select 
                                                        class="form-control form-control-sm"
                                                        wire:model.live="CompteCaisse_tiers" 
                                                        tabindex="7"
                                                                >
                                                                <option value="" ></option>
                                                                @foreach(get_compte_caisse() AS $compte)
                                                                    <option value="{{ $compte->num_compte }}">{{ $compte->num_compte}} - {{ $compte->nom_compte }}</option>
                                                                @endforeach       
                                            </select>
                                            @error('CompteCaisse_tiers')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                            @enderror
                                    </div>
                                    <div class="col-md-3">
                                        
                                       <label for="">Montant</label>
                                       <input type="text"  class="form-control form-control-sm" wire:model="montant_tiers"
                                       tabindex="10" maxlength="20"
                                       >
                                       @error('montant_tiers')
                                           <small class="form-text text-danger">{{ $message }}</small>
                                       @enderror
                                   
                               </div>

                                    <div class="col-md-3">
                                    
                                       <label for="">Devise <span style="color:red;">*</span></label>
                                       <select class="form-control form-control-sm" wire:model="devise_tiers" tabindex="4">
                                          @foreach ( get_select_devise() as $devise )
                                              <option value="{{ $devise->devise }}">{{ $devise->devise}} - {{ $devise->intitule }}</option>
                                          @endforeach
                                       </select>
                                       @error('devise_tiers')
                                           <small class="form-text text-danger">{{ $message }}</small>
                                       @enderror
                                   
                               </div>
                                 
                                </div>           
                        
                                <div class="row zone_btn">
                                            <button type="button" wire:click="resetForm_Tiers" class="btn btn-light btn-sm">Annuler</button>
                                                        
                                            <button type="button" class="btn btn-primary btn-sm" wire:click="enCaissement" wire:loading.attr="disabled" style="width:15%;"> 
                                                    
                                                    <div class="spinner-border spinner-border-sm"  role="status" wire:loading wire:target="enCaissement">
                                                        <span class="visually-hidden"></span>
                                                    </div>
                                    
                                                    <div wire:loading.remove wire:target="enCaissement">
                                                        Encaissement 
                                                    </div>
                                                
                                            </button>

                                            <button type="button" class="btn btn-danger btn-sm" wire:click="DeCaissement" wire:loading.attr="disabled" style="width:15%;" > 
                                                    
                                                <div class="spinner-border spinner-border-sm"  role="status" wire:loading wire:target="DeCaissement">
                                                    <span class="visually-hidden"></span>
                                                </div>
                                                
                                                <div wire:loading.remove wire:target="DeCaissement">
                                                    Décaissement 
                                                </div>
                                            
                                            </button>
                        
                                        
                                            <button type="button" wire:click="goToJournalCompta" class="btn btn-outline-success btn-sm">Apercu Journal</button>
                                            <button type="button" wire:click="$dispatch('NewTiers')" class="btn btn-outline-primary btn-sm">Solde des Caisses</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div wire:loading.remove wire:target="selectTab"
                        class="tab-pane fade {{ $tab == 'td' ? 'show active' : '' }}"
                        id="transac_diverse"
                        role="tabpanel"
                    >
                        <div class="pd-20">
                            <form enctype="multipart/form-data" >
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                       
                                            <label for="">Date <span style="color:red;">*</span></label>
                                            <input type="date"  class="form-control form-control-sm" wire:model="date_td" tabindex="1" >
                                            @error('date_td')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                            @enderror
                                        
                                    </div>
                                 
                                    <div class="col-md-8">
                                        
                                       <label for="">Justification</label>
                                       <input type="text"  class="form-control form-control-sm" wire:model="justification_td" tabindex="2" maxlength="50"   >
                                       @error('justification_td')
                                           <small class="form-text text-danger">{{ $message }}</small>
                                       @enderror
                                   
                                    </div>
                                   
                                    </div>
                                    <div class=" row mb-2">
                                        <div class="col-md-8">
                                           
                                                <label for="">Libellé<span style="color:red;">*</span></label>
                                                <input type="text"  class="form-control form-control-sm" wire:model="libelle_td" tabindex="5" maxlength="150"   >
                                                @error('libelle_td')
                                                    <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            
                                        </div>
                                        <div class="col-md-4">
                                           <label for="">Pièce justificative</label> <small class="text-muted">(.pdf)</small>
                                           <input type="file"  class="form-control form-control-sm" wire:model="file_piece_justif_td" accept=".pdf" placeholder="attachez pdf">
                                           @error('file_piece_justif_td')
                                               <small class="form-text text-danger">{{ $message }}</small>
                                           @enderror
                                       </div>
                                    </div>
               
                                    <div class="row mb-3">
                                        <div class="col-md-3">
                                            <label for="">Compte Général</label>
                                            <input type="text"  class="form-control form-control-sm" wire:model="CompteTiers_td"
                                            tabindex="10" maxlength="20"
                                            >
                                            
                                            @error('CompteTiers_td')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                            @enderror
                                            
                                    </div>
                              
                                    <div class="col-md-3">
                                            <label for="">Compte de Caisse</label>
                                            <select 
                                                        class="form-control form-control-sm"
                                                        wire:model.live="CompteCaisse_td" 
                                                        tabindex="7"
                                                                >
                                                                <option value="" ></option>
                                                                @foreach(get_compte_caisse() AS $compte)
                                                                    <option value="{{ $compte->num_compte }}">{{ $compte->num_compte}} - {{ $compte->nom_compte }}</option>
                                                                @endforeach
                                                           
                                                                    
                                            </select>
                                            @error('CompteCaisse_td')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                            @enderror
                                    </div>
                                    <div class="col-md-3">
                                        
                                       <label for="">Montant</label>
                                       <input type="text"  class="form-control form-control-sm" wire:model="montant_td"
                                       tabindex="10" maxlength="20"
                                       >
                                       @error('montant_td')
                                           <small class="form-text text-danger">{{ $message }}</small>
                                       @enderror
                                   
                               </div>

                                    <div class="col-md-3">
                                    
                                       <label for="">Devise <span style="color:red;">*</span></label>
                                       <select class="form-control form-control-sm" wire:model="devise_td" tabindex="4">
                                          @foreach ( get_select_devise() as $devise )
                                              <option value="{{ $devise->devise }}">{{ $devise->devise}} - {{ $devise->intitule }}</option>
                                          @endforeach
                                       </select>
                                       @error('devise_td')
                                           <small class="form-text text-danger">{{ $message }}</small>
                                       @enderror
                                   
                               </div>
                                 
                                </div>           
                        
                                <div class="row zone_btn">
                                            <button type="button" wire:click="resetForm_TD" class="btn btn-light btn-sm">Annuler</button>
                                                        
                                            <button type="button" class="btn btn-primary btn-sm" wire:click="enCaissement_" wire:loading.attr="disabled" style="width:15%;"> 
                                                    
                                                    <div class="spinner-border spinner-border-sm"  role="status" wire:loading wire:target="enCaissement_">
                                                        <span class="visually-hidden"></span>
                                                    </div>
                                    
                                                    <div wire:loading.remove wire:target="enCaissement_">
                                                        Encaissement 
                                                    </div>
                                                
                                            </button>

                                            <button type="button" class="btn btn-danger btn-sm" wire:click="DeCaissement_" wire:loading.attr="disabled" style="width:15%;"> 
                                                    
                                                <div class="spinner-border spinner-border-sm"  role="status" wire:loading wire:target="DeCaissement_">
                                                    <span class="visually-hidden"></span>
                                                </div>
                                
                                                <div wire:loading.remove wire:target="DeCaissement_">
                                                    Décaissement 
                                                </div>
                                            
                                            </button>
                        
                                            <button type="button" wire:click="goToJournalCompta" class="btn btn-outline-success btn-sm">Apercu Journal</button>
                                            <button type="button" wire:click="$dispatch('NewTiers')" class="btn btn-outline-primary btn-sm">Solde des Caisses</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



