@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <!-- Card Container for Item Table -->
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 7px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                        <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        &nbsp;
                        <h5 class="mb-0"><b>Coupon Management</b></h5>
                    </div>
                    @if (in_array('create', $data['couponPermissions']))
                        <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                            <button class="btn-custom" id="OpenCompanyCouponModal" onclick="OpenCompanyCouponModal()">
                                <i class="fas fa-plus font-size-16 align-middle me-2"></i> Add Coupon
                            </button>
                        </div>
                    @endif
                </div>
                <div class="card-body" style="padding: 20px 0;">
                    @if (in_array('list', $data['couponPermissions']))
                        <div class="table-responsive table-nowrap custom-table">
                            <table id="company_coupon"
                                class="table table-striped table-bordered dataTable no-footer dtr-inline"
                                style="width: 100%; ">
                                <thead>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Code</th>
                                    <th>Discount value</th>
                                    <th>Start Date & time</th>
                                    <th>End Date & time</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="companyCouponModal" tabindex="-1" aria-labelledby="companyCouponModalLabel"
        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="d-flex align-items-center w-100">
                        <div class="d-flex align-items-center">
                            <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        </div>
                        <h5 class="modal-title ms-2" id="companyCouponModalLabel"><b>Add Coupon</b></h5>
                    </span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="company-coupon-master" method="post" action="{{ route('company.coupon.save') }}"
                        class="needs-validation" enctype="multipart/form-data">
                        @csrf
                        <div class="row">

                            <input type="hidden" name="coupon_id" id="coupon_id" value="0">

                            <div class="col-md-6">
                                <div class="float-label-group has-value">
                                    <input type="text" class="form-control" name="unique_number" id="unique_number"
                                        readonly style="background-color: #eff2f7;" placeholder="Unique Number" autofocus>
                                    <label for="name">Unique Number</label>

                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="float-label-group">

                                    <input type="text" class="form-control coupon_name" name="coupon_name"
                                        id="coupon_name" required placeholder="Enter Coupon Name" autofocus>
                                    <label for="name"> Name<font color="red"> *</font></label>

                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="float-label-group has-value">
                                    <select name="discount_type" id="discount_type" class="form-select" required>
                                        <option value="0" selected>Fixed</option>
                                        <option value="1">Per</option>
                                    </select>
                                    <label for="code"> Discount Type<font color="red"> *</font></label>

                                    <div class="invalid-feedback">
                                        Please select Discount Type.
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-6">
                                <div class="float-label-group">
                                    <input type="number" class="form-control" name="discount_value" id="discount_value"
                                        required placeholder="Enter Coupon value" autofocus step="any">
                                    <label for="code"> Discount Value<font color="red"> *</font></label>

                                </div>

                            </div>

                            <div class="col-md-6">
                                <div class="float-label-group">
                                    <div class="input-group">
                                        <input type="text" class="form-control datetimepicker" id="start_date_time"
                                            name="start_date_time" placeholder="Select Start Date" required
                                            autocomplete="off">
                                        <label for="start_date_time">Start Date <font color="red"> *</font>
                                        </label>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="float-label-group">
                                    <div class="input-group">
                                        <input type="text" class="form-control datetimepicker" id="end_date_time"
                                            name="end_date_time" placeholder="Select End Date" required
                                            autocomplete="off">
                                        <label for="end_date_time">End Date <font color="red"> *</font></label>

                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="float-label-group has-value">
                                    <select name="couponstatus" id="couponstatus" class="form-select" required>
                                        <option value="1" selected>Active</option>
                                        <option value="2">Pending</option>
                                        <option value="4">Draft</option>
                                        <option value="0">Inactive</option>
                                        <option value="3">Expired</option>


                                    </select>
                                    <label for="">Status<font color="red"> *</font></label>
                                    <div class="invalid-feedback">
                                        Please select Status.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="float-label-group">
                                    <input type="text" class="form-control coupon_remark" name="coupon_remark"
                                        id="coupon_remark" placeholder="Enter Coupon Remark" autofocus>
                                    <label for="Remark">Remark</label>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-custom-secondary" id="company_coupon_reset"
                        onclick="resetcouponForm()">Reset</button>
                    <button type="submit" class="btn-custom" id="savecoupon">
                        <span id="coupon_loader" class="bx bx-loader bx-spin font-size-22 align-middle me-2"
                            role="status" aria-hidden="true" style="display:none;"></span>
                        <span id="coupon_btnText">Save</span>
                    </button>
                </div>
                </form>
            </div>

        </div>
    </div>

@endsection('dashboard-content')

