@extends('layouts.app')

@php
$title = isset($promoCode)?'Edit Promo Code':'Create Promo Code';
@endphp

@section('title', $title)

@section('content')
<link rel="stylesheet" href="{{asset('css/summernote.min.css')}}">
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Promo Code Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">{{$title}}</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">{{$title}}</h3>
                    </div>

                    <form id="promoCodeForm" action="{{ isset($promoCode) ? route('promocode.update', $promoCode->promo_code_id) : route('promocode.store') }}"
                        method="post" enctype="multipart/form-data">
                        @csrf

                        @if(isset($promoCode))
                        @method('PUT')
                        @endif

                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="name">Code <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="code" id="code" value="{{ old('code', $promoCode->code ?? '') }}" placeholder="Enter code">

                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="discount_percentage">Discount Percentage <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" name="discount_percentage" id="discount_percentage"
                                            value="{{ old('discount_percentage', $promoCode->discount_percentage ?? '') }}"
                                            placeholder="Enter discount percentage" min="1" max="100" step="0.01">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="valid_from">Valid From Date <span class="text-danger">*</span></label>
                                        <div class="input-group date" id="valid_from">
                                            <input type="text" class="form-control" id="valid_from_datepicker" name="valid_from" value="{{ old('valid_from', $promoCode->valid_from ?? '') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="valid_to">Valid To Date <span class="text-danger">*</span></label>
                                        <div class="input-group date" id="valid_to">
                                            <input type="text" class="form-control" id="valid_to_datepicker" name="valid_to" value="{{ old('valid_to', $promoCode->valid_to ?? '') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <label>Status </label>
                                    <select class="custom-select select2" name="status">
                                        <option value="1" {{ isset($promoCode) && $promoCode->status == 1 ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ isset($promoCode) && $promoCode->status == 0 ? 'selected' : '' }}>In Active</option>
                                    </select>
                                </div>
                            </div>                            
                            <div class="row">
                                <div class="col-sm-12">
                                    <label for="description">Description</label>
                                    <textarea id="description" class="description" name="description">{{ old('description', $promoCode->description ?? '') }}</textarea>                                    
                                </div>
                                <div class="col-sm-12">
                                    <label for="description">Description (In Arabic)</label>                                    
                                    <textarea id="description_ar" class="description" name="description_ar">{{ old('description_ar', $promoCode->description_ar ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="{{route('promocode.list')}}" class="btn btn-secondary">Cancel</a>
                            <button type="button" id="storePromoCode" class="btn btn-primary">{{ isset($promoCode) ? 'Update' : 'Submit' }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script src="{{asset('js/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/additional-methods.min.js')}}"></script>
<script src="{{asset('js/summernote-bs4.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2();

        // Initialize "valid from" datepicker
        $('#valid_from_datepicker').datepicker({
            uiLibrary: 'bootstrap5',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            startDate: new Date()
        }).on('change', function() {
            let validFrom = $(this).val();
            $('#valid_to_datepicker').datepicker('destroy').datepicker({
                uiLibrary: 'bootstrap5',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true,
                startDate: validFrom
            });
        });

        // Initialize "valid to" datepicker
        $('#valid_to_datepicker').datepicker({
            uiLibrary: 'bootstrap5',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            startDate: new Date()
        });

        // Initialize Summernote
        $('.description').summernote({
            height: 300,
            width: 1200
        });
        // Remove error when user corrects Summernote content
        $('#description').on('summernote.change', function() {
            var plainText = $('<div>').html($(this).summernote('code')).text().trim();
            if (plainText.length > 0 && !/^\s/.test(plainText)) {
                $('#description').next('.note-editor').find('.note-editable').removeClass('is-invalid');
                $('#description').next('.note-editor').find('.invalid-feedback').remove();
            }
        });
        $('#description_ar').on('summernote.change', function() {
            var plainText = $('<div>').html($(this).summernote('code')).text().trim();
            if (plainText.length > 0 && !/^\s/.test(plainText)) {
                $('#description_ar').next('.note-editor').find('.note-editable').removeClass('is-invalid');
                $('#description_ar').next('.note-editor').find('.invalid-feedback').remove();
            }
        });
        // Custom validator: no leading space in input
        $.validator.addMethod("noLeadingSpaceInput", function(value, element) {
            return this.optional(element) || /^\S.*$/.test(value);
        }, "First character cannot be a space.");

        // Custom validator: description not empty
        $.validator.addMethod("validDescription", function() {
            var plainText = $('<div>').html($('#description').summernote('code')).text().trim();
            return plainText.length > 0 && plainText !== "<p><br></p>";
        }, "Please enter a description.");

        // Custom validator: no leading space in description
        $.validator.addMethod("noLeadingSpaceEditor", function() {
            var plainText = $('<div>').html($('#description').summernote('code')).text();
            return !/^\s/.test(plainText);
        }, "First character cannot be a space.");        

        $.validator.addMethod("arabiconly", function(value, element) {
            return this.optional(element) || !/[A-Za-z]/.test(value);
        }, "Please enter Arabic letters and numbers only.");

        // Apply form validation
        $("#promoCodeForm").validate({
            ignore: [],
            rules: {
                code: {
                    required: true,
                    maxlength: 50,
                    noLeadingSpaceInput: true
                },
                discount_percentage: {
                    required: true,
                    number: true,
                    min: 1,
                    max: 100
                },
                valid_from: {
                    required: true
                },
                valid_to: {
                    required: true
                },
                description: {
                    required: true,
                    validDescription: true,
                    noLeadingSpaceEditor: true
                },
                description_ar: {
                    required: true
                }
            },
            messages: {
                code: {
                    required: "Please enter a code",
                    maxlength: "Code cannot exceed 50 characters"
                },
                discount_percentage: {
                    required: "Please enter a discount percentage",
                    number: "Please enter a valid number",
                    min: "Discount must be at least 1%",
                    max: "Discount cannot exceed 100%"
                },
                valid_from: {
                    required: "Please select a valid from date"
                },
                valid_to: {
                    required: "Please select a valid to date"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                if (element.attr("id") === "description") {
                    $("#description").next('.note-editor').append(error);
                } else if (element.attr("id") === "description_ar") {
                    $('#description_ar').next('.note-editor').append(error);
                }else {
                    element.closest('.form-group').append(error);
                }
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                const content = $('#description').summernote('code').trim();
                $('#description').val(content); 
                
                var summernoteContentAr = $('#description_ar').summernote('code').trim();
                var plainText = $('<div>').html(summernoteContentAr).text().replace(/\u00a0/g, ' ')
                    .trim();
                $("#description_ar").val(summernoteContentAr);
                if (plainText === "") {
                    $("#description_ar").val("");
                    $("#description_ar").next('.note-editor').find('.invalid-feedback').remove();
                    $("#description_ar").next('.note-editor').append(
                        '<span class="invalid-feedback d-block">Please enter a description in arabic</span>'
                    );
                    return false;
                }
                form.submit();
            }
        });

        $("#storePromoCode").click(function() {
            if ($("#promoCodeForm").valid()) {
                $("#promoCodeForm").submit();
            }
        });
    });
</script>
@endsection