@extends('layouts.default')

@section('content')
  <div class="jumbotron jumbotron-sm jumbotron_contact jumbotron-sm-contact">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <h1 class="h1 contact_h1 " >
                   <i class="fa fa-money"></i> {{Lang::get('messages.orders')}} </h1>
            </div>
        </div>
    </div>
</div>

 @include('notifications')

<div class="container">

@if($saleProduct->isEmpty())
  <p class="lead text-error">{{Lang::get('messages.no_order_yet')}}</p>
  @else


<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>{{Lang::get('messages.order')}} ID</th>
      <th>{{Lang::get('messages.title')}}</th>
      <th>{{Lang::get('messages.price')}}</th>
      <th>{{Lang::get('messages.purchase_date')}}</th>
      <th>{{Lang::get('messages.status')}}</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    @foreach($saleProduct as $key=>$sale)
    <tr>

      <td>{{$key}}</td>
      <td>{{$sale->id}}</td>
      <td>{{$sale->product->name}}</td>
      <td>${{$sale->total_price}}</td>
      <td>{{$sale->created_at}}</td>


      <td>

        <span class="label label-warning order_status_label-{{$sale->id}} @if($sale->status==0)active @else hide @endif" id="status_pending-{{$sale->id}}" ><i class="fa fa-spinner fa-spin"></i> {{Lang::get('messages.pending')}}</span>
        <span class="label label-info order_status_label-{{$sale->id}} @if($sale->status==1)active @else hide @endif" id="status_preparing-{{$sale->id}}" ><i class="fa fa-gift"></i> {{Lang::get('messages.preparing_order')}}</span>
        <span class="label label-success order_status_label-{{$sale->id}} shipped_status @if($sale->status==2)active @else hide @endif" id="status_shipped-{{$sale->id}}" ><span class="glyphicon glyphicon-ok"></span> {{Lang::get('messages.shipped')}}</span>
        <span class="order_status_label-{{$sale->id}} @if($sale->status==2)active @else hide @endif" id="tracking-{{$sale->id}}"><strong>{{Lang::get('messages.tracking_number')}}: </strong> <span class="new_tracking-{{$sale->id}}">{{$sale->tracking_number}}</span></span>
        <span class="label label-success order_status_label-{{$sale->id}} @if($sale->status==3)active @else hide @endif" id="status_refund-{{$sale->id}}" ><i class="fa fa-undo"></i> {{Lang::get('messages.refund')}}</span>



      </td>

      <td>

        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-angle-double-right"></i> {{Lang::get('messages.change_order_status')}}<span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#" class="pending order_status" rel="{{$sale->id}}" rel2="0" rel3="pending">{{Lang::get('messages.pending')}}</a></li>
            <li><a href="#" class="preparing order_status" rel="{{$sale->id}}" rel2="1" rel3="preparing"> {{Lang::get('messages.preparing_order')}}</a></li>
            <li><a href="#" data-toggle="modal" data-target="#shippingModal-{{$sale->id}}" class="shipped order_status" rel="{{$sale->id}}" rel2="2" rel3="shipped">{{Lang::get('messages.shipped')}}</a
            <li><a href="#" class="refund order_status" rel="{{$sale->id}}" rel2="3" rel3="refund"> {{Lang::get('messages.refund')}}</a></li></li>
          </ul>
        </div>
      </td>
    </tr>

    <!-- Modal -->
    <div class="modal fade" id="shippingModal-{{$sale->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">{{Lang::get('messages.shipping_information')}}</h4>
          </div>
          <div class="modal-body">

            <form role="form">
              <div class="form-group">
                <label for="exampleInputPassword1">{{Lang::get('messages.shipping_address')}}</label>
                <p>{{$sale->address}}</p>
              </div>

              <div class="form-group">
                <label>{{Lang::get('messages.tracking_number')}}</label>
                <input type="text" class="form-control tracking_number-{{$sale->id}}"  placeholder="{{Lang::get('messages.tracking_number')}}" value="{{$sale->tracking_number}}">
              </div>


            </form>

            <p class="lead text-danger tracking_fail" style="display:none;">{{Lang::get('messages.tracking_number_missing')}}</p>
            <p class="lead text-success tracking_success" style="display:none;">{{Lang::get('messages.tracking_successfully_added')}}</p>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{lang::get('messages.close')}}</button>
            <button type="submit"  class="btn btn-primary shippingTracking-{{$sale->id}}" rel="{{$sale->id}}">{{lang::get('messages.send')}}</button>
          </div>
        </div>
      </div>
    </div>



    @endforeach


  </tbody>
</table>
{{ $saleProduct->links(); }}
@endif
</div>

@stop


@section('footer_js')
<script type="text/javascript">

 $(document).ready(function () {

     $('a.order_status').click(function (e) {
         e.preventDefault();
         var ForwappURL = '{{URL::route("qrpay-user_dashboard_order_status")}}';
         var order_id = $(this).attr("rel");
         var order_role = $(this).attr("rel3");

         if ($(this).hasClass('shipped')) {

             $('button.shippingTracking-' + order_id).click(function (e) {
                 e.preventDefault();
                 var new_tracking = $('.tracking_number-' + order_id).val();


                 if ($('.tracking_number-' + order_id).val()) {
                     $.ajax({
                         url: ForwappURL,
                         type: 'POST',
                         data: {
                             order_id: order_id,
                             order_role: order_role,
                             tracking_number: new_tracking
                         },
                         success: function (data) {
                          console.log('tracjubg gitti')

                             if (data == 'true') {
                                 $('p.tracking_fail').fadeOut('slow', function () {

                                     $('p.tracking_success').fadeIn('slow');
                                     setInterval(function () {
                                         $('#shippingModal-' + order_id).modal('hide')
                                     }, 500);


                                      $('span.order_status_label-' + order_id+'.active').removeClass('active').addClass('hide');
                                      $('span#status_' + order_role + '-' + order_id).removeClass('hide').addClass('active');
                                       $('span#tracking'+ '-' + order_id).removeClass('hide').addClass('active');
                                        $('span.new_tracking-' + order_id).html(new_tracking);

                                 });


                             } else if (data == 'false') {
                                 $('p.tracking_fail').fadeIn('slow');
                             }
                         },
                     });
                 } else {
                     $('p.tracking_fail').fadeIn('slow');
                 }
             });

         } else {

             $.ajax({
                 url: ForwappURL,
                 type: 'POST',
                 dataType:'json',
                 data: {
                     order_id: order_id,
                     order_role: order_role
                 },
                 success: function (data) {

                     if (data == true) {

                         $('span.order_status_label-' + order_id+'.active').removeClass('active').addClass('hide');
                         $('span#status_' + order_role + '-' + order_id).removeClass('hide').addClass('active');

                     } else {
                         return false;
                     }
                 }
             });
         }
     });
});

</script>

@stop