@extends('layouts.app')
@php
$title = isset($subscription)?'Edit Subscription':'Create Subscription';
@endphp
@section('title', $title)
@section('content')
<link rel="stylesheet" href="{{asset('css/summernote.min.css')}}">
<link rel="stylesheet" href="{{asset('css/bootstrap-tagsinput.css')}}">
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Subscription</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="subscriptionForm" action="{{ isset($subscription) ? route('subscription.update', $subscription->subscription_id) : route('subscription.store') }}"
                        method="post" enctype="multipart/form-data">
                        @csrf
                        @if(isset($subscription))
                        @method('PUT')
                        @endif

                        <div class="card-body">
                            <h4>Subscription Details</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="plan_name">Plan Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="plan_name" id="plan_name"
                                            value="{{ old('plan_name', $subscription->plan_name ?? '') }}" placeholder="Enter Plan Name"
                                            {{ isset($subscription) ? 'readonly' : '' }}><br>
                                        <input type="text" class="form-control" name="plan_name_ar" id="plan_name_ar"
                                            value="{{ old('plan_name_ar', $subscription->plan_name_ar ?? '') }}" placeholder="Enter Plan Name in Arabic"
                                            {{ isset($subscription) ? 'readonly' : '' }}>                                            
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="price">Price<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="price" id="price" value="{{ old('price', $subscription->price ?? '') }}" placeholder="Enter Plan Price">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="duration">Duration (In Days)<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="duration" id="duration" value="{{ old('duration', $subscription->duration ?? '') }}" placeholder="Enter Plan Duration">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="duration">Auto-Renewal Count<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="plan_repeat_times" id="plan_repeat_times" value="{{ old('plan_repeat_times', $subscription->plan_repeat_times ?? '') }}" placeholder="Enter Plan Repeat Times">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Status<span class="text-danger">*</span></label>
                                        <select class="custom-select select2" name="status">
                                            <option value="1" {{ old('status', $subscription->status ?? '') == 1 ? 'selected' : '' }}>Active</option>                                            
                                            <option value="3" {{ old('status', $subscription->status ?? '') == 3 ? 'selected' : '' }}>Cancelled</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <label for="description">Description</label>
                                    <textarea id="description" class="description" name="description">{{ old('description', $subscription->description ?? '') }}</textarea></textarea><br>
                                </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', $subscription->description_ar ?? '') }}</textarea></textarea>
                                </div>                                                             
                            </div>

                        </div>
                        <div class="card-footer">
                            <a href="{{route('subscription.list')}}" class="btn btn-secondary">Cancel</a>
                            <button type="button" id="storeSubscription" class="btn btn-primary">{{ isset($subscription) ? '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/custom.js')}}"></script>
<script src="{{asset('js/summernote-bs4.min.js')}}"></script>
<script src="{{asset('js/bootstrap-tagsinput.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2();
        setTimeout(function() {
            $('.bootstrap-tagsinput').css('width', '100%');
        }, 500);

        // Summernote init
        $('.description').summernote({
            height: 300,
            width: 1200,
        });

        // Remove Summernote error when user types valid input
        $('#description').on('summernote.change', function() {
            const plainText = $('<div>').html($(this).summernote('code')).text().trim();
            const $editor = $('#description').next('.note-editor');

            if (plainText.length > 0 && !/^\s/.test(plainText)) {
                $editor.find('.note-editable').removeClass('is-invalid');
                $editor.find('.invalid-feedback').remove();
            }
        });
        $('#description_ar').on('summernote.change', function() {
            const plainText = $('<div>').html($(this).summernote('code')).text().trim();
            const $editor = $('#description_ar').next('.note-editor');

            if (plainText.length > 0 && !/^\s/.test(plainText)) {
                $editor.find('.note-editable').removeClass('is-invalid');
                $editor.find('.invalid-feedback').remove();
            }
        });

        // Custom validation rules
        $.validator.addMethod("noLeadingSpaceInput", function(value, element) {
            return this.optional(element) || /^\S.*$/.test(value);
        }, "First character cannot be a space.");

        $.validator.addMethod("validDescription", function() {
            const plainText = $('<div>').html($('#description').summernote('code')).text().trim();
            return plainText.length > 0;
        }, "Please enter a description.");

        $.validator.addMethod("noLeadingSpaceEditor", function() {
            const 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.");

        // Validate the form
        $("#subscriptionForm").validate({
            ignore: [],
            rules: {
                plan_name: {
                    required: true,
                    maxlength: 100,
                    noLeadingSpaceInput: true
                },
                plan_name_ar: {
                    required: true,
                    maxlength: 100,
                    noLeadingSpaceInput: true,
                    arabiconly: true
                },
                price: {
                    required: true,
                    number: true,
                },
                description: {
                    required: true,
                    validDescription: true,
                    noLeadingSpaceEditor: true
                },
                description_ar: {
                    required: true,
                    validDescription: true,
                    noLeadingSpaceEditor: true
                },
                status: {
                    required: true
                },
                plan_repeat_times: {
                    required: true,
                    number: true,
                },
                duration: {
                    required: true,
                    number: true,
                    min: 1,
                    max: 180
                }
            },
            messages: {
                plan_name: {
                    required: "Please enter a plan name",
                    maxlength: "Plan Name cannot exceed 100 characters"
                },
                plan_name_ar: {
                    required: "Please enter a plan name in arabic",
                    maxlength: "Plan Name cannot exceed 100 characters",
                    arabiconly: "Please enter Arabic letters and numbers only."
                },
                price: {
                    required: "Price is required.",
                    number: "Please enter a valid price."
                },
                description: {
                    required: "Please enter a description."
                },
                description_ar: {
                    required: "Please enter a description in arabic"
                },
                status: {
                    required: "Please enter a status."
                },
                plan_repeat_times: {
                    required: "Please specify how many times the plan should auto-renew."
                },
                duration: {
                    required: "Please enter a duration in days.",
                    maxlength: "Duration limit 180 days."
                }
            },
            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 if (element.hasClass("select2-hidden-accessible")) {
                    element.next(".select2-container").after(error);
                } else {
                    element.closest('.form-group').append(error);
                }
            },
            highlight: function(element) {
                if ($(element).hasClass("select2-hidden-accessible")) {
                    $(element).next(".select2-container").find(".select2-selection").addClass('is-invalid');
                } else {
                    $(element).addClass('is-invalid');
                }
            },
            unhighlight: function(element) {
                if ($(element).hasClass("select2-hidden-accessible")) {
                    $(element).next(".select2-container").find(".select2-selection").removeClass('is-invalid');
                } else {
                    $(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();
            }
        });

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