@extends('admin.layouts.app')
@section('title')
    {{ __('create') }}
@endsection
@section('content')
    @if (userCan('plan.create'))
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title line-height-36">{{ __('create') }} {{ __('plan') }}</h3>
                            <a href="{{ route('module.plan.index') }}"
                                class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                                <i class="fas fa-arrow-left"></i>&nbsp; {{ __('back') }}
                            </a>
                        </div>
                        <div class="card-body">
                           <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form action="{{ route('module.plan.store') }}" method="POST">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="title">{{ __('Plan Title') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="title" name="title" value="{{ old('title') }}"
                                                        class="form-control @error('title') is-invalid @enderror"
                                                        placeholder="{{ __('Enter Title') }}{{ defaultCurrencySymbol() }}">
                                                    @error('title')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="plan_category">{{ __('Plan Category') }} <small
                                                        class="text-danger">*</small></label>
                                                        <select name="plan_category" id="plan_category" class="form-control @error('category') is-invalid @enderror">
                                                            <option value="">Select Category</option>
                                                            @foreach (@$planCategories as $category)
                                                                <option value="{{@$category->name}}" @if(old('plan_category') == @$category->name) selected @else @endif data-value="{{@$category->id}}">{{@$category->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    @error('category')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="plan_sub_category">{{ __('Sub Category') }} <small
                                                        class="text-danger">*</small></label>
                                                    <select name="plan_category_id" id="plan_sub_category" class="form-control @error('plan_category_id') is-invalid @enderror">
                                                        <option value="">Select Category First</option>
                                                    </select>
                                                    @error('plan_category_id')
                                                    <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            {{-- <div class="plan_sub_category">
                                                <select name="plan_category" id="plan_category">
                                                    <option value="">Select Sub Category</option>
                                                </select>
                                            </div> --}}
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="price">{{ __('Code') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="code" name="code" value="{{ old('code') }}"
                                                        class="form-control @error('code') is-invalid @enderror"
                                                        placeholder="{{ __('ex : GD123') }}{{ defaultCurrencySymbol() }}">
                                                    @error('code')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="price">{{ __('price') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="price" name="price" value="{{ old('price') }}"
                                                        class="form-control @error('price') is-invalid @enderror"
                                                        placeholder="EX: 100000{{ defaultCurrencySymbol() }}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').substring(0, 10);">
                                                    @error('price')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="offer_price">Offer Price
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="offer_price" name="offer_price" value="{{ old('offer_price') }}"
                                                        class="form-control @error('offer_price') is-invalid @enderror"
                                                        placeholder="EX: 100000{{ defaultCurrencySymbol() }}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').substring(0, 10);">
                                                    @error('offer_price')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="duration">Duration (Number of Days)
                                                       <small
                                                            class="text-danger">*</small></label>
                                                    <input type="text" id="duration" name="duration" value="{{ old('duration') }}"
                                                        class="form-control @error('duration') is-invalid @enderror"
                                                        placeholder="EX: 356" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 5);">
                                                    @error('duration')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="country">{{ __('Country') }} <small
                                                        class="text-danger">*</small></label>
                                                        <select name="country_id" id="country" class="form-control select2bs4 w-100-p @error('country_id') is-invalid @enderror">
                                                            <option {{ old('country_id') ? '' : 'selected' }} value="" selected>
                                                                {{ __('Select Country') }}
                                                            </option>
                                                            @foreach (@$countries as $country)
                                                                <option {{ old('country_id') == @$country['id'] ? 'selected' : '' }} value="{{ @$country['id'] }}">{{ @$country['name'] }}</option>
                                                            @endforeach
                                                        </select>
                                                    @error('country_id')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="whatsappTemplate">Whatsapp Template<small
                                                        class="text-danger">*</small></label>
                                                        <select name="whatsapp_template_name" id="whatsapp_template_name" class="form-control select2bs4 w-100-p @error('whatsapp_template_name') is-invalid @enderror">
                                                            <option {{ old('whatsapp_template_name') ? '' : 'selected' }} value="" selected>
                                                                Select Whatsapp Template
                                                            </option>
                                                            @foreach (@$whatsappTemplates as $whatsappTemplate)
                                                                <option {{ old('whatsapp_template_name') == @$whatsappTemplate['name'] ? 'selected' : '' }} value="{{ @$whatsappTemplate['name'] }}">{{ @$whatsappTemplate['name'] }}</option>
                                                            @endforeach
                                                        </select>
                                                    @error('whatsapp_template_name')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>

                                            
                                            <div class="col-md-6 mt-1 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label" for="frontend_show">
                                                        {{ __('show_frontend') }} <small class="text-danger">*</small>
                                                    </label> <br>
                                                    <div class="border borderHeight rounded">
                                                        <div class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" id="show_frontend_yes" name="frontend_show" class="plan_type_selection custom-control-input" value="1" checked>
                                                            <label class="custom-control-label" for="show_frontend_yes">{{ __('yes') }}</label>
                                                        </div>
                                                        <div class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" id="show_frontend_no" name="frontend_show" class="plan_type_selection custom-control-input" value="0">
                                                            <label class="custom-control-label" for="show_frontend_no">
                                                                {{ __('no') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    @error('frontend_show')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            @php
                                                $count = 1;
                                                $key_name = "";
                                                $value = "";
                                                $custom_value = "";
                                            @endphp
                                             
                                            @foreach (old('features', []) as $feature)
                                                @if($flag == 1)
                                                     
                                                @break
                                                @endif
                                            @endforeach
                                            <div class="row">
                                                <div class="" >
                                                    <div id="links">
                                                        <div class="row ">
                                                            <div class="form-group col-4">
                                                                <x-forms.label name="Features Name" :required="false" />
                                                                <x-forms.input type="text" name="features[0][key_name]"  id="features[0][key_name]"
                                                                value="{{ $key_name}}"
                                                                    placeholder="Enter Features Name" />
                                                                    <small class="text-danger"></small>
                                                            </div>
                                                            <div class="form-group col-3">
                                                                <x-forms.label name="Features selected" :required="false" />
                                                                <select name="features[0][value]" id="features[0][value]" class="feature_selected form-control select2bs4 w-100-p @error('feature_selected') is-invalid @enderror" onchange="featureHideShow(0)">
                                                                    <option @if($value == 1) selected @else @endif value="1">YES</option>
                                                                    <option @if( $value == 0) selected @else @endif value="0">NO</option>
                                                                    <option @if( $value == "custom") selected @else @endif value="custom">Custom</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-3 featureHide" id="featureHide0" style="display: none;">
                                                                <x-forms.label name="Custom Value" :required="false" />
                                                                <x-forms.input type="text" name="features[0][custom_value]" id="features[0][custom_value]"
                                    
                                                                    value="{{ $custom_value}}"
                                                                    placeholder="Enter Custom Value" />
                                                                    <small class="text-danger"></small>
                                                            </div>
                                                            <div class="form-group col-1 mt-4 d-flex align-items-end">
                                                                

                                                                <a role="button" onclick="add_features_field()"
                                                                    class="btn bg-primary text-light"><i class="fas fa-plus"></i></a>
                                                            
                                                            </div>
                                                        
                                                        </div>  

                                                    @php
                                                        $count = 1;
                                                    @endphp
                                                     
                                                    @foreach (old('features', []) as $feature)
                                                        @if($flag == 1)
                                                             
                                                        @else
                                                            <div class="row">
                                                                <div class="form-group col-4">
                                                                    <x-forms.label name="Features Name" :required="false" />
                                                                    <x-forms.input type="text" name="features[{{ $count }}][key_name]" id="features_name_{{ $count }}"
                                                                        value="{{ $feature['key_name'] }}" placeholder="Enter Features Name" />
                                                                    <small class="text-danger"></small>
                                                                </div>
                                                                <div class="form-group col-3">
                                                                    <x-forms.label name="Features selected" :required="false" />
                                                                    <select name="features[{{ $count }}][value]" id="features[{{ $count }}][value]"
                                                                        class="feature_selected form-control select2bs4 w-100-p @error('feature_selected') is-invalid @enderror"
                                                                        onchange="featureHideShow({{ $count }})">
                                                                        <option value="1" @if($feature['value'] == "1") selected @endif>YES</option>
                                                                        <option value="0" @if($feature['value'] == "0") selected @endif>NO</option>
                                                                        <option value="custom" @if($feature['value'] == "custom") selected @endif>Custom</option>
                                                                    </select>
                                                                </div>
                                                                <div class="form-group col-3 featureHide" id="featureHide{{ $count }}" @if($feature['value'] == "custom") style="display: inline;" @else style="display: none;" @endif >
                                                                    <x-forms.label name="Custom Value" :required="false" />
                                                                    <x-forms.input type="text" name="features[{{ $count }}][custom_value]" id="features[{{ $count }}][custom_value]"
                                                                        value="{{ $feature['custom_value'] }}" placeholder="Enter Custom Value" />
                                                                    <small class="text-danger"></small>
                                                                </div>
                                                                <div class="form-group col-2 mt-4 d-flex align-items-end">
                                                                    <a role="button" class="btn bg-danger text-light remove_item"><i class="fas fa-times"></i></a>
                                                                </div>
                                                            </div>
                                                        @endif
                                                        @php
                                                            $count++;
                                                        @endphp
                                                    @endforeach
                                                
                            
                                              

                                                </div>
                                            </div>
                                            </div>
                                            <div class="col-md-12 mt-2">
                                                <div class="form-group">
                                                    <label class="form-label" for="Plan Summary">Plan Summary
                                                        {{ defaultCurrencySymbol() }}
                                                        {{-- <small class="text-danger">*</small> --}}
                                                    </label>
                                                    <textarea id="plan_summary" rows="5" cols="5" name="plan_summary" placeholder="{{ __('enter') }} Plan Summary" value="{{ old('plan_summary') }}" class="form-control @error('plan_summary') is-invalid @enderror"> {{ old('plan_summary') }}</textarea>
                                                    @error('plan_summary')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-12 mt-2">
                                                <div class="form-group">
                                                    <label class="form-label" for="description">{{ __('description') }}
                                                        {{ defaultCurrencySymbol() }}<small
                                                            class="text-danger">*</small></label>
                                                    <textarea id="editor2" rows="10" cols="5" name="description" placeholder="{{ __('enter') }} {{ __('description') }}" value="{{ old('description') }}" class="form-control @error('description') is-invalid @enderror"> {{ old('description') }}</textarea>
                                                    @error('description')
                                                        <span class="invalid-feedback" role="alert">{{ __(@$message) }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        
                                        <div class="row justify-content-center">
                                            <button class="btn btn-success" type="submit">
                                                <i class="fas fa-plus"></i>&nbsp; {{ __('create') }}
                                            </button>
                                        </div>  
                                    </form>
                                </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
   
@endsection

@section('script')
<script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>
<script src="{{ asset('tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
    <script>
        $('#filterForm').on('change', function() {
            $(this).submit();
        })

        $('.select2bs4').select2({
            theme: 'bootstrap4',
        });
    </script>
    <script>
        checkSubscriptionType('{{ old("subscription_type") }}');

        function checkSubscriptionType(type){
            if (type == 'recurring') {
                $('#plan_interval').removeClass('d-none');
            }else{
                $('#plan_interval').addClass('d-none');
            }
        }

        $('.plan_type_selection').on('click', function(value){
            var value = $("[name='subscription_type']:checked").val();
            checkSubscriptionType(this.value);
        });

        profileViewLimitation('{{ old("candidate_cv_view_limitation") }}');

        function profileViewLimitation(status){
            if (status == 'unlimited') {
                $('#candidate_profile_view_count_field').addClass('d-none');
            }else{
                $('#candidate_profile_view_count_field').removeClass('d-none');
            }
        }

        $('.candidate_profile_view').on('click', function(value){
            var value = $("[name='candidate_cv_view_limitation']:checked").val();
            profileViewLimitation(this.value);
        });

        $('#plan_category').on('change', function() {


            var plan_category_id = $(this).find('option:selected').data('value');
            console.log(plan_category_id);
            $.ajax({
                url: "{{ route('module.plan.category',['plan_category_id' => ':plan_category_id']) }}".replace(':plan_category_id', plan_category_id),
                type: 'GET',
                data: {
                    plan_category_id: plan_category_id
                },
                success: function(response) {
                    var planSubCategory = response.plan_sub_category;
                    $('#plan_sub_category').empty();
                    $('#plan_sub_category').append(`<option value="">Select Sub Category</option>`);
                    for (var i = 0; i < planSubCategory.length; i++) {
                        if('{{old('plan_category_id')}}' == planSubCategory[i].id){
                            //$('#plan_sub_category').append('<option selected value="' + planSubCategory[i].id + '">' + planSubCategory[i].name + '</option>');
                        }else{
                        $('#plan_sub_category').append('<option value="' + planSubCategory[i].id + '">' + planSubCategory[i].name + '</option>');    
                        }
                    }
                }
            });   
        });
    
        $(document).ready(function() {
            var plan_category_id = $('#plan_category').find('option:selected').data('value');
            console.log(plan_category_id);
            $.ajax({
                url: "{{ route('module.plan.category',['plan_category_id' => ':plan_category_id']) }}".replace(':plan_category_id', plan_category_id),
                type: 'GET',
                data: {
                    plan_category_id: plan_category_id
                },
                success: function(response) {
                    var planSubCategory = response.plan_sub_category;
                    $('#plan_sub_category').empty();
                    $('#plan_sub_category').append(`<option value="">Select Sub Category</option>`);
                    for (var i = 0; i < planSubCategory.length; i++) {
                        
                        if('{{old('plan_category_id')}}' == planSubCategory[i].id){
                            $('#plan_sub_category').append('<option selected value="' + planSubCategory[i].id + '">' + planSubCategory[i].name + '</option>');
                        }else{
                        $('#plan_sub_category').append('<option value="' + planSubCategory[i].id + '">' + planSubCategory[i].name + '</option>');    
                        }
                    }
                }
            });

            
        });
                

        function featureHideShow(index) {
            // Get the selected value from the dropdown
            // var selectedValue = document.getElementById("features[" + index + "][value]").value;
            var selectedValue =  $('#features\\[' + index + '\\]\\[value\\]').val();
            // Use jQuery to set the value of the input field to an empty string
            $('#features\\[' + index + '\\]\\[custom_value\\]').val("");

            // Get the Custom Value field container
            var featureValueContainer = document.getElementById("featureHide" + index);

            // Check the selected value and show/hide the Custom Value field accordingly
            if (selectedValue == "custom") {
                featureValueContainer.style.display = "block";
            } else {
                featureValueContainer.style.display = "none";
            }
        }
        

       

   
    </script>
    <script>
        $(document).on("click", ".remove_item", function() {
            // var confirmed = confirm('Are you sure you want to delete this item?');
            // if(confirmed){
            $(this).parent().parent('div').remove();
            // }
           });
           var count = "{{@$count}}";
           if(count <= 0){
                count = 1;
           }
        
           
        function add_features_field() {
            var index = 0;
            // var name = $('#features\\[' + index + '\\]\\[key_name\\]').val();
            // var type = $('#features\\[' + index + '\\]\\[value\\]').val();
            // var custom_value = $('#features\\[' + index + '\\]\\[custom_value\\]').val();
            var name = "";
            var type = "Yes";
            var custom_value = "";

            console.log(name);
        $('#links').append(
        '<div class="row">' +
            '<div class="form-group col-4">' +
                '<label for="features_name_' + count + '">Features Name</label>' +
                '<input type="text" class="feature_selected form-control select2bs4 w-100-p" name="features[' + count + '][key_name]" id="features_name_' + count +
                    '" value="' + name + '" placeholder="Enter Features Name" />' +
                '<small class="text-danger"></small>' +
            '</div>' +
            '<div class="form-group col-3">' +
                '<label for="features_' + count + '_value">Features selected</label>' +
                '<select name="features[' + count + '][value]" id="features[' + count + '][value]" ' +
                    'class="feature_selected form-control select2bs4 w-100-p" ' +
                    'onchange="featureHideShow(' + count + ')">' +
                    '<option value="1" ' + (type === "1" ? 'selected' : '') + '>YES</option>' +
                    '<option value="0" ' + (type === "0" ? 'selected' : '') + '>NO</option>' +
                    '<option value="custom" ' + (type === "custom" ? 'selected' : '') + '>Custom</option>' +
                '</select>' +
            '</div>' +
            '<div class="form-group col-3 featureHide" id="featureHide' + count + '" ' +
                (type === "custom" ? 'style="display: inline;"' : 'style="display: none;"') + '>' +
                '<label for="features_' + count + '_custom_value">Custom Value</label>' +
                '<input type="text" name="features[' + count + '][custom_value]" ' +
                    'id="features_' + count + '_custom_value" class="feature_selected form-control select2bs4 w-100-p" value="' + custom_value +
                    '" placeholder="Enter Custom Value" />' +
                '<small class="text-danger"></small>' +
            '</div>' +
            '<div class="form-group col-2 mt-4 d-flex align-items-end">' +
                '<a role="button" class="btn bg-danger text-light remove_item"><i class="fas fa-times"></i></a>' +
            '</div>' +
        '</div>'
    );
            count++;
        }

          

    </script>
   <script>
      
        tinymce.init({
            selector: `#editor2`,
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
            toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
            // toolbar: 'undo redo | blocks fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat code | fontawesome | searchreplace',
            image_advtab: true,
            // extended_valid_elements: 'svg[*],path[*],use[*]',
            valid_elements: '*[*]',
            valid_children: '*[*]',
            extended_valid_elements: '*[*]',
            file_picker_types: 'image',
            file_picker_callback: function(callback, value, meta) {
            if (meta.filetype === 'image') {
                // Implement your custom file picker logic here
                // For example, you can use an input type=file or open a file picker dialog
                // Once the user selects an image, pass the selected file to the callback
                // using the callback function provided by TinyMCE
            }
            }
        });
    
    </script>
    <script>
        function featureHideShow(index) {
            // Get the selected value from the dropdown
            // var selectedValue = document.getElementById("features[" + index + "][value]").value;
            var selectedValue =  $('#features\\[' + index + '\\]\\[value\\]').val();
            // Use jQuery to set the value of the input field to an empty string
            $('#features\\[' + index + '\\]\\[custom_value\\]').val("");

            // Get the Custom Value field container
            var featureValueContainer = document.getElementById("featureHide" + index);

            // Check the selected value and show/hide the Custom Value field accordingly
            if (selectedValue == "custom") {
                featureValueContainer.style.display = "block";
            } else {
                featureValueContainer.style.display = "none";
            }
        }
    </script>
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
        .borderHeight{
            height: 106px;
            padding: 10px 10px;
        }
    </style>
@endsection