@extends('admin')

@section('styles')

    <link href="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css"
          rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css" rel="stylesheet"
          type="text/css"/>


    <style>

        .pac-container {
            z-index: 10052 !important;
        }

        #map {
            width: auto !important;
            height: 500px !important;
        }

        #map_edit {
            width: auto !important;
            height: 500px !important;
        }

        tfoot {
            display: table-header-group;
        }

        tfoot input {
            font-weight: normal !important;
        }

        tfoot select {
            font-weight: normal !important;
        }

        .dataTables_filter {
            display: none;
        }

        #orders-table_length {
            display: none;
        }

        .ws-nr {
            width: 100% !important;
        }

        table {
            margin: 0 auto;
            width: 100%;
            clear: both;
            border-collapse: collapse;
        }
    </style>

@endsection

@section('content')

    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <h1 class="page-title">
        Danh sách đơn hàng
    </h1>
    <div class="row"
         style="margin-right: 0px; margin-left: 0px; padding-top: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e7ecf1; background-color: #EFF2F5">
        <div class="col-md-9">
            <div class="row">

                <div class="col-md-2">
                    <label class="control-label">Ngày bắt đầu</label>
                    <input class="form-control date-picker" type="text" name="start_date" id="start_date">
                </div>


                <div class="col-md-2">
                    <label class="control-label">Ngày kết thúc</label>
                    <input class="form-control date-picker" type="text" name="end_date" id="end_date">
                </div>
            </div>
        </div>
        <div class="col-md-3">

            <div class="row">
                <div class="col-md-12" id="hostels-button">
                    @if(request()->url() == url('admin2/money/outcome'))
                        @if(auth('backend')->user()->can('add-spend'))
                            <div class="col-md-12" style="margin-bottom: 12px; padding-top: 12px">
                                <a style="margin-left: 10px" class="btn green-meadow pull-right btn-export-excel"
                                   data-type="outcome"
                                   href="#export-excel" data-toggle="modal">
                                    <i class="fa fa-file-excel"></i> Xuất Excel</a>
                                <a href="#spend" data-toggle="modal" class="btn btn-success" id="btn-add-spend"
                                   style="float: right">Thêm
                                    phiếu chi</a>

                            </div>
                        @endif
                    @else
                        @if(auth('backend')->user()->can('add-collect'))
                            <div class="col-md-12" style="margin-bottom: 12px; padding-top: 12px">
                                <a style="margin-left: 10px" class="btn green-meadow pull-right btn-export-excel"
                                   href="#export-excel" data-toggle="modal" data-type="income">
                                    <i class="fa fa-file-excel"></i> Xuất Excel</a>
                                <a href="#collect" data-toggle="modal" class="btn btn-success" id="btn-add-collect"
                                   style="float: right">Thêm
                                    phiếu thu</a>

                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>


    </div>
    <div class="row" id="stat">

    </div>
    <div class="row">
        {{--<div class="col-md-12" style="margin-bottom: 12px; ">--}}
        {{--<a href="#add-hostel" data-toggle="modal" class="btn btn-success" id="btn-add-hostel" style="float: right">Thêm nhà</a>--}}
        {{--</div>--}}
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover" id="orders-table">
                <thead>
                <tr style="background-color: #5376B9; color: white">
                    <th>STT</th>
                    <th>Mã đơn hàng</th>
                    <th>Trạng thái</th>
                    <th>Tên</th>
                    <th>SĐT</th>
                    <th>Gói</th>
                    <th>Số Tháng</th>
                    <th>Số phòng</th>
                    <th>Mã khuyến mại</th>
                    <th>Số tháng tặng thêm</th>
                    <th>Giảm giá</th>
                    <th>Giá trị đơn hàng</th>
                    <th>Hình thức thanh toán</th>
                    <th>Tạo lúc</th>
                    <th>Hành động</th>
                    {{--<th style="width: 10%;">Thao tác</th>--}}
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th></th>
                    <th><input type="text" class="form-control"></th>
                    <th>
                        <select class="form-control" style="font-weight: normal">
                            <option value="">Vui lòng chọn</option>
                            <option value="{{ \App\Models\Order::PROCESSING }}">Chưa xử lý</option>
                            <option value="{{ \App\Models\Order::PROCESSED }}">Đã xử lý</option>
                            <option value="{{ \App\Models\Order::DROPPED }}">Đã hủy</option>
                        </select>
                    </th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th>
                        <select class="form-control" style="font-weight: normal">
                            @php $packages = \App\Models\Package::all() @endphp
                            <option value="">Vui lòng chọn</option>
                            @foreach($packages as $package)
                                <option value="{{ $package->id }}">{{ $package->name }}</option>
                            @endforeach
                        </select>
                    </th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>
                    <th><input type="text" class="form-control"></th>

                    <th><input type="text" class="form-control"></th>
                    <th>
                        <select class="form-control" style="font-weight: normal">
                            <option value="">Vui lòng chọn</option>
                            <option value="{{ \App\Models\Order::BANK }}">Chuyển khoản</option>
                            <option value="{{ \App\Models\Order::VNPAY }}">VNPay</option>
                        </select>
                    </th>
                    <th><input type="text" class="form-control"></th>
                    <th></th>
                    {{--<th><input type="text" class="form-control"></th>--}}
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="modal fade bs-modal-lg" id="edit" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close2" data-dismiss="modal" aria-hidden="true"><span
                                aria-hidden="true" style="
    color: white;
