@extends('layouts.master')

@section('content')


			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <div class="container">
                  <div class="col-md-12">
            @if(session()->get('success'))
                  <div class="alert alert-success">
                {{ session()->get('success') }}  
                      </div>
            @endif
          </div></div>

          <div class="container">
            <div class="col-md-12">
      @if(session()->get('erreurQty'))
            <div class="alert alert-dark">
          {{ session()->get('erreurQty') }}  
                </div>
      @endif
    </div></div>

                     
            <div class="col-sm-6">
              <a href="{{ url('commandes') }}" class="badge badge-dark"><i class="fas fa-arrow-left"></i></a>
            </div>
                      <div class="content-header">
                        <div class="container-fluid">
                          <div class="row mb-2">
                           
                            <div class="col-sm-6">
                              <h1 class="m-0 text-dark">les Details du Commande</h1>
                            </div><!-- /.col -->
                            <div class="col-sm-6">
                              <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="{{ url('/home') }}">
                                    <i class="fa fa-home fa-fw" aria-hidden="true"></i> Accueil</a>
                                </li>
                                <li class="breadcrumb-item active">Commande</li>
                            <li class="breadcrumb-item active">Details_Commande</li>
                              </ol>
                            </div><!-- /.col -->
                          </div><!-- /.row -->
                        </div><!-- /.container-fluid -->
                      </div>

				<!-- Main content -->
				<section id="main" class="content">	
					<div class="container" id="app1">
                        <div class="row">           
                          <div class="col-md-12">
                              
                              <div class="card text-white bg-secondary mb-3" style="max-width: 180rem;">
                          <div class="card-header">
                            <strong>Client :</strong>
                            <p style="color:teal; font-style: italic; text-align: center; font-weight:bold; background-color: white;">{{$commande->nameC}}</p></div>
                          <div class="card-body">

                          <div class="container">

                            <div class="row">
                              <div class="col-md-4">
                              <strong>Adresse :</strong><p>{{$commande->adresseclient}}</p>
                              </div>
                              <div class="col-md-4">
                                <strong>Prix Total :</strong><p>{{$commande->prixT}}</p>
                                </div>
                              <div class="col-md-4">
                                <strong>Livreur :</strong><p>{{$commande->user->name}}</p>
                                </div>
                            </div>

                            <div class="row">
                              <div class="col-md-3">
                                <strong>Ville :</strong><p>{{$commande->ville}}</p>
                              </div>
                              <div class="col-md-3">
                                <strong>Telephone:</strong><p>{{$commande->telephone}}</p>
                              </div>
                              <div class="col-md-3">
                                <strong>Etat_Commande :</strong><p>{{$commande->etat_commande}}</p>
                              </div>
                              <div class="col-md-3">
                                <strong>A l'order de :</strong><p>{{$commande->order}}</p>
                              </div>
                            </div>

                            <div class="row">
                              <div class="col-md-12">
                                <div class="card text-white bg-secondary mb-3" style="max-width: 180rem;">
                                  <div class="card-header">
                                    <strong>Panier :</strong>
                                    @if($commande->paniers->whereIn('etat_commande_chP',['-','Pas de réponde'])->count() > 0))
                                    @if(($commande->etat_commande === 'En Cours') || ($commande->etat_commande === 'Pas de réponde'))
                                    <button class="btn btn-success btn-sm float-right"  
                                    data-toggle="modal" data-target="#myModal">Ajouter</button>
                                    @endif
                                    @endif
                                    </div>
                                  <div class="card-body">
                                <div class="row">						
    

            <table id="table" class="table table-striped table-bordered" style="width: 100%">
                <thead>
                    <tr>
                        <th>Produit</th>
                        <th>Taille</th>
                        <th>Etat</th>
                        <th>QuantiteCamonder</th>
                        <th class="action align-top">Action</th>			
                    </tr>
                </thead>
                <tbody>
                    @foreach ($paniers as $panier)
                    <tr>
                        <td>{{$panier->produit->designationPro}}</td>
                        <td>{{$panier->taille->designationTail}}</td>
                        <td>{{$panier->etat_commande_chP}}</td>
                        <td>{{$panier->qtecommander}}</td>					
                        <td>
                          @if(($panier->etat_commande_chP === '-') || ($panier->etat_commande_chP === 'Pas de réponde'))
                            <form action="{{ route('paniers.destroy', $panier->id)}}" method="post">
                                @csrf
                                @method('DELETE')
                             <button class="badge badge-danger" type="submit"
                             onclick="return confirm('Voulez-vous vraiment supprimer cette Panier ??');">
                             <i class="fas fa-trash-alt"></i></button> 
    
                        </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th>Produit</th>
                        <th>Taille</th>
                        <th>Etat</th>
                        <th>QuantiteCamonder</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
            </table>
    
                                </div>
                                
                            </div>
                            
                   
                            </div>

                          </div></div></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- /.content -->
  </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header"> 
        <h4 class="modal-title">Vos infos :</h4>              
                <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
                </button>
        </div>
        <form action="{{ route('paniers.store') }}" method="post">
                {{csrf_field()}}
            <div class="modal-body">
                <input class="form-control" type="hidden" name="commande_idP" value="{{$commande->id}}">
                <div class="form-group">
                    <label for="country" class="col-md-4 control-label">Les Produit : :</label>
                        <select name="produit_id" class="form-control productcategory" id="prod_cat_id">
                            <option value="0" disabled="true" selected="true">-Select-</option>
                            @foreach($produits as $produit)
                            <option value="{{ $produit->id }}">
                                {{ $produit->designationPro }}</option>
                                @endforeach
                        </select>
                
                
    
                    <label for="country" class="col-md-4 control-label">Famille :</label>
                        <select name="taille_id" class="form-control taillename">
                            
                            <option value="0" disabled="true" selected="true">Taille Name</option>
                        </select>
                </div>
                
                <div class="form-group">
                    <input type="text" name="qtecommander" id="qtecommander" class="form-control" placeholder="Qantite Cammander ...">
                </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-dark" data-dismiss="modal">Fermer</button>
            <button type="submit" class="btn btn-success">Enregistrer</button>
            </div>
        </form>
    </div>
    </div>
    </div>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

        $(document).on('change','.productcategory',function(){
            console.log("hmm its change");

            var cat_id=$(this).val();
            console.log(cat_id);
            var div=$(this).parent();
            console.log();

            var op=" ";

            $.ajax({
                type:'get',
                url:'{!!URL::to('findProductName')!!}',
                data:{'id':cat_id},
                success:function(data){
                    console.log('success');

                    //console.log(data);

                    //console.log(data.length);
                    op+='<option value="0" selected disabled>chose taille</option>';
                    for(var i=0;i<data.length;i++){
                            op+='<option value="'+data[i].id+'"> -Taille: '+data[i].designationTail+' -QuantiteStock: '+data[i].pivot.qteStock+'</option>';
                        }

                div.find('.taillename').html(" ");
                div.find('.taillename').append(op);
                },
                error:function(){

                }
        });
        });


});

</script>
@endsection