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

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

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


            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;
            }

            .benefit-row {
                margin-top: 16px;
            }

            .benefit-action-col {
                display: flex;
                height: 100%;
                align-items: flex-end;
                justify-content: flex-start;
            }

            .benefit-action-col .btn {
                min-width: 40px;
                height: 40px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                font-size: 20px;
            }

            .add-benefit-row {
                margin-top: 12px;
            }
        </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.update')
        <div class="padding edit-package">
            <div class="box">
                <div class="box-header m-b-2">
                    <div class="box-header-left">
                        <h3 class="d-block">Edit Subscription </h3>
                        <small class="d-inline-block">
                            <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                                href="{{ route('subscription_plan') }}">Subscription Management</a>/
                            <span>Edit 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">
                                    <input type="hidden" name="subscription_id" id="subscription_id"
                                        value="{{ $getSubscriptionDetails->id }}">
                                    <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="{{ $getSubscriptionDetails->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="{{ $getSubscriptionDetails->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="" disabled>Select Plan Type</option>
                                            @foreach($planTypes as $pt)
                                                <option value="{{ $pt->id }}"
                                                    {{ (old('plan_type_id', $getSubscriptionDetails->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"
                                                value="{{ $getSubscriptionDetails->duration }}">
                                            <select name="validity_type" id="validity_type" class="custom-select" style="width:120px;">
                                                <option value=""
                                                    {{ old('validity_type', $getSubscriptionDetails->validity_type) == '' ? 'selected' : '' }}>
                                                    Select Validity Period </option>
                                                <option value="days"
                                                    {{ old('validity_type', $getSubscriptionDetails->validity_type) == 'days' ? 'selected' : '' }}>
                                                    Days</option>
                                                <option value="weeks"
                                                    {{ old('validity_type', $getSubscriptionDetails->validity_type) == 'weeks' ? 'selected' : '' }}>
                                                    Weeks</option>
                                                <option value="months"
                                                    {{ old('validity_type', $getSubscriptionDetails->validity_type) == 'months' ? 'selected' : '' }}>
                                                    Months</option>
                                                <option value="years"
                                                    {{ old('validity_type', $getSubscriptionDetails->validity_type) == 'years' ? 'selected' : '' }}>
                                                    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="{{ $getSubscriptionDetails->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" {{ $getSubscriptionDetails->pricing_model == 'fixed' ? 'selected' : '' }}>Fixed Price</option>
                                            <option value="per_branch" {{ $getSubscriptionDetails->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="{{ $getSubscriptionDetails->pricing_model == 'per_branch' ? '' : '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="{{ $getSubscriptionDetails->price_per_branch ?? 0 }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                @php $i = $index ?? 0; @endphp
                                @if ($getSubscriptionDetails->benefits->count() > 0)
                                    @foreach ($getSubscriptionDetails->benefits as $index => $benefit)
                                        <div class="row benefit-row benefit_row dynamic_field" data-index="{{ $index }}">
                                            <!-- Hidden ID -->
                                            <input type="hidden" name="benefit_ids[{{ $index }}]"
                                                value="{{ $benefit->id }}">

                                            <!-- English Benefit -->
                                            <div class="col-md-5 col-lg-5">
                                                @if ($index == 0)
                                                    <label class="form-control-label">
                                                        Benefit <span class="text-danger">*</span>
                                                    </label>
                                                @endif
                                                <input type="text" name="benefit[{{ $index }}][benefits_en]"
                                                    class="form-control" placeholder="Benefit Name [EN]"
                                                    value="{{ old('benefit.' . $index . '.benefits_en', $benefit->benefits_name) }}">
                                                @error("benefit.{$index}.benefits_en")
                                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <!-- Arabic Benefit -->
                                            <div class="col-md-5 col-lg-5">
                                                @if ($index == 0)
                                                    <label class="form-control-label invisible d-md-block">&nbsp;</label>
                                                @endif
                                                <input type="text" name="benefit[{{ $index }}][benefits_ar]"
                                                    class="form-control form-control-ar" placeholder="اسم الفائدة [AR]"
                                                    dir="rtl"
                                                    value="{{ old('benefit.' . $index . '.benefits_ar', $benefit->benefits_name_ar) }}">
                                                @error("benefit.{$index}.benefits_ar")
                                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <!-- Remove Button -->
                                                <div class="col-md-2 col-lg-2 benefit-action-col">
                                            @if ($getSubscriptionDetails->benefits->count() > 1 && $index > 0)
                                                    <button type="button" 
                                                            class="btn btn-danger remove" 
                                                            data-benefit-index="{{ $index }}">
                                                        -
                                                    </button>
                                            @endif
                                                </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <div id="dynamic-values">
                            </div>

                            <div class="row add-benefit-row">
                                <div class="col-md-10 col-lg-10"></div>
                                <div class="col-md-2 col-lg-2 benefit-action-col">
                                    <button type="button" class="btn btn-success add-more">
                                        +
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12">
                            <div class="form-group m-t-md">
                                <button type="submit" plan_nameclass="solid-button m-r-1" id="submitDetail">
                                    Update</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_id: function() {
                                    return $('#subscription_id').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.update') }}",
                        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 updated successfully'
                                }).then(() => {
                                    window.location.href =
                                        "{{ route('subscription_plan') }}";
                                });
                            }
                        }
                    });
                }
            });
            /* =========================================
               ADD VALIDATION TO FIRST STATIC BENEFIT
            ========================================= */
            addBenefitValidation(0);
            
            /* =========================================
               ADD VALIDATION TO EXISTING BENEFITS FROM DATABASE
            ========================================= */
            @if ($getSubscriptionDetails->benefits->count() > 0)
                @foreach ($getSubscriptionDetails->benefits as $index => $benefit)
                    @if ($index > 0) // Skip index 0 as it's already added above
                        addBenefitValidation({{ $index }});
                    @endif
                @endforeach
                
                // Set productIndex to the highest existing index + 1
                let existingBenefitCount = {{ $getSubscriptionDetails->benefits->count() }};
                productIndex = existingBenefitCount;
            @else
                // If no existing benefits, start from 1
                productIndex = 1;
            @endif
            
            // Initialize button states on page load (no timeout needed)
            updateRemoveButtons();
            /* =========================================
               ADD MORE (Dynamic Fields)
            ========================================= */
            $(document).on('click', '.add-more', function() {
                let index = productIndex;
                let html = `
                    <div class="row benefit-row benefit_row dynamic_field">

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

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

                        <div class="col-md-2 col-lg-2 benefit-action-col">
                            <button type="button"
                                class="btn btn-danger remove"
                                data-benefit-index="${index}">
                                -
                            </button>
                        </div>

                    </div>`;

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

            $(document).on('click', '.remove', function() {
                // Count total benefit fields (both existing and dynamic)
                var totalBenefits = $('.benefit_row').length;
                
                // Prevent deletion if only one benefit remains
                if (totalBenefits <= 1) {
                    alert('At least one benefit is required. You cannot delete the last benefit.');
                    return false;
                }
                
                // Get the benefit row to be removed
                var benefitRow = $(this).closest('.benefit_row');
                var benefitIndex = benefitRow.find('.remove').data('benefit-index');
                
                // Remove validation rules for this specific benefit
                if (benefitIndex !== undefined) {
                    $(`[name="benefit[${benefitIndex}][benefits_en]"]`).rules('remove');
                    $(`[name="benefit[${benefitIndex}][benefits_ar]"]`).rules('remove');
                }
                
                // Remove the benefit row
                benefitRow.remove();
                
                // Update button states immediately
                updateRemoveButtons();
            });

            // Function to update remove button states
            function updateRemoveButtons() {
              
                // Count total benefit fields (both existing and dynamic)
                var totalBenefits = $('.benefit_row').length;
                
                // Hide all remove buttons if only one benefit remains, otherwise show them
                if (totalBenefits <= 1) {
                    $('.remove').hide();
                } else {
                    $('.remove').show();
                }
            }

           


            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