@extends('layouts.user')

{{-- Web site Title --}}

<style>
    button {
        display: block;
        border: solid white;
        border-width: 0 10px;
        border-radius: 0;
        background: green;
        color: white;
        font-size: 18px;
        margin: -60px auto 15px;
        padding: 15px;
    }

    .dropdown {
        position: absolute;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #ddd
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .btn:hover,
    .dropdown:hover .btn {
        background-color: #0b7dda;
    }
</style>
{{-- Content --}}
@section('content')
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <i class="material-icons">format_list_numbered_rtl</i>
            {{ 'All Sales Orders ' }}
        </h4>
        <span class="pull-right"><i class="fa fa-fw fa-chevron-up clickable"></i></span>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table id="data_data" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>#. </th>
                        <th>Order ID</th>
                        <th>Customer Name</th>
                        <th>Total Amount</th>
                        <th>Services</th>
                        <!-- <th>Paid</th>
                        <th>Pending Amount</th> -->
                        <th>Status</th>
                        <th>Event Date</th>
                        <!-- <th>Actions</th> -->

                        <!-- <th>Price </th> -->
                        <th>{{ trans('table.actions') }}</th>

                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    @stop
    @section('scripts')




    <script type="text/javascript" language="javascript">
        $(document).ready(function() {

            $(function() {
                $('#data_data').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "index/data",
                        type: "GET"
                    },
                    columns: [

                        {
                            render: (data, type, row, meta) => meta.row + 1,
                        },
                        {
                            data: 'order_id',
                        },
                        {
                            data: 'name',
                        },
                        {
                            data: 'total_price',
                        },

                        {
                            data: 'num_of_services',
                        },



                        // {
                        //     data: 'paid_amount',
                        // },

                        // {
                        //     data: 'pending_amount',
                        // },
                        {
                            data: 'status_string'
                        },
                        {
                            data: 'event_date'
                        },


                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }




                    ],
                    "order": [[ 0, "desc" ]]
                });
            });

        });
    </script>

    @stop