@extends('store.storeLayout')
@section('content')
<script src="{{asset('js/lib/jquery.js')}}"></script>
<script src="{{asset('js/dist/jquery.validate.js')}}"></script>

<link type="text/css" rel="stylesheet" href="{{asset('css/style_for_quantity.css')}}" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"--> 
<link type="text/css" href="{{ asset('js/jquery-ui.css') }}" rel="stylesheet"> 

<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></!--script -->

<script type="text/javascript" src="{{asset('js/jquery-ui.min.js')}}"></script>

<script type="text/javascript" src="{{asset('js/jquery.signature.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{asset('css/jquery.signature.css')}}">

<script type="text/javascript" src="{{ asset('js/jquery.ui.touch-punch.min.js') }}"></script>

<style>
    .kbw-signature { width: 100%; height: 200px;}
    #sig canvas{
        width: 100% !important;
        height: auto;
    }
</style>
<style>
label.error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding:1px 20px 1px 20px;
}

    .rTable {
        
    display: block;
    width:100%;
    
}
.rTableHeading, .rTableBody, .rTableFoot, .rTableRow{
    clear: both;
}
.rTableHead, .rTableFoot{
    background-color: #DDD;
    font-weight: bold;
}
.rTableCell, .rTableHead {
    
    float: left;
    overflow: hidden;
    padding: 3px 1.8%;
    width:20%;
    
}
.rTable:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

