@extends('layouts.app')
@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/ui/jquery-ui.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<style>
.pagination li{
    display: inline-block;
    padding:5px 15px;
    background: #f0f0f0;
}
.pagination .active{
    background: #0B559F;
    color: #fff;
}
</style>
@endsection

<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ isset($title)?$title:'Reports' }}</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                </div>
            </div>
            <div class="card-body collapse in">
                <form method="GET" action="{{route('posSales')}}">
                    <div class="card-block">
                        <div class="row">
                            
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="text" class="form-control datepicker" name="from_date" value="{{Request::input('from_date')}}" placeholder="From Date" />
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control datepicker" name="to_date" value="{{Request::input('to_date')}}" placeholder="To Date" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <select name="order" class="form-control select2">
                                    <option value="">Order Type</option>
                                    <option @if(Request::input('order') == 'dinein') selected @endif value="dinein">DineIn</option>
                                    <option @if(Request::input('order') == 'delivery') selected @endif value="delivery">Delivery</option>
                                    <option @if(Request::input('order') == 'takeaway') selected @endif value="takeaway">Takeaway</option>
                                    <option @if(Request::input('order') == 'drive-thru') selected @endif value="drive-thru">DriveThru</option>
                                    <option @if(Request::input('order') == 'complimentary') selected @endif value="complimentary">Complimentary</option>
                                    <option @if(Request::input('order') == 'staff') selected @endif value="staff">Staff</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select name="payment" class="form-control select2">
                                    <option value="">Payment Type</option>
                                    <option @if(Request::input('payment') == 'cash') selected @endif value="cash">Cash</option>
                                    <option @if(Request::input('payment') == 'online') selected @endif value="online">Online</option>
                                    <option @if(Request::input('payment') == 'cc') selected @endif value="cc">CC</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <button type="submit" name="submit" value="pos_sales_filters" class="btn btn-success">Filter</button>
                                <a href="{{route('posSales')}}" class="btn btn-info">Clear</a>
                            </div>

                        </div>


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

<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
    </div>

    @if(session()->has('message'))<div class="alert alert-success">{{ session()->get('message') }}</div>@endif
    @if(session()->has('error'))<div class="alert alert-danger">{{ session()->get('error') }}</div>@endif

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Customer</th>
                        <th>Date Time</th>
                        <th>Type</th>
                        <th>Payment</th>
                        <th>Tax</th>
                        <th>Discount</th>
                        <th>SubTotal</th>
                        <th>Total</th>
                        <th>User</th>
                        <th>View</th>
                    </tr>
                </thead>
                <tbody>
                    @if(isset($orders) && !empty($orders))
                        @foreach($orders as $row )
                            <tr>
                                <td>{{$row->id}}</td>
                                <td><a href="{{route('customerProfile',['id'=>$row->customer_id])}}">{{ucwords($row->customer_name)}}</a></td>
                                <td>
                                {{ date("j-F-Y", strtotime($row->created_at)) }}
                                <br>
                                {{ date("h:i:s A", strtotime($row->created_at)) }}    
                                </td>
                                <td>{{ucwords($row->order_type)}}</td>
                                <td>{{ucwords($row->payment_type)}}
                                    <br>
                                    @if($row->order_type == 'delivery')
                                    @if($row->payment_status == 1)
                                        <button class="btn btn-success btn-sm paymentStatus status{{$row->id}}" data-id="{{$row->id}}" data-status="{{$row->payment_status}}">Paid</button>
                                    @else
                                        <button class="btn btn-danger btn-sm paymentStatus status{{$row->id}}" data-id="{{$row->id}}" data-status="{{$row->payment_status}}">Unpaid</button>  
                                    @endif
                                    @endif
                                </td>
                                <td>{{$row->tax}}</td>
                                <td>{{$row->discount_value}}</td>
                                <td>{{$row->subtotal}}</td>
                                <td>{{$row->total}}</td>
                                <td>{{ucwords($row->user)}}</td>
                                <td width="12%">
                                    <a class="text-info modal_order_detail" id="{{$row->id}}" data-toggle="modal"><i class="icon-eye4"></i></a>
                                    <a class="text-primary reprint" data-id="{{$row->id}}" data-toggle="modal" data-target="#rePrintModal" href="javascript:void(0)"><i class="icon-print"></i></a>
                                    <a class="text-danger deleteorder" data-id="{{$row->id}}" data-toggle="modal" data-target="#orderDeleteModal" href="javascript:void(0)"><i class="icon-trash-o"></i></a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
            @if(isset($orders) && !empty($orders))
            {{$orders->appends($_GET)->links()}}
            @endif
        </div>
    </div>
</div>

@include('admin.orders.online_orders_modal')

<!-- rePrintModal -->
<div class="modal fade" id="rePrintModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
      
    <form method="get" action="{{route('posPrintOrder')}}">
    
    <input type="hidden" name="id" id="print_order_id" value="" />
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Enter Key to re-print</h4>
      </div>
      <div class="modal-body">

        <div class="form-group row">
            <div class="col-sm-12">
                <input type="password" name="reprint_key" placeholder="Reprint Key" id="reprint_key" class="form-control" autocomplete="off" required>
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
    </form>
  </div>
</div>

