@extends('layouts.master')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <h4 class="page-title">Metal Order List</h4>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Order</a></li>
                        <li class="breadcrumb-item active">Index</li>
                    </ol>
                    <div class="state-information d-none d-sm-block">
                        <div class="text-center">
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- end row -->
        <div class="card">
            <div class="card-body">
                <div class="row">
                    

                    <div class="col-md-2">
                        <div class="form-group">
                            <label><strong>Ab Datum:</strong></label>
                            <input class="form-control" type="date" id="fromdate" value="">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label><strong>Miteinander ausgehen:</strong></label>
                            <input class="form-control" type="date" id="todate" value="">
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

        <table  id="datatable" class="table table-bordered dt-responsive nowrap data-table">
            <thead>
                <tr>
                    <th>Rechnungs-ID</th>
                    <th>Name</th>
                    <th>Telefon</th>
                    <th>Ort</th>
                    <th>Postleitzahl Ort</th>
                    <th>Zahlung</th>
                    <th>Bestellstatus</th>
                    <th>Gesamt</th>
                    <th>Abgabe</th>
                    <th>Datum</th>
                    <th>Handlung</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div> <!-- container-fluid -->

<meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function () {

          var table = $('.data-table').DataTable({
              processing: true,
              serverSide: true,
              ajax: {
                url: "{{ url('order/metal_listing') }}",
                data: function (d) {
                      d.fromdate = $('#fromdate').val(),
                      d.todate = $('#todate').val(),
                      d.search = $('input[type="search"]').val()
                  }
              },
              columns: [
                  {data: 'invoice_no', name: 'invoice_no', ordering: true, searchable: true, visible: true},
                  {data: 'fname', name: 'fname', ordering: true, searchable: true, visible: true},
                  {data: 'phone', name: 'phone'},
                  {data: 'city', name: 'city'},
                  {data: 'billing_postcode', name: 'billing_postcode'},
                  {data: 'paid_date', name: 'paid_date'},
                  {data: 'order_status', name: 'order_status'},
                  {data: 'total_price', name: 'total_price'},
                  {data: 'product_type', name: 'product_type'},
                  {data: 'created_at', name: 'created_at'},
                  {data: 'action', name: 'action'},
              ]
          });

            $('#paymentmethod').change(function(){
                table.draw();
            });
            $('#payment').change(function(){
                table.draw();
            });
            $('#fromdate').change(function(){
                table.draw();
            });
            $('#todate').change(function(){
                table.draw();
            });

        //   Delete
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            // Delete record
            $('#datatable').on('click','.deleteUser',function(){
            var id = $(this).data('id');
            var deleteConfirm = confirm("Are you sure?");
            if (deleteConfirm == true) {
                // AJAX request
                $.ajax({
                    url: "{{ route('deleteOrder') }}",
                    type: 'post',
                    data: {_token: CSRF_TOKEN,id: id},
                    success: function(response){
                        if(response.success == 1){
                            // Reload DataTable
                            table.ajax.reload();
                            swal({  text: 'Record Deleted successfully',
                                    type: 'success',
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                })
                        }else{
                            swal({  text: 'invalid id!',
                                    type: 'warning',
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                })
                        }
                    }
                });
            }

            });
        });

      </script>
@endsection