@section('custom-scripts')
    <script src="{{ asset('assets/datetimepickr/flatpickr.js') }}"></script>
    <script>
        var AjaxCouponDataDetail = '{{ route('company.coupon.ajax') }}';
        var EditcompanyCoupon = '{{ route('company.coupon.edit') }}';
        var csrfToken = $("[name=_token").val();

        document.addEventListener('DOMContentLoaded', function() {

            flatpickr('.datetimepicker', {
                enableTime: false,
                dateFormat: "d-m-Y",
                time_24hr: true,
                allowInput: true,
            });
        });

        function OpenCompanyCouponModal() {

            $("#coupon_btnText").html("Save");
            $("#savecoupon").prop("disabled", false);
            $("#company_coupon_reset").prop("disabled", false);

            $("#companyCouponModalLabel").html('Add Coupon');

            $('#coupon_id').val('');

            $("#coupon_name").val('');
            $("#discount_value").val('');
            $("#start_date_time").val('');
            $("#end_date_time").val('');
            $("#coupon_remark").val('');
            $('#couponstatus').val('1').trigger('change');
            $("#discount_type").val('0').trigger('change');

            $('#companyCouponModal').modal('show');
            $("#companyCouponModal .modal-body").scrollTop(0);

            $('#company-coupon-master').removeClass('was-validated');
            const uniqueId = generateUniqueId(5);
            $('#unique_number').val(uniqueId);
        }

        function generateUniqueId(length) {
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return result;
        }
        $('#savecoupon').on('click', function() {
            $('#company-coupon-master').addClass('was-validated');
        });


        $(document).ready(function() {
            var options = {
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
            };

            $('#company-coupon-master').ajaxForm(options);
        });

        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);
            $('#coupon_loader').show();
            $("#coupon_btnText").html("Saving...");
            $("#savecoupon").prop('disabled', true);
            $("#company_coupon_reset").prop('disabled', true);

            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            if ($form[0]['id'] == "company-coupon-master") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 2500
                    });
                    $('#companyCouponModal').modal('hide');
                    reloadcoupontable();
                    $('#coupon_loader').hide();
                    $("#coupon_btnText").html("Save");

                } else if (responseText['status'] == 0) {
                    flasher.error(responseText['msg'], {
                        timeout: 2500
                    });

                    $('#coupon_loader').hide();
                    $("#coupon_btnText").html("Save");
                    $("#savecoupon").prop('disabled', false);
                    $("#company_coupon_reset").prop('disabled', false);
                }
            }
        }

        $('#couponstatus').select2({
            placeholder: 'search Status',
            dropdownParent: $("#companyCouponModal .modal-content")
        });
        $('#discount_type').select2({
            placeholder: 'search Discount Type',
            dropdownParent: $("#companyCouponModal .modal-content")
        });

        function resetcouponForm() {
            $("#coupon_name").val('');
            $("#discount_value").val('');
            $("#start_date_time").val('');
            $("#end_date_time").val('');
            $("#coupon_remark").val('');
            $('#couponstatus').val('1').trigger('change');
            $("#discount_type").val('0').trigger('change');
            // Keep unique_number as is - don't reset it
        }

        // Function to edit an item
        function editcoupon(id) {
            $("#coupon_btnText").html("Save");
            $("#savecoupon").prop('disabled', false);
            $("#company_coupon_reset").prop('disabled', false);

            $('#companyCouponModal').modal('hide');
            $('#companyCouponModalLabel').html('Edit Coupon');
            $('#company-coupon-master').removeClass('was-validated');

            $.ajax({
                type: 'get',
                url: EditcompanyCoupon + '?id=' + id,
                success: function(resultData) {
                    if (resultData['status'] == 1) {

                        $("#coupon_id").val(resultData['data']['id']);
                        $("#unique_number").val(resultData['data']['unique_number']);
                        $("#coupon_name").val(resultData['data']['name']);
                        $("#discount_type").val(resultData['data']['discount_type']).trigger('change');
                        $("#discount_value").val(resultData['data']['discount_value']);
                        $("#start_date_time").val(resultData['data']['start_date_time']);
                        $("#couponstatus").val(resultData['data']['status']).trigger('change');
                        $("#end_date_time").val(resultData['data']['end_date_time']);
                        $("#coupon_remark").val(resultData['data']['remark']);



                        $('#companyCouponModal').modal('show');
                        $("#companyCouponModal .modal-body").scrollTop(0);
                    } else {
                        flasher['error'](resultData['msg'], {
                            timeout: 2500
                        });
                    }
                }
            });
        }

        // Initialize DataTable
        var CompanyCouponTable = $('#company_coupon').DataTable({
            // responsive: true,
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [0, 7]
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            pagingType: "full_numbers",
            "ajax": {
                "url": AjaxCouponDataDetail,
                "type": "GET",
                "data": {
                    "_token": csrfToken,
                }
            },
            "aoColumns": [{
                    "mData": "id"
                },
                {
                    "mData": "name"
                },
                {
                    "mData": "unique_number"
                },
                {
                    "mData": "discount_value"
                },
                {
                    "mData": "start_date_time"
                },
                {
                    "mData": "end_date_time"
                },
                {
                    "mData": "status"
                },
                {
                    "mData": "action",
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                search: "",
                searchPlaceholder: "Search Coupon  Name,code",
                paginate: {
                    first: '<i class="bx bx-skip-previous"></i>',
                    previous: '<i class="bx bx-chevron-left"></i>',
                    next: '<i class="bx bx-chevron-right"></i>',
                    last: '<i class="bx bx-skip-next"></i>'
                }
            }
        });
        var a = document.querySelector("#company_coupon thead"),
            n = a.querySelector("tr").cloneNode(true);
        a.appendChild(n);

        let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
        searchRowTh.forEach(th => {
            th.classList.remove("sorting", "sorting_asc", "sorting_desc");
            th.removeAttribute("aria-sort");
        });

        searchRowTh.forEach((e, t) => {
            let skipColumns = [0, 7]; // Skip ID and Action columns

            if (skipColumns.includes(t)) {
                e.innerHTML = "";
                return;
            }
            var text = e.textContent;
            var input = document.createElement("input");
            input.type = "text";
            input.className = "form-control";
            input.placeholder = "Search " + text;

            e.innerHTML = "";
            e.appendChild(input);

            input.addEventListener("keyup", function() {
                if (CompanyCouponTable.column(t).search() !== this.value) {
                    CompanyCouponTable.column(t).search(this.value).draw();
                }
            });

            input.addEventListener("change", function() {
                if (CompanyCouponTable.column(t).search() !== this.value) {
                    CompanyCouponTable.column(t).search(this.value).draw();
                }
            });
        });

        $('#profile-pic').on('click', function(e) {
            e.stopPropagation();
            $('#dropdown-menu').toggle();
        });

        function reloadcoupontable() {
            CompanyCouponTable.ajax.reload(null, false);
        }
    </script>
@endsection