</style>             
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!-- SECTION -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->

            <!-- Order Details -->
            <div class="col-md-5 order-details" style="width: 100%;">
                <div class="section-title text-center">
                    <h3 class="title">Votre Commande</h3>
                </div>
                <div id="order_summary" class="order-summary">
                   
                    @if($all != null)
                    <div class="rTable">
                        <div class="rTableRow">
                            <div class="rTableHead"><strong>SUPPRIMER</strong></div>
                            <div class="rTableHead"><strong>PRODUIT</strong></div>
                            <div class="rTableHead"><strong>QUANTITE</strong></div>
                            <div class="rTableHead"><strong>PRIX/24MOIS</strong></div>
                        </div>
                        @foreach($all as $c)
                            @foreach($prod as $p)
                                @if($c[0]==$p->id)
                                <div  class="rTableRow" id="deleteItem_{{$c[3]}}">
                                
                                <div class="rTableCell">  <button type="button" id="delete_item"  value={{$c[3]}} name="delete_item"  class="delete_item">X</button></div>
                                    <div class="rTableCell"><img src="uploads/products/{{$p->id}}/{{$p->image_name}}" height="50px" width="50px"> {{$p->name}}</div>
                                    
                                    <!--quantity-->
                                    <!--c[1] is pid and c[3] is order serial-->
                                    <div class="rTableCell">
                                    <button type="button" id="sub" value={{$p->id}} data-rel={{$c[3]}} data-rel2={{$p->discount}} class="sub">-</button>   
                                    <input type="number"  id="quantity" style="width: 2.5em;" name={{$p->id}} value={{$c[1]}} min="1" max="100" readonly/>
                                    <button type="button" id="add" value={{$p->id}} data-rel={{$c[3]}} data-rel2={{$p->discount}}  class="add">+</button></div>
                                        
                                    <!--                            -->
                                    <div class="rTableCell"><div id="individualPrice_{{$c[3]}}">
                                        @php
                                            $tot =$p->discount* $c[1];
                                            echo $tot;
                                        @endphp
                                        FCFA
                                    </div></div>
                                </div>
                                    @break
                                @endif
                            @endforeach 
                        @endforeach 
                    
                    </div>
                    <div class="order-col">
                        <div>Livraison</div>
                        <div><strong>GRATUIT</strong></div>
                    </div>
                    <div class="order-col">
                        <div><strong>TOTAL</strong></div>
                        <div ><strong class="order-total" id="totalCost">{{Session::get('price')}} FCFA</strong></div>
                    </div>
                    @else
                        <div class="order-col">
                            <h1>Votre Panier est vide !</h1>
                        </div>
                    @endif
                    
                </div>
                <div class="payment-method">
                    <div class="input-radio">
                        <input type="radio" name="payment" id="payment-2" checked>
                        <label for="payment-2">
                            <span></span>
                            Paiement: Virement bancaire
                        </label>
                        <div class="caption">
                            <p>Nous vous livreront dès que la banque validera votre demande.</p>
                        </div>
                    </div>
                </div>
                @if(session('user'))
                    @if($all != null)
                    <center> <form method="post" name="cart">
                            {{csrf_field()}}
                            <input type="submit" id="confirm_order"  name="order" class="primary-btn order-submit" value="Confirm order">
                        </form></center>

                    @else
                        <a href="{{route('user.home')}}"><input type="button"  class="primary-btn order-submit" value="Order Now"></a>
                    @endif
                
                @else
                 @if(!session('user'))
        <div class="row">
            <form method="post" id="signupForm">
                {{csrf_field()}}
                <div class="col-md-7">
                    <!-- Billing Details -->
                    <div class="billing-details">
                        <div class="section-title">
                            <h3 class="title">FORMULAIRE DE SOUSCRIPTION.</h3>
                        </div>
                        <div class="caption">
                                <p>Nous vous livreront dès que la banque validera votre demande.</p>
                        </div>
                        <br /> 
                        <h5> INFORMATION DU CLIENT </h5> 
                        <br /> 
                        <div class="order-details"> 
                        
                                <div class="form-group">
                                    <h5>Votre Nom complet</h5>
                                    <input class="input" type="text" id="name" name="name" placeholder="Votre nom complet" value="{{ old('name') }}">
                                </div>
                                <div class="form-group">
                                    <h5>Votre Numéro de Téléphone</h5>
                                    <input class="input" type="tel" name="tel" id="tel" placeholder="Telephone" value="{{ old('tel') }}">
                                </div>
                                <div class="form-group">
                                    <h5>Adresse Email ( Non Requis )</h5>
                                    <input class="input" type="text" name="email" id="email" placeholder="Email" value="{{ old('email') }}">
                                </div>
                                <div class="form-group">
                                    <h5>Ville</h5>
                                    <input class="input" type="text" name="ville" id="ville" placeholder="Ville" value="{{ old('ville') }}">
                                </div>
                                <div class="form-group">
                                    <h5>Votre Adresse</h5>
                                    <input class="input" type="text" name="address" id="address" placeholder="Addresse" value="{{ old('address') }}">
                                </div>
                        
                        </div>

                        <br />  <br /> 
                        <h5> COORDONNEES BANCAIRES </h5> 
                        <br /> 
                        <div class="order-details"> 
                            <div class="form-group">
                                <h5>Banque</h5>
                                <select class="input" name="banque" id="banque">
                                    <option selected>Selectionnez votre banque </option>
                                    <option value="CBAO"> CBAO </option>
                                    <option value="CMS"> CMS </option>
                                    <option value="BHS"> BHS </option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h5>Votre numéro de compte bancaire</h5>
                                <input class="input" type="text" name="ncb" id="ncb" placeholder="Numéro de compte" value="{{ old('ncb') }}">
                            </div>
                            <div class="form-group">
                                <h5>Nom de votre gestionnaire de compte</h5>
                                <input class="input" type="text" name="gdc" id="gdc" placeholder="Nom Complet" value="{{ old('address') }}">
                            </div>

                            <div class="row">
                                <div class="col-lg-12">
                                    <h5>Région</h5>
                                    <select class="input" name="category" id="category">
                                        <option selected>Selectionnez une région</option>
                                        @foreach($regions as $r)
                                            <option value="{{ $r->id }}"> {{ $r->region }} </option>
                                        @endforeach
                                    </select>
                                
                                    <h5>Agence</h5>
                                    <select class="browser-default custom-select input" name="subcategory" id="subcategory">
                                    
                                    </select>
                                </div>
                            </div>
                        </div>
                        <br /> 
                        <div class="row"> 
                            <div class="col-md-12">
                                <h5 class="" for="">Votre Signature:</h5>
                                <br/>
                                <div id="sig"></div>
                                <br/>
                                <button id="clear" class="btn btn-danger btn-sm">Effacer la signature Signature</button>
                                <textarea id="signature64" name="signed" style="display: none" value="{{ old('signed') }}"></textarea>
                                <br/>
                            </div>
                        </div>      
                        <br/> 
                        <input type="submit" name="signup" class="primary-btn order-submit" value="Confirmer">
                
                    </div>
                    <!-- /Billing Details -->
                </div>
            </form>
                </div>      

                <script type="text/javascript">
                        var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
                        $('#clear').click(function(e) {
                        
                            e.preventDefault();
                            sig.signature('clear');
                            $("#signature64").val('');
                        });
                    </script>
                    
                @endif  
                        
                    @endif
                    
                <!-- /Order Details -->
            
            </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /SECTION -->

