@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;
        }

        /*.alert-danger .btn-danger {*/
        /*float: right;*/
        /*}*/

        /*.alert-danger span {*/
        /*line-height: 34px;*/
        /*}*/

        /*.alert-danger > div:after {*/
        /*clear: both;*/
        /*content: '';*/
        /*display: table;*/
        /*}*/
    </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 mã coupon {{ $coupon->name }}
    </h1>


    <div class="row">


        <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 style="width: 20% !important;">Mã</th>
                    <th>Trạng thái sử dụng</th>
                    <th>Trạng thái kích hoạt</th>
                    <th>Đã được gửi tới</th>
                    <th>Sử dụng bởi</th>
                    <th style="width: 10%;">Thao tác</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th></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 style="width: 10%;"></th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" id="detail">
        </div>
    </div>




@endsection

@push('scripts')
<script src="/assets/global/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
<script src="/assets/pages/scripts/form-dropzone.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8&libraries=places&region=vi&language=vi&sensor=false"></script>
<script type="text/javascript" src="/js/gmap.js"></script>

<script>
    $.validator.addMethod("greaterThan",
        function (value, element, param) {
            var $otherElement = $(param);
            return parseInt(value, 10) >= parseInt($otherElement.val(), 10);
        }
    );
</script>


@endpush


@push('scripts')
<script>
    var coupon_id = '';
    var table = '';

    $(document).on('click', '.btn-active', function(e) {
        e.preventDefault();
        coupon_id = $(this).attr('data-id');

        bootbox.confirm({
            message: "Bạn có chắc chắn muốn kích hoạt mã này ?",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {
                    $.ajax({
                        url: '{{ url('admin/coupon/code/active') }}',
                        type: 'post',
                        data: {
                            id: coupon_id
                        },
                        success: function (response) {
                            if(response.status == 1)
                            {
                                swal('Thành công', 'Mã đã được kích hoạt', 'success');
                                table.ajax.reload();
                            } else {
                                swal('Thông báo', response.message, 'info');
                            }
                        }
                    });
                }
            }
        });
    });


    $(function () {


        $('#orders-table tfoot th').each(function (index) {
            if (index != 0 && index != 6) {
                $(this).html('<input type="text" class="form-control" />');
            }
        });
        table = $('#orders-table').DataTable({
            "bDestroy": true,
            processing: true,
            searching: true,
            "aaSorting": [],
            serverSide: true,
            ajax: {
                url: '{!! url('admin/coupon/code.data') !!}',
                data: {
                    id: '{{ $coupon->id }}'
                }
            },
            columns: [

                {data: 'DT_Row_Index', name: 'DT_Row_Index', orderable: false, searchable: false},
                {data: 'code', name: 'code'},
                {data: 'status', name: 'status'},
                {data: 'is_active', name: 'is_active'},
                {data: 'owner_name_phone', name: 'owner_name_phone'},
                {data: 'used_by_name_phone', name: 'used_by_name_phone'},
                {data: 'action', name: 'action', 'orderable': false, searchable: false},
            ],
        });


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

    });

</script>
@endpush