@extends('dashboard.layouts.master')
@section('title', 'Subscription Management| Admin Panel')
@include('sweetalert::alert')
@push('after-styles')
    @can('subscription.plan.create')
        <style type="text/css">
            #blah {
                height: 50% !important;
                width: 25% !important;
            }

            .row 
            .dynamic_field {
                    margin-top: 20px;
            }

            #blah1 {
                height: 50% !important;
                width: 25% !important;
            }

            input[type="time"] {
                cursor: pointer;
            }

            .product-single-variant {
                margin: 30px 0 10px 0;
                padding: 20px 0px 0 0;
            }

            .product-single-variant:not(:first-child) {
                border-top: 1px solid gray;
            }

            .error {
                text-align: left;
                display: block;
                color: red;
            }

            .newColoradded .form-check-inpuGovernoratet {
                margin-left: 0;
            }

            .input-group>.form-control,
            .input-group>.custom-select {
                height: calc(1.5em + 0.75rem + 2px) !important;
            }

            .input-group>.custom-select {
                border-top-left-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
            }

            .duration-group {
                display: flex;
                align-items: center;
            }

            .duration-group .form-control {
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                margin-right: -1px;
            }

            .duration-group .custom-select {
                border-top-left-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
            }

            .duration-group + .text-danger {
                display: block !important;
                margin-top: 5px;
                width: 100%;
            }

            .duration-group + .text-danger + .text-danger {
                margin-top: 2px;
            }
        </style>
        <link href="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

        <style type="text/css">
            .error {
                color: red;
                margin-left: 5px;
            }
        </style>
    @endcan
