@extends('adminlte::page')
@section('css')
<style>
    .modal-info input {
        width: 100%;
        border: none
    }

    .modal-info input::before {
        content: ":" !important;
    }
</style>
@stop
@section('content')
<?php Fun::lang() ?>
@if ($message = Session::get('success'))
<div class="alert-message alert-success" id="done">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <i class="fa fa-check"></i>
    <h3>Success</h3>
    <p id="message"></p>
</div>
@endif
<div class="title-add">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
            <li><a href="#">Discount</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                        <h3>Discount</h3>
                    </div>
                </div>
                <div class="pull-right">
                    <a class="button_sm button_primary btn-create-discount" href="#"><span class="fa fa-plus"></span> Create New</a>
                </div>
            </div>
        </div>
    </div>
    <div class="box-body table-responsive">
        <table id="datatable_report_booking" class="table table-striped table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Discount Type</th>
                    <th>Description</th>
                    <th>Created Date</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@endsection
@section('js')

<script type="text/javascript">
    $(document).ready(function() {
        $('.main-spinner').show();
        $('#datatable_report_booking').DataTable({
            ordering: false,
            serverSide: true,
            ajax: "{{ route('discount.index') }}",
            columns: [{
                    data: 'DT_RowIndex'
                },
                {
                    data: "name"
                },
                {
                    data: "des"
                },
                {
                    data: "created_at"
                },
                {
                    data: "action"
                }
            ],
            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }

        });

        $.fn.dataTable.ext.errMode = 'throw';
    });
    $(document).on('click', '.btn-create-discount', function() {
        $.confirm({
            title: 'Create Discount Type',
            content: '' +
                '<form action="" class="formName">' +
                '<div class="form-group">' +
                '<label>Discount Name</label>' +
                '<input type="text" placeholder="Discount Name" class="name form-control" required />' +
                '</div>' +
                '<div class="form-group">' +
                '<label>Description</label>' +
                '<textarea name="" id="" cols="10" rows="5" class="des form-control"></textarea>' +
                '</div>' +
                '</form>',
            buttons: {
                formSubmit: {
                    text: 'Submit',
                    btnClass: 'btn-blue',
                    action: function() {
                        var name = this.$content.find('.name').val();
                        var des = this.$content.find('.des').val();
                        if (!name) {
                            $.alert('provide a valid name');
                            return false;
                        } else {
                            $.ajax({
                                type: "POST",
                                dataType: "JSON",
                                url: "{{route('discount.store')}}",
                                data: {
                                    _token: "{{csrf_token()}}",
                                    name: name,
                                    des: des
                                },
                                success: function(response) {
                                    $('#message').text('Discount Created Successfully');
                                    $('#done').show();
                                    $('#datatable_report_booking').DataTable().ajax.reload();
                                }
                            });
                        }
                    }
                },
                cancel: function() {},
            },
            onContentReady: function() {
                var jc = this;
                this.$content.find('form').on('submit', function(e) {
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click');
                });
            }
        });
    });
    $(document).on('click', 'table .button_info', function() {
        var id = $(this).data('id');
        var route = "{{route('discount.show',':id')}}";
        route = route.replace(':id',id);
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: route,
            data: {
                _token: "{{csrf_token()}}"
            },
            success: function(response) {
                data = response['data'];
                discountInfo(data);
            },
            async: false
        });
    });

    function discountInfo(data) {
        $.confirm({
            title: 'Update Discount Type',
            content: '' +
                '<form action="" class="formName">' +
                '<div class="form-group">' +
                '<label>Discount Name</label>' +
                '<input type="text" placeholder="Discount Name" class="name form-control" value="'+data.name+'" required />' +
                '</div>' +
                '<div class="form-group">' +
                '<label>Description</label>' +
                '<textarea name="" id="" cols="10" rows="5" class="des form-control">'+data.des+'</textarea>' +
                '</div>' +
                '</form>',
            buttons: {
                formSubmit: {
                    text: 'Submit',
                    btnClass: 'btn-blue',
                    action: function() {
                        var name = this.$content.find('.name').val();
                        var des = this.$content.find('.des').val();
                        if (!name) {
                            $.alert('provide a valid name');
                            return false;
                        } else {
                            var route = "{{route('discount.update',':id')}}";
                            route = route.replace(':id', data.id);
                            $.ajax({
                                type: "PATCH",
                                dataType: "JSON",
                                url: route,
                                data: {
                                    _token: "{{csrf_token()}}",
                                    name: name,
                                    des: des
                                },
                                success: function(response) {
                                    $('#message').text('Discount Updated Successfully');
                                    $('#done').show();
                                    $('#datatable_report_booking').DataTable().ajax.reload();
                                }
                            });
                        }
                    }
                },
                cancel: function() {},
            },
            onContentReady: function() {
                var jc = this;
                this.$content.find('form').on('submit', function(e) {
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click');
                });
            }
        });
    }
</script>

@endsection