@extends('layouts.app')
@section('content')
  <div class="main-content">
    <!-- Header -->
    <div class="header bg-gradient-danger pb-8 pt-5 pt-md-6">
       <div class="container-fluid">
          <div class="header-body">
             <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                   <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                      <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                         <li class="breadcrumb-item"><a href="{{url('home')}}"><i class="fas fa-home"></i></a></li>
                         <li class="breadcrumb-item"><a href="{{url('china_shipment')}}">China Shipment</a></li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
       </div>
    </div>
    <!-- Page content -->
    <div class="container-fluid mt--7">
      <div class="row">
        <div class="col-lg-12">
          <div class="card bg-secondary shadow">
            <div class="card-header bg-white">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="mb-0">China Shipment</h4>
                </div>
              </div>
            </div>
            <div class="card-body">
                <form method="POST" name="myform" id="myform" action="{{ url('china_shipment/saveorder') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <input type="hidden" name="order_id" id="order_id">
                    <input type="hidden" name="order_shipping_cost" id="order_shipping_cost">
                    @if(Session::has('message'))
                    <div class="alert {{ Session::get('alert-class', 'alert-info') }}" role="alert">
                        {{ Session::get('message') }}
                    </div>
                    @endif
                    <div class="card-body">  
                          <div class="row">
                           <div class="col-lg-3">
                              <div class="form-group">
                                <label class="form-control-label">City:&nbsp;&nbsp;</label>
                                <input type="radio" name="city" id="city" class="opt" value="Guangzhou" required> <label>Guangzhou</label> &nbsp;&nbsp;
                                <input type="radio" name="city" id="city" class="opt" value="Yiwu"> <label>Yiwu</label>
                              </div>
                            </div> 
                          </div>   

                          <div class="row">
                            <div class="col-lg-3">
                              <div class="form-group">
                                <label class="form-control-label">Shipment:</label>
                                <input type="radio" name="shipment" id="shipment" class="opt" value="air" required> <label>Air</label> &nbsp;&nbsp;
                                <input type="radio" name="shipment" id="shipment" class="opt" value="sea"> <label>Sea</label>
                              </div>
                            </div> 
                             <div class="col-lg-3">
                              <div class="form-group">
                                <label class="form-control-label">Type:</label>
                                <input type="radio" name="type" id="type" value="ship4me" class="opt typ" required> <label>Ship4Me
                                <input type="radio" name="type" id="type" value="buy4me" class="opt typ" required> <label>Buy4Me
                                </label>                                
                              </div>
                            </div>  
                            <div class="col-lg-6">
                              <div class="form-group">
                                <label id="ship4me_instructions" style="display: none;"><h5>Ship4me Instructions</h5><br/>{{@$setting->ship4me_instructions}}</label>
                                <label id="buy4me_instructions" style="display: none;"><h5>Buy4me Instructions</h5><br/>{{@$setting->buy4me_instructions}}</label>
                              </div>
                            </div> 
                          </div>                 
                          
                          <table class="table">
                            <thead>
                              <tr>
                                <th>Product Name</th>
                                <th>Product URL</th>
                                <th>Value(RMB)</th>
                                <th>Courier Detail</th>
                                <th>No. of Parcel</th>
                                <th>Remark</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td><input type="text" name="product_name[]" class="form-control"></td>
                                <td><input type="text" name="product_url[]" class="form-control"></td>
                                <td><input type="text" name="product_price[]" class="form-control"></td>
                                <td><input type="text" name="courier_detail[]" class="form-control"></td>
                                <td><input type="text" name="no_of_parcel[]" class="form-control"></td>
                                <td><input type="text" name="remark[]" class="form-control"></td>
                              </tr>
                              <tr>
                                <td><input type="text" name="product_name[]" class="form-control"></td>
                                <td><input type="text" name="product_url[]" class="form-control"></td>
                                <td><input type="text" name="product_price[]" class="form-control"></td>
                                <td><input type="text" name="courier_detail[]" class="form-control"></td>
                                <td><input type="text" name="no_of_parcel[]" class="form-control"></td>
                                <td><input type="text" name="remark[]" class="form-control"></td>
                              </tr>
                              <tr>
                                <td><input type="text" name="product_name[]" class="form-control"></td>
                                <td><input type="text" name="product_url[]" class="form-control"></td>
                                <td><input type="text" name="product_price[]" class="form-control"></td>
                                <td><input type="text" name="courier_detail[]" class="form-control"></td>
                                <td><input type="text" name="no_of_parcel[]" class="form-control"></td>
                                <td><input type="text" name="remark[]" class="form-control"></td>
                              </tr>                              
                            </tbody>
                          </table>
                          <table class="table inc">                              
                          </table>

                          <table class="table">
                              <tr>
                                <td><button type="button" class="btn btn-danger btn-sm" name="addmore" id="append">Add More</button></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                              </tr>     
                          </table>

                          <div class="container">
                              <div class="row">
                                <div class="col-sm">
                                    <div class="card-header">
                                        <h4 class="mb-0">
                                            Billing details                                 
                                        </h4>
                                    </div>
                                    <div class="card-body" style="background: #ffffff;">
                                        <div class="form-group">
                                            <label for="concept" class="col-sm-3 control-label">Name</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" id="order_billing_name" name="order_billing_name" value="{{@$user_details->billing_name}}" required>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="description" class="col-sm-3 control-label">Address</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" id="order_billing_address" name="order_billing_address" value="{{@$user_details->billing_address}}" required>
                                            </div>
                                        </div> 
                                        <div class="form-group">
                                            <label for="amount" class="col-sm-3 control-label">Postal Code</label>
                                            <div class="col-sm-12">
                                                <input type="number" class="form-control" id="order_billing_postal_code" name="order_billing_postal_code" value="{{@$user_details->billing_postal_code}}" required>
                                            </div>
                                        </div>
                                         <div class="form-group">
                                            <label for="status" class="col-sm-3 control-label">Email</label>
                                            <div class="col-sm-12">
                                                 <input type="email" class="form-control" id="order_billing_email" name="order_billing_email" value="{{@$user_details->billing_email}}" required>
                                            </div>
                                        </div> 
                                        <div class="form-group">
                                            <label for="status" class="col-sm-3 control-label">Contact No.</label>
                                            <div class="col-sm-12">
                                                 <input type="number" class="form-control" id="order_billing_contact_no" name="order_billing_contact_no" value="{{@$user_details->billing_contact_no}}" required>
                                            </div>
                                        </div>    
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <div class="card-header">
                                        <h4 class="mb-0">
                                           Shipping details
                                        </h4>
                                    </div>
                                    <div class="card-body" style="background: white;">
                                        <div class="form-group">
                                            <label for="concept" class="col-sm-3 control-label">Name</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" id="order_shipping_name" name="order_shipping_name" value="{{@$user_details->shipping_name}}" required>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="description" class="col-sm-3 control-label">Address</label>
                                            <div class="col-sm-12">
                                                <input type="text" class="form-control" id="order_shipping_address" name="order_shipping_address" value="{{@$user_details->shipping_address}}" required>
                                            </div>
                                        </div> 
                                        <div class="form-group">
                                            <label for="amount" class="col-sm-3 control-label">Postal Code</label>
                                            <div class="col-sm-12">
                                                <input type="number" class="form-control" id="order_shipping_postal_code" name="order_shipping_postal_code" value="{{@$user_details->shipping_postal_code}}" required>
                                            </div>
                                        </div>
                                         <div class="form-group">
                                            <label for="status" class="col-sm-3 control-label">Email</label>
                                            <div class="col-sm-12">
                                                 <input type="email" class="form-control" id="order_shipping_email" name="order_shipping_email" value="{{@$user_details->shipping_email}}" required>
                                            </div>
                                        </div> 
                                        <div class="form-group">
                                            <label for="status" class="col-sm-3 control-label">Contact No.</label>
                                            <div class="col-sm-12">
                                                 <input type="number" class="form-control" id="order_shipping_contact_no" name="order_shipping_contact_no" value="{{@$user_details->shipping_contact_no}}" required>
                                            </div>
                                        </div>    
                                    </div>
                                </div>
                              </div>
                            </div>

                        <br/>
                        <div align="center"><input type="submit" name="submit" value="Submit" class="btn btn-primary"></div>    

                    </div>
                </form>    
            </div>
          </div>
        </div>
      </div>
    </div>

<style>
input { font-size: 13px !important; height: 35px !important; }
label { font-size: 13px !important; }
select { font-size: 13px !important; height: 40px !important; }
.opt { height: auto !important; }
</style>

<script type="text/javascript">
$(document).ready( function () {
    $("#append").click( function() { 
        $(".inc").append('<tr>\
            <td><input type="text" name="product_name[]" class="form-control"></td>\
            <td><input type="text" name="product_url[]" class="form-control"></td>\
            <td><input type="text" name="product_price[]" class="form-control"></td>\
            <td><input type="text" name="courier_detail[]" class="form-control"></td>\
            <td><input type="text" name="no_of_parcel[]" class="form-control"></td>\
            <td><input type="text" name="remark[]" class="form-control"></td>\
          </tr>');
        return false;
    });

    $(".typ").click( function() { 
        var type = this.value;
        if(type=='buy4me') {
          $('#buy4me_instructions').show();
          $('#ship4me_instructions').hide();
        } else {
          $('#buy4me_instructions').hide();
          $('#ship4me_instructions').show();
        }
    });
});
</script>
@endsection