@extends('operations.layout.mainlayout')

@section('content')
    {{--    @if(session('role') != 4)--}}
    {{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
    {{--    @endif--}}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Discount List</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <!-- /.card -->
                        <div class="col-12 col-sm-12 col-md-12">
                            <br/>
                            <div class="card bg-light">
                                <div class="card-footer">
                                    <div class="text-right">
                                        <button class="btn btn-sm btn-info" id="import-discount">
                                            <i class="fas fa-file-import"></i> Import Excel
                                        </button>
                                        <a href="/operations/discount-list/export" 
                                           class="btn btn-sm btn-success">
                                            <i class="fas fa-download"></i> Export Excel
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <table id="discount-list" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Test Name</th>
                                        <th>Type</th>
                                        <th>Percentage</th>
                                        <th>Active</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>

                        </div>


                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <div class="modal fade" id="import-discount-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Import Discount List</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form>
                    <div class="modal-body">
                        <div class="row">
                            <input type="hidden" name="list_id" id="list_id" value=""/>
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-hospital" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload Discount
                                    List</p>
                                <input style="padding:3px" class="form-control" name="import-file" id="import-file"
                                       type="file"/>
                            </div>
                        </div>

                    </div>


                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                        </button>
                        <button style="width:130px;color:#fff" id="import-discount-list" type="button" class="btn btn-info">
                            Import
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@section('footer-scripts')
    <script>
        var discount_list_table = DiscountListDataTable();

        function DiscountListDataTable() {
            var discountTable = $("#discount-list").DataTable({
                dom: 'lBfrtip',
                "buttons": [
                    'copy', 'csv', 'pdf', 'print'
                ],
                "lengthMenu": [[10, 25, 50, 500], [10, 25, 50, 500]],
                "responsive": true,
                "autoWidth": false,
                serverSide: false,
                "processing": true,
                "ordering": false,
                "searching": true,
                ajax: {
                    url: '/operations/discount-list/datatable'
                },
                "order": [[0, "desc"]],
                columns: [
                    {data: "CODE", name: "CODE",
                        render: function ( data,type,row) {
                            if(data) {
                                return data;
                            }
                            return '--';
                        } },
                    {data: "NAME_EN", name: "NAME"},
                    {data: "SERVICE_TYPE", name: "SERVICE_TYPE"},
                    {data: "PERCENTAGE", name: "PERCENTAGE",
                        render: function ( data,type,row) {
                            if(data) {
                                return '<a href="#" class="@permission('manage_administration_discount_list') xedit-percentage @endpermission" data-pk="" package-id="' + row["ID"] + '"  data-title="Enter Percentage">' + data + '</a>';
                            }
                            return '<a href="#" class="@permission('manage_administration_discount_list') xedit-percentage @endpermission" data-pk="" package-id="' + row["ID"] + '"  data-title="Enter Percentage">Empty</a>';
                        } },
                    {data: "ACTIVE", name: "ACTIVE",
                        render: function ( data,type,row) {
                            if(data != null) {
                                var status='Inactive';
                                if(data == 1) status = 'Active';
                                return '<a href="#" class="@permission('manage_administration_discount_list') xedit-type @endpermission" data-pk=""  package-id="' + row["ID"] + '"  data-title="Select Type">' + status + '</a>';
                            }
                            return '<a href="#" class="@permission('manage_administration_discount_list') xedit-type @endpermission" data-pk="" package-id="' + row["ID"] + '"  data-title="Select Type">Empty</a>';
                        } }
                ],

                "drawCallback": function (settings) {
                    $(".xedit-percentage").editable({
                        type: 'number',
                        step: 0.01,
                        max: 100,
                        min: 0,
                        params: function (params) {
                            params.package_id = $(this).editable().attr('package-id');
                            return params;
                        },
                        url: "/operations/discount-list/percentage",
                        error: function (response, newValue) {
                            if (response.status === 500) {
                                return 'Service unavailable. Please try later.';
                            } else {
                                $(".xe-error").remove();
                                var error = $.parseJSON(response.responseText)
                                $(".popover-body").prepend("<span class='xe-error' style='color:red'>" + error.errorMessage + "</span>")
                            }
                        }
                    }),

                        $(".xedit-type").editable({
                            type: 'select',
                            params: function (params) {
                                params.package_id = $(this).editable().attr('package-id');
                                return params;
                            },
                            source: [
                                {value: '0', text: "Inactive"},
                                {value: '1', text: "Active"}
                            ],
                            url: "/operations/discount-list/status",
                            error: function (response, newValue) {
                                if (response.status === 500) {
                                    return 'Service unavailable. Please try later.';
                                } else {
                                    $(".xe-error").remove();
                                    var error = $.parseJSON(response.responseText)
                                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>" + error.errorMessage + "</span>")
                                }
                            },
                        })
                },
            });

            return discountTable;
        }

        $('#import-discount').click(function () {
            $("#import-discount-modal").modal("show");
        });

        $("#import-discount-list").on("click", function () {

            $('#import-discount-list').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);

            var fd = new FormData();
            var files = $('#import-file')[0].files;

            fd.append('file', files[0]);
            $.ajax({
                type: "POST",
                url: "/operations/discount-list/import",
                data: fd,
                contentType: false,
                processData: false,
            }).done(function (data) {
                $('#discount-list').DataTable().clear().destroy();
                DiscountListDataTable();
                $('#import-discount-modal').modal('hide');
                $(".alert-danger-hospital").html("");
                $(".alert-danger-hospital").slideUp("slow", function () {
                });
                $("#import-file").val('');
                $('#import-discount-list').html('Import').attr('disabled', false);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $(".alert-danger-hospital").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-hospital").slideDown("slow", function () {
                });
                $("#import-file").val('');
                $('#import-discount-list').html('Import').attr('disabled', false);
            });

            return false;
        });
    </script>
@endsection