@extends('admin.layouts.masterlayout')

@section('title')
    Add Referral Reward
@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')
    Referral Reward
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="dashboard-breadcrumb-section">
            <h2>Add Referral Reward</h2>
            <p><a href="{{ route('admin.referral-reward.index') }}"> Referral Reward List </a> / Add Referral Reward </p>
        </div>
        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0 ">
                <form id="addReferralRewardForm" method="POST" action="{{ route('admin.referral-reward.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>Referral Reward 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="active"
                                        role="switch" {{ old('active') ? 'checked' : '' }} checked>
                                    <label class="form-check-label" for="active">Is Enable?</label>
                                </div>
                            </div>
                            <div class="card-body  referral-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"
                                            aria-label="btn-close"></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="refer_code">Refer Code<span class="required-block">*</span> </label>
                                        <div class="auth-input-position">
                                            <input type="text" name="refer_code" id="refer_code" class="form-control"
                                                placeholder="Enter Refer Code" value="{{ old('refer_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" placeholder="Select Expiry Date"
                                                value="{{ old('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="refer_type">Refer Type<span class="required-block">*</span> </label>
                                        <div class="auth-input-position">
                                            <select name="refer_type" id="refer_type" class="form-control form-menu">
                                                <option value="">Select Refer Type</option>
                                                <option value="0" {{ old('refer_type') == '0' ? 'selected' : '' }}>
                                                    Percentage
                                                </option>
                                                <option value="1" {{ old('refer_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="eligibility">Eligibility<span class="required-block">*</span> </label>
                                        <div class="auth-input-position">
                                            <select name="eligibility" id="eligibility" class="form-control form-menu">
                                                <option value="">Select Eligibility</option>
                                                <option value="0" {{ old('eligibility') == '0' ? 'selected' : '' }}>
                                                    Existing
                                                    Users</option>
                                                <option value="1" {{ old('eligibility') == '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="reward_earned">Reward Earned<span class="required-block">*</span>
                                        </label>
                                        <div class="auth-input-position">
                                            <input type="number" name="reward_earned" id="reward_earned"
                                                class="form-control" placeholder="Enter Reward Earned"
                                                value="{{ old('reward_earned') }}" min="0" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/reward-earned.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6  mb-4">
                                        <label for="referral_limit">Referral Limit<span class="required-block">*</span>
                                        </label>
                                        <div class="auth-input-position">
                                            <input type="number" name="referral_limit" id="referral_limit"
                                                class="form-control" placeholder="Enter Referral Limit"
                                                value="{{ old('referral_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="d-flex justify-content-between align-items-center mt-2 input-auth-checkbox">
                                    <div class="form-check">
                                        <input type="checkbox" name="show_to_users" id="show_to_users" value=""
                                            class="form-check-input">
                                        <label class="form-check-label show-to-users-label" for="show_to_users">
                                            Show To Users
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-3 submit-container">
                        <a href="{{ route('admin.referral-reward.index') }}" class="ct-outline-btn">Cancel</a>
                        <button type="submit" class="ct-btn add_referral_reward_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")
            });

            // Reset fields on shop change
            // $('#shop_id').on('change', function() {
            //     const form = $('#addReferralRewardForm');
            //     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
            // });

            // Check Unique Code:
            jQuery.validator.addMethod("checkCode", function(val, elem) {
                    var id = '';
                    var shop_id = $('#shop_id').val();
                    $.ajax({
                        url: "{{ route('admin.referral-reward.unique-code') }}",
                        method: "POST",
                        data: {
                            "id": id,
                            "refer_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;
                }
            );

            $('#addReferralRewardForm').validate({
                rules: {
                    shop_id: {
                        required: true,
                    },
                    refer_code: {
                        required: true,
                        maxlength: 250,
                        checkCode: true
                    },
                    refer_type: {
                        required: true
                    },
                    eligibility: {
                        required: true
                    },
                    reward_earned: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    referral_limit: {
                        required: true,
                        digits: true,
                        min: 0
                    },
                    expiry_date: {
                        required: true,
                        dateISO: true
                    },
                    extra_notes: {
                        required: false,
                        maxlength: 1000
                    }
                },
                messages: {
                    refer_code: {
                        maxlength: "Refer code cannot exceed 250 characters.",
                        // checkCode: "This referral code is already in use."
                    },
                    reward_earned: {
                        number: "Reward must be a valid number.",
                        min: "Reward must be 0 or more."
                    },
                    referral_limit: {
                        digits: "Referral limit must be an integer.",
                        min: "Referral 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_referral_reward_btn').attr('disabled', true);
                    $('.add_referral_reward_btn').addClass('loader-active');
                    form.submit();
                }
            });
        });
    </script>
@endsection