@endpush
    @section('content')
        @can('subscription.plan.create')
        <div class="padding edit-package">
            <div class="box">
                <div class="box-header m-b-2">
                    <div class="box-header-left">
                        <h3 class="d-block">Create Subscription </h3>
                        <small class="d-inline-block">
                            <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                                href="{{ route('subscription_plan') }}">Subscription Management</a>/
                            <span>Create Subscription </span>
                        </small>
                    </div>
                    <div class="box-header-right">
                        <div class="box-tool">
                            <ul class="nav">
                                <li class="nav-item inline">
                                    <a class="nav-link" href="{{ route('subscription_plan') }}">
                                        <i class="material-icons md-18">×</i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="loader"></div>

                <div class="box-body">
                    {{ Form::open(['method' => 'POST', 'files' => true, 'enctype' => 'multipart/form-data', 'id' => 'storeForm']) }}
                    <div class="personal_informations">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Plan Name[EN]<span
                                            class="valid_field">*</span></label>
                                    <input type="text" name="plan_name" id="plan_name" class="form-control"
                                        maxlength="30" placeholder="Plan Name[EN]" value="{{ old('plan_name') }}">

                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Plan Name[AR]<span
                                            class="valid_field">*</span></label>
                                    <input type="text" name="plan_name_ar" id="plan_name_ar" class="form-control"
                                        maxlength="30" placeholder="Plan Name[AR]" value="{{ old('plan_name_ar') }}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Select Plan Type<span
                                                class="valid_field">*</span></label>
                                        <select name="plan_type_id" id="plan_type_id" class="form-control">
                                            <option value="" selected disabled>Select Plan Type</option>
                                            @foreach($planTypes as $pt)
                                                <option value="{{ $pt->id }}" {{ old('plan_type_id') == $pt->id ? 'selected' : '' }}>
                                                    {{ $pt->name }}
                                                </option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">
                                            Duration<span class="valid_field">*</span>
                                        </label>
                                        <div class="duration-group">
                                            <input type="number" name="validity_period" id="validity_period"
                                                class="form-control" placeholder="Enter number" min="1">
                                            <select name="validity_type" id="validity_type" class="custom-select"
                                                style="width:120px;">
                                                <option value="">Select Validity Period </option>
                                                <option value="days">Days</option>
                                                <option value="weeks">Weeks</option>
                                                <option value="months">Months</option>
                                                <option value="years">Years</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Base Price <span class="valid_field">*</span></label>
                                        <input type="text" name="price" id="price" class="form-control"
                                            maxlength="30" placeholder="Base Price" value="{{ old('price') }}">
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Pricing Model <span class="valid_field">*</span></label>
                                        <select name="pricing_model" id="pricing_model" class="form-control">
                                            <option value="fixed" {{ old('pricing_model') == 'fixed' ? 'selected' : '' }}>Fixed Price</option>
                                            <option value="per_branch" {{ old('pricing_model') == 'per_branch' ? 'selected' : '' }}>Per Branch Pricing</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12" id="price_per_branch_container" style="display: none;">
                                    <div class="form-group">
                                        <label class="form-control-label">Price per Branch <span class="valid_field">*</span></label>
                                        <input type="text" name="price_per_branch" id="price_per_branch" class="form-control"
                                            maxlength="30" placeholder="Price per Branch" value="{{ old('price_per_branch', 0) }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                @php $i = $index ?? 0; @endphp
                                <div class="row mt-2 dynamic_field benefit_row " data-index="{{ $i }}">
                                    <div class="col-md-3">
                                        <label class="form-control-label">Benefits<span class="valid_field">*</span></label>
                                        <input type="text" name="benefit[{{ $i }}][benefits_en]"
                                            class="form-control" placeholder="Benefit Name [EN]"
                                            value="{{ old('benefits_en.0') }}">
                                        @error('benefits_en.0')
                                            <span class="help-block"><span style="color:red;"
                                                    class='validate'>{{ $message }}</span></span>
                                        @enderror
                                    </div>

                                    <div class="col-md-3" style="margin-top: 37px;">
                                        <input type="text" name="benefit[{{ $i }}][benefits_ar]"
                                            class="form-control form-control-ar" placeholder="Benefits[AR]"
                                            value="{{ old('benefits_ar.0') }}">
                                        @error('benefits_ar.0')
                                            <span class="help-block"><span style="color:red;"
                                                    class='text-error-ar'>{{ $message }}</span></span>
                                        @enderror
                                    </div>
                                    <div class="col-md-3" style="margin-top: 37px;">

                                        <button type="button" class="btn btn-success btn-add add-more"
                                            style="padding: 1px 12px;">+</button>
                                    </div>
                                </div>
                            </div>
                            <div id="dynamic-values">
                            </div>
                            <div class="col-lg-12 col-md-12">
                                <div class="form-group m-t-md">
                                    <button type="submit" class="solid-button m-r-1" id="submitDetail">
                                        {!! __('backend.add') !!}</button>
                                    <a href="{{ route('subscription_plan') }}" class="border-btn">
                                        {!! __('backend.cancel') !!}
                                    </a>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        @else
            <input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
            <script type="text/javascript">
                var redirect_url = $('#redirect_url').val();
                window.location.replace(redirect_url);
            </script>
        @endcan