">×</span></button>
                    <h4 class="modal-title">Cập nhật đơn hàng</h4>
                </div>
                <div class="modal-body" id="edit-order-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Hủy
                    </button>
                    <button type="button" class="btn green" id="btn-save-edit-order">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')

<script>


    var table = '';

    $('.date-picker').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true,
    }).on('changeDate', function (ev) {
        get_stat();
        getPostByAttr();
    });

    function getPostByAttr() {
        table.ajax.reload();
    }

    $(document).on('click', '.btn-edit-order', function () {

        var id = $(this).attr('data-id');

        $.ajax({
            url: '{{ url('admin/order/edit') }}' + '/' + id,
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $('#edit-order-content').addClass('ht-on-loading');
            },
            success: function (response) {
                if (response.status == 2) {
                    swal('Thông báo', response.message, 'info');
                }

                if (response.status == 1) {
                    $('#edit-order-content').removeClass('ht-on-loading').html(response.data);
                }
            }
        });
    });

    $(document).on('click', '#btn-save-edit-order', function () {

        var data = $('#form-edit-order').serialize();

        $.ajax({
            url: '{{ url('admin/order/edit') }}',
            type: 'post',
            dataType: 'json',
            data: data,
            beforeSend: function () {
                $('#edit-order-content').addClass('ht-on-loading');
            },
            success: function (response) {
                $('#edit-order-content').removeClass('ht-on-loading');
                if (response.status == 2) {
                    swal('Thông báo', response.message, 'info');
                    //$('#edit-order-content').removeClass('ht-on-loading');
                }

                if (response.status == 1) {
                    swal('Thành công', 'Đơn hàng đã được cập nhật', 'success');
                    table.ajax.reload();
                    $('#edit-order-content').modal('hide');
                }
            }
        });
    });

    $(function () {
        get_stat();

//        $('#orders-table tfoot th').each( function (index) {
//            if(index != 0 && index != 9) {
//                $(this).html('<input type="text" class="form-control" />');
//            }
//        } );
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [[1, 'desc']],
            serverSide: true,
            autoWidth: false,
            ajax: {
                url: '{!! url('admin/order/order.data') !!}',
                data: function(d)
                {
                    d.start_date = $('#start_date').val();
                    d.end_date = $('#end_date').val();
                }
            },
            pageLength: 100,
            columns: [

                {data: 'DT_Row_Index', name: 'DT_Row_Index', orderable: false, searchable: false},
                {data: 'id', name: 'id'},
                {data: 'status', name: 'status'},
                {data: 'name', name: 'name'},
                {data: 'phone', name: 'phone'},
                {data: 'package_name', name: 'package_id'},
                {data: 'month', name: 'month'},
                {data: 'rooms', name: 'rooms'},
                {data: 'coupon_code', name: 'coupon_code'},
                {data: 'extra_month', name: 'extra_month'},
                {data: 'discount', name: 'discount'},
                {data: 'value', name: 'value'},
                {data: 'payment_type', name: 'payment_type'},
                {data: 'created_at', name: 'created_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
                // {data: 'action', name: 'action', 'orderable' : false, searchable: false},
            ],
        });


        table.columns().every(function (index) {
            if (index !== 0 && index !== 10) {
                var that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });

                $('select', this.footer()).on('change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            }
        });

    });

    function get_stat()
    {
        $.ajax({
            url: '{!! url('admin/order/order.data') !!}',
            data:  {
                start_date : $('#start_date').val(),
                end_date : $('#end_date').val(),
                is_stat : 1,
            },
            beforeSend: function()
            {
                $('#stat').addClass('ht-on-loading');
            },
            dataType: 'json',
            success: function(response)
            {
                $('#stat').removeClass('ht-on-loading').html(response.data);
            }
        });
    }
</script>

@endpush