@extends('template.app')

@section('meta')
@endsection

@section('title')
Orders
@endsection

@section('styles')
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Orders</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('order') }}" class="text-muted">Orders</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered data-table" id="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <!--<th>Order ID</th>-->
                                <th>Branch</th>
                                <th>Customer Name</th>
                                <th>KEC Name</th>
                                <th>Vehicle Model </th>
                                <th>Varient </th>
                                <th>Allocation Count </th>
                                <th>Aging Days</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="DescModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Import</h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <form action="">
                <div class="modal-body">
                    
                        <input type="hidden" name="id" id="id" value="">
                        <input type="hidden" name="status" id="status" value="">
                        <label for="">Enter Your Reason</label>
                        <textarea placeholder="Please Enter Your Reason" class="form-control" name="reason" id="reason" cols="30" rows="10"></textarea>
                    

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " onclick="status_reject(this);" >Apply!</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- Modal -->
@endsection

@section('scripts')
<script type="text/javascript">
    var datatable;

    $(document).ready(function() {
        if ($('#data-table').length > 0) {
            datatable = $('#data-table').DataTable({
                processing: true,
                serverSide: true,

                // "pageLength": 10,
                // "iDisplayLength": 10,
                "responsive": true,
                "aaSorting": [],
                "scrollX": true,
                "scrollY": '',
                "scrollCollapse": false,
                "scrollCollapse": true,
                    // "order": [], //Initial no order.
                    //     "aLengthMenu": [
                    //     [5, 10, 25, 50, 100, -1],
                    //     [5, 10, 25, 50, 100, "All"]
                    // ],

                    // "scrollX": true,
                    // "scrollY": '',
                    // "scrollCollapse": false,
                    // scrollCollapse: true,

                    // lengthChange: false,

                    "ajax": {
                        "url": "{{ route('order') }}",
                        "type": "POST",
                        "dataType": "json",
                        "data": {
                            _token: "{{csrf_token()}}"
                        }
                    },
                    "columnDefs": [{
                        //"targets": [0, 5], //first column / numbering column
                        "orderable": true, //set not orderable
                    }, ],
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                       /* {
                            data: 'order_id',
                            name: 'order_id'
                        },*/
                        {
                            data: 'branch_name',
                            name: 'branch_name'
                        },
                        {
                            data: 'customer_name',
                            name: 'customer_name'
                        },
                        {
                            data: 'kec_name',
                            name: 'kec_name'
                        },
                        {
                            data: 'carmodel',
                            name: 'carmodel'
                        },
                        {
                            data: 'carvarient',
                            name: 'carvarient'
                        },
                        {
                            data: 'allocation_count',
                            name: 'allocation_count'
                        },
                        {
                            data: 'aging_days',
                            name: 'aging_days'
                        },
                         {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                        },
                    ]
                });
        }
    });

    function change_status(object){
        var id = $(object).data("id");
        var status = $(object).data("status");

        if(status == 'delete'){
            status = 'deleted';
        }
        if (confirm('Are you sure you want to change Status ?')) {
            $.ajax({
                "url": "{!! route('order.change_status') !!}",
                "dataType": "json",
                "type": "POST",
                "data":{
                    id: id,
                    status: status,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response){
                    console.log(response);
                    console.log(response.obf_id);

                    if (response.code == 200){
                        if(response.obf_id != undefined){
                            
                            window.location.href="{{url('order/payment_pending_detail')}}?obf_id="+response.obf_id;
                        }else{
                            datatable.ajax.reload();
                            toastr.success('Status chagned successfully', 'Success');    
                        }                        
                    }else{
                        toastr.error('Failed to change status', 'Error');
                    }
                }
            });
        }
    }

    function change_status_reject(object) {
        var id = $(object).data("id");
        var status = $(object).data("status");
        $('#DescModal').modal("show");
        $('#id').val(id);
        $('#status').val(status);
    } 


     function status_reject(object) {
        var id = $('#id').val();
        var status = $('#status').val();
        var reason = $('#reason').val();
        $('#DescModal').modal("hide");
        $('#id').val('');
        $('#status').val('');
        $.ajax({
            "url": "{!! route('order.change_status') !!}",
            "dataType": "json",
            "type": "POST",
            "data": {
                id: id,
                status: status,
                reason: reason,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.code == 200) {
                    datatable.ajax.reload();
                    toastr.success('Status changed successfully', 'Success');
                } else {
                    toastr.error('Failed to change status', 'Error');
                }
            }
        });
    }
</script>
@endsection