@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: var(--blazma-text)!important;">Discount Coupon List</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

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

                    <!-- /.card -->

                    <div class="card">

                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="coupons-datatable" class="table table-bordered table-striped"></table>
                            <div class="row">
                                <div class="col" style="text-align: center">
{{--                                    @if(!empty(session('role')) && (session('role') == 4))--}}
                                        @permission('manage_administration_discount_coupons')
                                        <button class="btn btn-info" id="create_coupon_btn">Create
                                        </button>
                                        @endpermission
{{--                                    @endif--}}
                                </div>
                            </div>

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

    <div class="modal fade" id="modal-coupon">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Coupon</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="row form-group">
                    <div class="col" style="text-align: center;">
                        <div class="alert alert-danger alert-danger-item" role="alert" style="display: none;"></div>
                    </div>
                </div>
                <div class="modal-body">



                </div>
                <div class="modal-footer justify-content-between">
                    <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('warehouse_scripts') <!-- to be fixed -->
<script>
    $("#coupons-datatable").DataTable({
        dom: 'Bfrtip',
        "buttons" : [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "responsive": true,
        processing: true,
        serverSide: true,
        "autoWidth": false,
        "order": [[ 0, "desc" ]],
        ajax: {url: '/operations/coupons/datatable'},
        columns: [
            /*{
                title: 'ID', "mRender": function (data, type, row) {

                return '<a href="/operations/warehouse/item/' + row.ID + '" >' + row.ID + '</a>';
            }
            },*/
            {data: 'ID', title: 'ID'},
            {data: 'CODE', title: 'Code'},
            {
                data: 'CLIENT_NAME',
                title: 'Client',
                render: function (data, type, row, meta) {
                    if (!data) return '';
                    if (row.CLIENT_CODE) return data + ' (' + row.CLIENT_CODE + ')';
                    return data;
                }
            },
            {data: 'EXPIRY_DATE', title: 'Expiry Date'},
            {data: 'PERCENTAGE', title: 'Percentage'},
            {data: 'TYPE', title: 'Coupon Type'},
            {
                data: 'TEST_IDS',
                title: 'Test',
                render: function (data, type, row, meta) {
                    if (!data) return ''; // Handle cases where data might be null or undefined

                    let testIds = data.split(','); // Split the IDs by comma

                    if (testIds.length > 1) {
                        return 'Multi Test';
                    } else {
                        return testIds[0]; // Return single test ID
                    }
                }
            },
            /*{data: 'DESC_EN', title: 'Description (EN)'},
            {data: 'DESC_AR', title: 'Description (AR)'},*/
            {
                title: 'Status', "mRender": function (data, type, row) {
                    let checked = (row.IS_ACTIVE == 1) ? 'checked' : ''

                    return '<div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px; ">' +
                        '<input name="status" @if(!in_array('manage_administration_discount_coupons', session('permissions', []) ?? array())) disabled @endif  type="checkbox" class="custom-control-input item-status"  '+checked+' id="'+row.ID+'"> ' +
                        '<label class="custom-control-label" for="'+row.ID+'"></label>' +
                        '</div>'
                }
            },
            {
                title: 'Actions', "mRender": function (data, type, row) {
                    @permission('manage_administration_discount_coupons')
                        return '<input type="button" class="btn btn-outline-success edit-coupon" id="'+row.ID+'" value="Edit">';
                        @else
                        return '';
                    @endpermission

                }
            },
        ]
    });


    $(document).on('change', '.item-status', function (e) {
        let item_id = $(this).attr('id');
        var data = {
            item_id: item_id,
        }
        if($(this).is(":checked")) {
            data['status'] = 1;
            $.ajax({
                url: "/operations/coupons/"+item_id+"/status",
                data: JSON.stringify(data),
                type:"POST",
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert("Error while changing coupon status");
            });

        } else  {
            data['status'] = 0;
            $.ajax({
                url: "/operations/coupons/"+item_id+"/status",
                data: JSON.stringify(data),
                type:"POST",
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert("Error while changing coupon status");
            });
        }
    })

    $('#create_coupon_btn').on('click', function (e) {
        e.preventDefault();
        $.ajax({
            url: '/operations/coupons/create',
            success: function (response) {
                $('.modal-body').html(response)
                $('.modal-title').html('Add Coupon');
                $('#modal-coupon').modal('show');

                $('#coupon-form').submit(function (e) {
                    e.preventDefault();
                    var action_url = e.currentTarget.action;
                    var form = $(this).serializeArray();
                    $.ajax({
                        url: action_url,
                        type: 'post',
                        dataType: "json",
                        data: $.param(form),
                        context: this,
                        success: function (data) {
                            $('#coupons-datatable').DataTable().ajax.reload();
                            $('#modal-coupon').modal('hide');
                            //window.location.reload();
                        },
                        error: function (response) {
                            $(".alert-danger").html(response.responseJSON.errorMessage);
                            $(".alert-danger").slideDown("slow", function () {
                            });
                        }
                    });
                })

            }
        })
    })


    $(document).on('click', '.edit-coupon', function (e) {
        e.preventDefault();
        let id = $(this).attr('id');
        $.ajax({
            url: '/operations/coupons/'+id,
            success: function (response) {
                $('.modal-body').html(response)
                $('.modal-title').html('Edit Coupon');
                $('#modal-coupon').modal('show');

                $('#coupon-form').submit(function (e) {
                    e.preventDefault();
                    var action_url = e.currentTarget.action;
                    var form = $(this).serializeArray();
                    $.ajax({
                        url: action_url,
                        type: 'post',
                        dataType: "json",
                        data: $.param(form),
                        context: this,
                        success: function (data) {
                            $('#coupons-datatable').DataTable().ajax.reload();
                            $('#modal-coupon').modal('hide');
                            //window.location.reload();
                        },
                        error: function (response) {
                            $(".alert-danger").html(response.responseJSON.errorMessage);
                            $(".alert-danger").slideDown("slow", function () {
                            });
                        }
                    });
                })

            }
        })
    })

</script>
    @endsection