@extends('admin.layouts.masterlayout')

@section('title')
    Edit 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>Edit Promotion</h2>
            <p><a href="{{ route('admin.promotions.index') }}">Promotion List</a> / Edit Promotion</p>
        </div>
        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0">
                <form id="editPromotionForm" method="POST" action="{{ route('admin.promotions.update', $promotion->id) }}">
                    @csrf
                    @method('PUT')
                    <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" {{ $promotion->status === 'active' ? '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" id="shop_id" name="shop_id">
                                            <option value="">Select a Shop</option>
                                            @foreach ($shops as $shop)
                                                <option value="{{ $shop->id }}"
                                                    {{ $promotion->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', $promotion->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', $promotion->expiry_date ?? '') }}"
                                                {{ strtotime($promotion->expiry_date) < strtotime('today') ? 'disabled' : '' }}
                                                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">
                                                <option value="">Select Type</option>
                                                <option value="0"
                                                    {{ $promotion->discount_type == '0' ? 'selected' : '' }}>Percentage
                                                </option>
                                                <option value="1"
                                                    {{ $promotion->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">
                                                <option value="">Select Assign To</option>
                                                <option value="0"
                                                    {{ $promotion->assign_to == '0' ? 'selected' : '' }}>Existing Users
                                                </option>
                                                <option value="1"
                                                    {{ $promotion->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', $promotion->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', $promotion->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', $promotion->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"
                                        {{ $promotion->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>Update</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();

            var expiryDate = '{{ $promotion->expiry_date }}';
            var today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format

            // Initialize flatpickr with a condition based on stored expiry date
            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: (expiryDate && expiryDate >= today) ? today : null, // Only restrict to today or future dates if stored date is today or future
                disable: (expiryDate && expiryDate < today) ? ['all'] : [], // Disable input if the date is in the past
                static: false,
                appendTo: document.querySelector(".auth-input-position-datepicker")
            });

            // Update validation logic
            if (expiryDate && expiryDate < today) {
                // If the expiry date is in the past, make the field not required
                $('#expiry_date').rules('remove', 'required');
            }

            // 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;
            }, 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 = $('#editPromotionForm');
            //     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();
            // });

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

            // Check Unique Code:
            jQuery.validator.addMethod("checkCode", function(val, elem) {
                    var id = '{{ $promotion->id }}';
                     var shop_id = '{{$promotion->shop_id}}';
                    $.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;
                }
            );

            $('#editPromotionForm').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: expiryDate >=
                        today, // Make the field required only if the date is today or in the future
                        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