<!-- orderDeleteModal -->
<div class="modal fade" id="orderDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
      
    <form method="get" action="{{route('deleteOrder')}}">
    
    <input type="hidden" name="id" id="delete_order_id" value="" />
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Enter Key to delete the order</h4>
      </div>
      <div class="modal-body">

        <div class="form-group row">
            <div class="col-sm-12">
                <input type="password" name="order_delete_key" placeholder="Order Delete Key" id="order_delete_key" class="form-control" autocomplete="off" required>
            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
    </form>
  </div>
</div>

@section('js')
<script src="{{asset('assets/admin/vendors/js/tables/jquery.dataTables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/tables/datatables/datatable-advanced.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/core/libraries/jquery_ui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/ui/jquery-ui/date-pickers.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

    $(".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }).val();

    $( ".reprint" ).click(function() {
        $('#print_order_id').val($(this).data("id"));
    });
    $( ".deleteorder" ).click(function() {
        $('#delete_order_id').val($(this).data("id"));
    });
    
       
    /*
    | modal_order_detail
    |--------------------------------------------------------------------------
    */
    $('body').on('click', '.modal_order_detail', function (e) {
        $.ajax({
            type:'POST',
            url:"{{ route('getOrderDetailAjax') }}",
            data: {id: $(this).attr('id'), _token: $('meta[name="csrf-token"]').attr('content')},
            success:function (result) {
                var obj = result;
            
                $('#order_product').html('');
        
                $("#restaurant_name").html(obj['restaurant_name']);
                $("#phone").html(obj['phone']);
                $("#restaurant_address").html(obj['restaurant_address']);
                $("#order_id").html(obj['order_id']);
                $("#order_date").html(obj['order_date']);
                $("#platform").html(obj['platform']);            
                $("#customer_name").html(obj['customer_name']);
                $("#customer_phome").html(obj['customer_phome']);
                $("#customer_address").html(obj['customer_address']);
                //$("#delivery_charges").html(obj['delivery_charges']);
                $("#discount").html(obj['discount']);
                
                var temp_url_print_order = '{{ route("printOrder",["id"=>""]) }}';
                var url_print_order = temp_url_print_order+obj['order_id'];            
                $("#print").attr('href',url_print_order);

                if(obj['platform']=='web'){
                    $("#platform").html('<i class="icon-globe"> </i>Website');
                }else if(obj['platform']=='android'){
                    $("#platform").html('<i class="icon-android2"> </i> Android');
                }else if(obj['platform']=='ios'){
                    $("#platform").html('<i class="icon-apple"> </i> iOS');
                }
        
                $("#fdb_user").html(obj['customer']);
                $("#customer_address").attr("address", obj['customer_address']);


                $("#subtotal").html(obj['subtotal']);  

                if(obj['tax'] == null || obj['tax'] == 0){
                    $(".tax_tr").hide();
                }else{
                    $("#tax").html(obj['tax']);
                    $("#tax_rate").html(obj['tax_rate']);
                }
                
                
                $("#delivery_charges").html(obj['delivery_charges']);
                $("#total").html(obj['total']);

                $(obj['order_detail']).each(function (iIndex, data) {                
                    var order_detail = "";
                    order_detail += "<tr>";
                    order_detail += "<td>";
                    order_detail += data.item_name+"<span>("+data.price_title+")</span></br>";
                    order_detail+= "</td>";
                    order_detail += "<td style='text-align:right'>"+data.price+"</td>";
                    order_detail += "<td style='text-align:right'>"+data.quantity+"</td>";
                    order_detail += "<td style='text-align:right'>"+data.item_total_price+"</td>";
                    order_detail += "</tr>";
                    
                    $('#order_product').append(order_detail);
                });

                //special_instructions
                if(obj['special_instructions'] && obj['special_instructions'] !=""){
                    $('#special_instructions_div').show().html(obj['special_instructions']);
                }else{
                    $('#special_instructions_div').empty().hide();
                }
                //feedback
                if(obj['feedback_flag'] == 1){
                    $('#y_feedback').show();
                    $('#n_feedback').hide();
                    $('select[name=quality]').val(obj['feedback']['quality']);
                    $('select[name=service]').val(obj['feedback']['service']);
                    $('select[name=value]').val(obj['feedback']['value']);
                    $('#f_feedback').val(obj['feedback']['feedback']);
                }else{
                    $('#n_feedback').show();
                    $('#y_feedback').hide();
                }
                $("#OrderDetailModal").modal('show');
            }

        });
    });

    $(".paymentStatus").on('click', function (event) {
        event.preventDefault();
        var id = $(this).data("id");
        var status = $(this).data("status");
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        $.ajax({
            type: 'POST',
            url: '{{route("paymentStatus")}}',
            data: {
                status: status,
                id: id,
                _token: CSRF_TOKEN
            },
            beforeSend: function () {
                $('.status' + id).attr('disabled', true).html('<i class="icon-spinner12"></i>');
            },
            success: function (response) {
                if (response == 0) {
                    $(".status" + id).removeClass("btn-success");
                    $(".status" + id).addClass("btn-danger");
                    $(".status" + id).data("status", 0);
                    $(".status" + id).html("Unpaid");
                    $(".status" + id).attr('disabled', false);
                } else {
                    $(".status" + id).removeClass("btn-danger");
                    $(".status" + id).addClass("btn-success");
                    $(".status" + id).data("status", 1);
                    $(".status" + id).html("Paid");
                    $(".status" + id).attr('disabled', false);
                }
            }
        });
    });

});
</script>
@endsection
@endsection