<script>
    
   //TO DO: ajax will take place
    
    $('.add').click(function () {

    var url="{{route('user.editCart')}}";
    var product_id= $(this).val(); 
    $(this).prev().val(+$(this).prev().val() + 1);
    var x=$(this).prev().val(); 
    var token=$("input[name=_token]").val();
    var order_serial=this.getAttribute('data-rel');
    var product_price=this.getAttribute('data-rel2');


    $.ajax({
            type:'post',
            url:url,
            dataType: "JSON",
            async: false,
            data:{pid: product_id, newQ:x, oSerial:order_serial, _token: token},
            success:function(msg)
            {
                document.getElementById("individualPrice_"+order_serial).innerHTML=x*product_price+" FCFA";
                document.getElementById("totalCost").innerHTML = msg[2]+" FCFA";
            }
            });
    });
    $('.sub').click(function () {
        
        var url="{{route('user.editCart')}}";
        var product_id= $(this).val();
        var order_serial=this.getAttribute('data-rel');
        var product_price=this.getAttribute('data-rel2');

        if ($(this).next().val() > 1) 
        {
            $(this).next().val(+$(this).next().val() - 1);
            var x=$(this).next().val();
            var token=$("input[name=_token]").val();
            
            $.ajax({
                type:'post',
                url:url,
                dataType: "JSON",
                async: false,
                data:{pid: product_id, newQ:x, oSerial:order_serial, _token: token},
                success:function(msg)
                {
                    document.getElementById("individualPrice_"+order_serial).innerHTML=x*product_price+" FCFA";
                    document.getElementById("totalCost").innerHTML = msg[2]+" FCFA";
                }
            });
        }
    });
    
    $('.delete_item').click(function () {
        var url="{{route('user.deleteCartItem')}}";
        var serial= $(this).val();   //serial is the forth element of sale coloumn
        var token=$("input[name=_token]").val();
        var id_holder="deleteItem_"+serial;
        $.ajax({
                type:'post',
                url:url,
                dataType: "JSON",
                async: false,
                data:{serial:serial, _token: token},
                success:function(msg)
                {
                    if(msg=="Empty")
                        {
                        document.getElementById("order_summary").innerHTML = "<div class='order-col'><h1>Votre Panier est vide !</h1></div>";
                        document.getElementById("confirm_order").style.visibility = "hidden";
                        }
                   
                    //$("#deleteItem_".$p->id").load(location.href+" #refresh_div","");
                    document.getElementById(id_holder).innerHTML  = "";
                    document.getElementById("totalCost").innerHTML = msg[2];
                }
            });
    });
	
    
    //validation
    
    $(document).ready(function() {
		// validate the comment form when it is submitted
		//$("#commentForm").validate();

		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				name: "required",
				email: {
					required: true,
					email: true
				},
                address: "required",
                city: "required",
                zip: {
					required: true,
					number: true
				},
                tel: "required",
				
			},
			messages: {
				name: "Please enter your Fullname",
				email: "Please enter a valid email address",
                address: "Please enter your Address",
                city: "Please enter your City",
                address: "Please enter your Address",
				zip: {
					required: "Please enter Zipcode",
					number: "Invalid Zipcode"
				},
                tel: "Please enter your Phone number",
				pass: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long"
				},
				confirm_password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long",
					equalTo: "Please enter the same password as above"
				}
				
			}
            
		});

		
	});
   
</script>
<script>
function myFunction() {
    //var token={{ csrf_token() }};
    var email=$("#email").val();
    var token=$("input[name=_token]").val();
    var url="{{route('user.signup.check_email')}}";
    

            $.ajax({
                type:'post',
                url:url,
                dataType: "JSON",
                async: false,
                data:{email: email, _token: token},
                success:function(msg){
                        
                         
                        if(msg == "1")
                            {
                                document.getElementById("for_duplicate-email").innerHTML = "<label class='error'>This Email Address is Already taken</label>";                                           
                            }
                    else
                        {
                            document.getElementById("for_duplicate-email").innerHTML = "";

                        }
                    }
             });
    
}
</script> 

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(document).ready(function () {
        
        $('#category').on('change',function(e) {
            
            var cat_id = e.target.value;
            
            $.ajax({
                
                url:"{{ route('user.region.agence') }}",
                type:"POST",
                data: { 
                    cat_id: cat_id,
                    '_token': "{{ csrf_token() }}"
                },
                    
                success:function (data) {
                    console.log(data); 
                $('#subcategory').empty();
                $.each(data.subcategories,function(index,subcategory){
                    
                    $('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.agence+'</option>');
                }) 
                }
            })
        });
    });
</script>
@endsection