@endsection
@push('after-scripts')
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script src="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/summernote/dist/summernote.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript">
        function isNumberKey(evt) {
            var charCode = evt.which ? evt.which : evt.keyCode;

            if (charCode >= 48 && charCode <= 57) {
                return true;
            }
            return false;
        }

        $.validator.addMethod(
            "noSpecialChars",
            function(value, element) {
                return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
            },
            "Special characters are not allowed."
        );

        $(document).ready(function() {

            /* =========================================
               Custom Methods
            ========================================= */

            $.validator.addMethod("noSpecialChars", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9\s]+$/.test(value);
            }, "Special characters are not allowed");

            $.validator.addMethod("arabicEnglishOnly", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9\u0600-\u06FF\s]+$/.test(value);
            }, "Special characters are not allowed");

            $.validator.addMethod("priceFormat", function(value, element) {

                if (this.optional(element)) return true;

                //  no negative values
                if (parseFloat(value) < 0) {
                    return false;
                }

                //  allow only numbers and decimal
                if (!/^\d+(\.\d+)?$/.test(value)) {
                    return false;
                }

                //  allow max 3 decimal places
                if (value.includes('.')) {
                    let decimals = value.split('.')[1];
                    if (decimals.length > 3) {
                        return false;
                    }
                }

                return true;

            }, "Only positive numbers allowed");


            var validator = $("#storeForm").validate({
                ignore: [],

                rules: {
                    plan_name: {
                        required: true,
                        maxlength: 30,
                        noSpecialChars: true,
                        remote: {
                            url: "{{ route('check-plan-name') }}",
                            type: "POST",
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                plan_name: function() {
                                    return $('#plan_name').val();
                                }
                            }
                        }
                    },
                    plan_name_ar: {
                        required: true,
                        maxlength: 30,
                        arabicEnglishOnly: true
                    },
                    plan_type_id: {
                        required: true
                    },
                    validity_period: {
                        required: true,
                        number: true
                    },
                    validity_type: {
                        required: true
                    },
                    price: {
                        required: true,
                        priceFormat: true
                    },
                },

                messages: {
                    plan_name: {
                        required: "Name [EN] field is required",
                        maxlength: "Maximum 30 characters allowed",
                        remote: "The plan name already exist"
                    },
                    plan_name_ar: {
                        required: "Name [AR] field is required",
                        maxlength: "Maximum 30 characters allowed"
                    },
                    plan_type_id: {
                        required: "Please select plan type"
                    },
                    validity_period: {
                        required: "Validity period field is required"
                    },
                    validity_type: {
                        required: "Please select validity period"
                    },
                    price: {
                        required: "Price field is required"
                    }
                },

                errorElement: "span",
                errorClass: "text-danger",
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "validity_period" || element.attr("name") == "validity_type") {
                        // Check if there's already an error after the duration group
                        var existingError = $(".duration-group + .text-danger");
                        if (existingError.length === 0) {
                            error.insertAfter(".duration-group");
                        } else {
                            // Find the last error and insert after it
                            var lastError = $(".duration-group + .text-danger:last");
                            error.insertAfter(lastError);
                        }
                    } else {
                        error.insertAfter(element);
                    }
                },

                submitHandler: function(form) {

                    var form_data = new FormData(form);

                    $.ajax({
                        url: "{{ route('subscription_plan.store') }}",
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        processData: false,
                        contentType: false,
                        data: form_data,
                        dataType: 'json',

                        success: function(data) {

                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: data.msg ??
                                        'Subscription saved successfully'
                                }).then(() => {
                                    window.location.href =
                                        "{{ route('subscription_plan') }}";
                                });
                            }
                        }
                    });
                }
            });
            /* =========================================
               ADD VALIDATION TO FIRST STATIC BENEFIT
            ========================================= */
            addBenefitValidation(0);
            /* =========================================
               ADD MORE (Dynamic Fields)
            ========================================= */
            let productIndex = 1;
            $(document).on('click', '.add-more', function() {
                let index = productIndex;
                let html = `
                    <div class="row dynamic_field mt-2 mb-2">

                        <div class="col-md-3">
                            <input type="text"
                                name="benefit[${index}][benefits_en]"
                                class="form-control"
                                placeholder="Benefit Name [EN]">
                        </div>

                        <div class="col-md-3">
                            <input type="text"
                                name="benefit[${index}][benefits_ar]"
                                class="form-control"
                                placeholder="Benefit Name [AR]">
                        </div>

                        <div class="col-md-3">
                            <button type="button"
                                class="btn btn-danger remove"
                                style="width:100%">−</button>
                        </div>

                    </div>`;

                $('#dynamic-values').append(html);
                addBenefitValidation(index);
                productIndex++;
            });

            $(document).on('click', '.remove', function() {
                $(this).closest('.dynamic_field').remove();
            });

            function addBenefitValidation(index) {
                $(`[name="benefit[${index}][benefits_en]"]`).rules("add", {
                    required: true,
                    noSpecialChars: true,
                    messages: {
                        required: "The Benefit [EN] field is required",
                        noSpecialChars: "Special characters are not allowed"
                    }
                });

                $(`[name="benefit[${index}][benefits_ar]"]`).rules("add", {
                    required: true,
                    arabicEnglishOnly: true,
                    messages: {
                        required: "The Benefit [AR] field is required",
                        arabicEnglishOnly: "Special characters are not allowed"
                    }
                });
            }

            function togglePricePerBranch() {
                if ($('#pricing_model').val() === 'per_branch') {
                    $('#price_per_branch_container').show();
                } else {
                    $('#price_per_branch_container').hide();
                }
            }

            $('#pricing_model').on('change', function() {
                togglePricePerBranch();
            });

            togglePricePerBranch();
        });
    </script>
@endpush