@extends('admin.layouts.masterlayout')

@section('title')
    Add Promotion
@endsection

@section('Css')
    <link href="{{ asset('assets') }}/css/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('head_title')
    Promotion
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="dashboard-breadcrumb-section">
            <h2>Add Promotion</h2>
            <p><a href="{{ route('admin.promotions.index') }}">Promotion List </a> / Add Promotion </p>
        </div>
        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0">
                <form id="addPromotionForm" method="POST" action="{{ route('admin.promotions.store') }}">
                    @csrf
                    <div class="ct-admin-container mb-4">
                        <div class="card">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <div class="card-title mb-0">
                                    <h2>Promotion Detail</h2>
                                </div>
                                <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                    <input class="form-check-input" type="checkbox" name="status" id="status"
                                        value="active" {{ old('status') === 'active' ? 'checked' : '' }} checked>
                                    <label class="form-check-label" for="status">Is Enable?</label>
                                </div>
                            </div>
                            <div class="card-body">
                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show mb-5 hdo-alert">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li><strong>{{ $error }}</strong></li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="mb-4">
                                    <label for="shop_id">Select Shop<span class="required-block">*</span> </label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="shop_id" name="shop_id">
                                            <option value="">Select a Shop</option>
                                            @foreach ($shops as $shop)
                                                <option value="{{ $shop->id }}"
                                                    {{ old('shop_id') == $shop->id ? 'selected' : '' }}>
                                                    {{ $shop->shop_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/dashboard/Shop.png') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="shop_id_error"></div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6 mb-4">
                                        <label for="discount_code">Discount Code<span
                                                class="required-block">*</span></label>
                                        <div class="auth-input-position">
                                            <input type="text" name="discount_code" id="discount_code"
                                                class="form-control" placeholder="Enter Discount Code"
                                                value="{{ old('discount_code') }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/refer-code.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-4">
                                        <label for="expiry_date">Expiry Date<span class="required-block">*</span></label>
                                        <div class="auth-input-position auth-input-position-datepicker">
                                            <input type="text" name="expiry_date" id="expiry_date"
                                                class="form-control flatpickr" value="{{ old('expiry_date') }}"
                                                placeholder="Select Expiry Date" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 mb-4">
                                        <label for="discount_type">Discount Type<span
                                                class="required-block">*</span></label>
                                        <div class="auth-input-position">
                                            <select name="discount_type" id="discount_type" class="form-control form-menu">
                                                <option value="">Select Type</option>
                                                <option value="0" {{ old('discount_type') == '0' ? 'selected' : '' }}>
                                                    Percentage</option>
                                                <option value="1" {{ old('discount_type') == '1' ? 'selected' : '' }}>
                                                    Fixed
                                                </option>
                                            </select>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/commision.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-4">
                                        <label for="assign_to">Assign To<span class="required-block">*</span></label>
                                        <div class="auth-input-position">
                                            <select name="assign_to" id="assign_to" class="form-control form-menu">
                                                <option value="">Select Assign To</option>
                                                <option value="0" {{ old('assign_to') == '0' ? 'selected' : '' }}>
                                                    Existing
                                                    Users</option>
                                                <option value="1" {{ old('assign_to') == '1' ? 'selected' : '' }}>New
                                                    Users
                                                </option>
                                            </select>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/role-setting.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 mb-4">
                                        <label for="discount_value">Discount Value<span
                                                class="required-block">*</span></label>
                                        <div class="auth-input-position">
                                            <input type="number" name="discount_value" id="discount_value"
                                                class="form-control" placeholder="Enter Discount Value"
                                                value="{{ old('discount_value') }}" min="0" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/discount-amount.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mb-4">
                                        <label for="usage_limit">Usage Limit<span class="required-block">*</span></label>
                                        <div class="auth-input-position">
                                            <input type="number" name="usage_limit" id="usage_limit"
                                                class="form-control" placeholder="Enter Usage Limit"
                                                value="{{ old('usage_limit') }}" min="0" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/referral-limit.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="extra_notes">Extra Notes</label>
                                    <div class="auth-input-position">
                                        <textarea class="form-control" name="extra_notes" id="extra_notes" placeholder="Enter Extra Notes">{{ old('extra_notes') }}</textarea>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/dashboard/edit.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-check mt-3">
                                    <input type="checkbox" name="show_to_users" id="show_to_users"
                                        class="form-check-input" value="1"
                                        {{ old('show_to_users') ? 'checked' : '' }}>
                                    <label class="form-check-label show-to-users-label" for="show_to_users">Show To
                                        Users</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-3 submit-container">
                        <a href="{{ route('admin.promotions.index') }}" class="ct-outline-btn">Cancel</a>
                        <button type="submit" class="ct-btn add_promotion_btn"><span>Save</span></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets') }}/js/flatpickr.js"></script>
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $("#shop_id").select2();
            
            // Initialize flatpickr
            flatpickr("#expiry_date", {
                dateFormat: "Y-m-d",
                altFormat: "d-m-Y", // This is the format displayed in the input field
                altInput: true, // Use the alt input field for displaying the formatted date
                minDate: "today", // disables past dates
                static: false,
                appendTo: document.querySelector(".auth-input-position-datepicker")
            });

            // Custom rule for discount_value based on discount_type
            $.validator.addMethod("validDiscountValue", function(value, element) {
                const type = $('#discount_type').val();
                const val = parseFloat(value);

                if (type === '0') {
                    return val >= 0 && val <= 100;
                }
                if (type === '1') {
                    return val >= 0;
                }
                return false; // If type not selected, validation fails
            }, function(params, element) {
                const type = $('#discount_type').val();
                if (type === '0') {
                    return "Value must be between 0 and 100 for percentage.";
                } else if (type === '1') {
                    return "Value must be 0 or more for fixed discount.";
                }
                return "Please select a valid discount type.";
            });

            // Reset fields on shop change
            // $('#shop_id').on('change', function() {
            //     const form = $('#addPromotionForm');
            //     form.find('input[type="text"], input[type="number"], input[type="date"], textarea').val('');
            //     form.find('select').not(this).val('');
            //     form.find('input[type="checkbox"]').prop('checked', false);
            //     form.validate().resetForm(); // Clear existing validation errors
            // });

            $('#discount_type').on('change', function() {
                $('#discount_value').val('');
                $('#addPromotionForm').validate().resetForm();
            });

            // Check Unique Code:
            jQuery.validator.addMethod("checkCode", function(val, elem) {
                    var id = '';
                     var shop_id = $('#shop_id').val();
                    $.ajax({
                        url: "{{ route('admin.promotions.unique-code') }}",
                        method: "POST",
                        data: {
                            "id": id,
                            "discount_code": val,
                            "shop_id": shop_id
                        },
                        async: false,
                        success: function(response) {
                            result = (response.result == true) ? true : false;
                            if (response.result == false && response.message != "") {
                                jQuery.validator.messages.checkCode = response.message;
                            }
                        }
                    })
                    return result;
                },
                function(params, element) {
                    return jQuery.validator.messages.checkExist;
                }
            );

            // jQuery Validate rules
            $('#addPromotionForm').validate({
                rules: {
                    shop_id: {
                        required: true
                    },
                    discount_code: {
                        required: true,
                        maxlength: 250,
                        checkCode: true
                    },
                    discount_type: {
                        required: true
                    },
                    discount_value: {
                        required: true,
                        number: true,
                        validDiscountValue: true
                    },
                    usage_limit: {
                        required: true,
                        digits: true,
                        min: 0
                    },
                    expiry_date: {
                        required: true,
                        dateISO: true
                    },
                    assign_to: {
                        required: true
                    },
                    extra_notes: {
                        maxlength: 1000
                    }
                },
                messages: {
                    discount_code: {
                        maxlength: "Discount code must not exceed 250 characters.",
                        // checkCode: "This promotions code is already in use. Please choose a different code to ensure uniqueness."
                    },
                    discount_value: {
                        number: "Please enter a valid number."
                    },
                    usage_limit: {
                        digits: "Usage limit must be a whole number.",
                        min: "Usage limit must be 0 or more."
                    },
                    expiry_date: {
                        dateISO: "Please enter a valid date (DD-MM-YYYY)."
                    },
                    extra_notes: {
                        maxlength: "Extra notes cannot exceed 1000 characters."
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "shop_id") {
                        $(".shop_id_error").html(error);
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    $('.add_promotion_btn').attr('disabled', true).addClass('loader-active');
                    form.submit();
                }
            });

        });
    </script>
@endsection