@extends('layouts.master')

@section('title') @lang('translation.Tab Menu Inputs') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Tab Menu Inputs @endslot
@slot('title') Edit Tab Menu Inputs @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="edit_form" action="{{ route('cms.tab-menu-input.update', ['tab_menu_input' => $tabMenu->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
    <input name="id" type="hidden"  value="{{ $tabMenu->id }}" />
    
        <div class="card">
            <div class="card-body">
                <h5>Tab Menu Inputs Details</h5><br>
                <div class="mb-3 row">
                    <label for="form_id" class="col-md-2 col-form-label">Select Form Slug</label>
                    <div class="col-md-6">
                        <select id="form_id" name="form_id" class="form-select" required>
                            <option value=''>Select...</option>
                            @foreach($forms as $form)
                                <option value="{{ $form->id }}"{{ $form->id == $tabMenu->form_id ? 'selected' : '' }}>{{ $form->slug}}</option>
                            @endforeach 
                        </select>
                        <div  id="form_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="form_field_id" class="col-md-2 col-form-label">Form Fields</label>
                    <div class="col-md-6">
                        <select id="form_field_id" name="form_field_id" class="form-select" data-selected="{{ $tabMenu->form_field_id }}" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="form_field_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="tab_menu_id" class="col-md-2 col-form-label">Tab Menu</label>
                    <div class="col-md-6">
                        <select id="tab_menu_id" name="tab_menu_id" class="form-select" data-selected="{{ $tabMenu->id }}" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="tab_menu_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="card">
            <div class="card-body">                
            <div class="repeater" enctype="multipart/form-data">
                <div class="mb-3 row">
                    <div class="col-md-10">
                        <h5>Inputs</h5>
                    </div>
                    <div class="col-md-2">
                        <input data-repeater-create type="button"  class="input-list-add-btn btn btn-primary waves-effect waves-light" value="Add Inputs" />
                    </div>
                </div>
                <hr>
                <div data-repeater-list="input-list" class="input-list">
                    @if(isset($tabMenu->tabMenuInputs))
                    @foreach ($tabMenu->tabMenuInputs as $formFields)
                                        <div data-repeater-item class="card data-item">
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label for="field_name" class="col-md-2 col-form-label">Field Name</label>
                                <div class="col-md-6">
                                    <input type="hidden" class="form-field-id" name="tab_input_id" value="{{ $formFields->id }}" />
                                    <input type="text" id="field_name" name="field_name" class="form-control" placeholder="Enter Your Field Name" value="{{ $formFields->name }}" />
                                    <div  id="field_name_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="type_id" class="col-md-2 col-form-label">Field Type</label>
                                <div class="col-md-6">                            
                                    <select class="form-control type_id" name="type_id"  data-placeholder="Field Type" id="type_id">
                                        <option value="">Choose...</option>
                                        @foreach($formFieldTypes as $formFieldType)
                                            <option value="{{ $formFieldType->id }}"  data-option="{{ $formFieldType->add_option }}"  {{ $formFieldType->id == $formFields->type_id ? 'selected' : ''}}> {{ $formFieldType->field_type }}</option>
                                        @endforeach 
                                    </select>
                                    <div  id="type_id_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="field_title" class="col-md-2 col-form-label">Field Title</label>
                                <div class="col-md-6">
                                    <input type="text" id="field_title" name="field_title" class="form-control" placeholder="Enter Your Field Title" value="{{ $formFields->title }}" />
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="place_holder" class="col-md-2 col-form-label">Place Holder</label>
                                <div class="col-md-6">
                                    <input id="place_holder" name="place_holder" type="text" class="form-control" placeholder="Place Holder" value="{{ $formFields->place_holder }}" />
                                </div>
                            </div>
                            
                            <div class="mb-3 row option-field" {{ $formFields->option ? '' : 'style=display:none;' }}>
                                <label for="place_holder" class="col-md-2 col-form-label">Options</label>
                                <div class="col-md-6">
                                    <textarea id="option" name="option" type="text" row="2" class="form-control" placeholder="option1,option2,..." >{{ $formFields->option }}</textarea>
                                <small>If you want range in Numbers fill like "Keyword,StartRange,EndRange" - Ex : {RANGE},1,12 - For time interval</small>
                                </div>
                            </div>
                            
                            <div class="mb-3 row">
                                <label for="have_condition" class="col-md-2 col-form-label">Have Condition</label>
                                <div class="col-md-6">
                                    <input class="form-check-input have_condition" type="radio" name="have_condition" id="have_condition1" value="Yes" {{ $formFields->have_condition == 'Yes' ? 'checked' : '' }} >
                                    <label class="form-check-label" for="have_condition1">Yes</label>
                                    <input class="form-check-input have_condition" type="radio" name="have_condition" id="have_condition2" value="No" {{ $formFields->have_condition == 'No' ? 'checked' : '' }} >
                                    <label class="form-check-label" for="have_condition2">No</label>
                                </div>
                                
                                <div class="condition-field-form" style=" {{ $formFields->have_condition == 'Yes' ? '' : 'display:none;' }}">
                                    <div class="mb-3 row">
                                        <label for="condition_field_name" class="col-md-4 col-form-label">Condition Field Name <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="top" title="Should equal to any above field name"></i></label>
                                        <div class="col-md-6">
                                            <input type="text" id="condition_field_name" name="condition_field_name" class="form-control" placeholder="Condition Field Name"  value="{{ isset($formFields->FormCondition) ? $formFields?->FormCondition?->conditionField?->name : '' }}"  />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="equal_value" class="col-md-4 col-form-label">Equal Value</label>
                                        <div class="col-md-6">
                                            <input type="text" id="equal_value" name="equal_value" class="form-control" placeholder="Equal Value" value="{{ isset($formFields->FormCondition) ? $formFields->FormCondition->equal_value : '' }}" />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="field_id_type" class="col-md-4 col-form-label">Condition Field Type</label>
                                        <div class="col-md-6">
                                            <input type="text" id="field_id_type" name="field_id_type" class="form-control" placeholder="Equal Value" value="{{ isset($formFields->FormCondition) ? $formFields->FormCondition->field_id_type : '' }}" />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="equal_value_type" class="col-md-4 col-form-label">Equal Value Type</label>
                                        <div class="col-md-6">
                                            <input type="text" id="equal_value_type" name="equal_value_type" class="form-control" placeholder="Equal Value" value="{{ isset($formFields->FormCondition) ? $formFields->FormCondition->equal_value_type : '' }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3 row ">
                                <label for="priority" class="col-md-2 col-form-label">Priority</label>
                                <div class="col-md-6 priority-div">
                                    <select id="priority" name="priority" class="priority form-select">
                                        <option value=''>Select...</option>
                                        @foreach (range(1,20) as $option)
                                        <option value='{{ $option }}' {{ $formFields->priority == $option ? 'selected' : '' }}>{{ $option }}</option>
                                        @endforeach
                                    </select>
                                    <div  id="priority_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <div class="col-lg-10">
                                </div>
                                <div class="col-lg-2 align-self-center" style="margin-top: -70px;">
                                    <div class="d-grid">
                                        <input data-repeater-delete type="button" class="delete-form-field btn btn-primary-borderd" value="Delete" data-url="{{ route('cms.forms.delete-form-field', ['id' => $formFields->id]) }}"/>
                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @endforeach
                    @else
                    <div data-repeater-item class="card data-item">
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label for="field_name" class="col-md-2 col-form-label">Field Name</label>
                                <div class="col-md-6">
                                    <input type="text" id="field_name" name="field_name" class="form-control" placeholder="Enter Your Field Name" />
                                    <div  id="field_name_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="type_id" class="col-md-2 col-form-label">Field Type</label>
                                <div class="col-md-6">                            
                                    <select class="form-control type_id" name="type_id"  data-placeholder="Field Type" id="type_id">
                                        <option value="">Choose...</option>
                                        @foreach($formFieldTypes as $formFieldType)
                                            <option value="{{ $formFieldType->id }}"  data-option="{{ $formFieldType->add_option }}" > {{ $formFieldType->field_type }}</option>
                                        @endforeach 
                                    </select>
                                    <div  id="type_id_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="field_title" class="col-md-2 col-form-label">Field Title</label>
                                <div class="col-md-6">
                                    <input type="text" id="field_title" name="field_title" class="form-control" placeholder="Enter Your Field Title" />
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="place_holder" class="col-md-2 col-form-label">Place Holder</label>
                                <div class="col-md-6">
                                    <input id="place_holder" name="place_holder" type="text" class="form-control" placeholder="Place Holder" >
                                </div>
                            </div>
                            
                            <div class="mb-3 row option-field" style="display:none;">
                                <label for="place_holder" class="col-md-2 col-form-label">Options</label>
                                <div class="col-md-6">
                                    <textarea id="option" name="option" type="text" row="2" class="form-control" placeholder="option1,option2,..." ></textarea>
                                </div>
                            </div>
                            
                            <div class="mb-3 row">
                                <label for="have_condition" class="col-md-2 col-form-label">Have Condition</label>
                                <div class="col-md-6">
                                    <input class="form-check-input have_condition" type="radio" name="have_condition" id="have_condition1" value="Yes" >
                                    <label class="form-check-label" for="have_condition1">Yes</label>
                                    <input class="form-check-input have_condition" type="radio" name="have_condition" id="have_condition2" value="No"  >
                                    <label class="form-check-label" for="have_condition2">No</label>
                                </div>
                                
                                <div class="condition-field-form" style="display:none">
                                    <div class="mb-3 row">
                                        <label for="condition_field_name" class="col-md-4 col-form-label">Condition Field Name <i class="fas fa-question-circle" data-toggle="tooltip" data-placement="top" title="Should equal to any above field name"></i></label>
                                        <div class="col-md-6">
                                            <input type="text" id="condition_field_name" name="condition_field_name" class="form-control" placeholder="Condition Field Name"  value=""  />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="equal_value" class="col-md-4 col-form-label">Equal Value</label>
                                        <div class="col-md-6">
                                            <input type="text" id="equal_value" name="equal_value" class="form-control" placeholder="Equal Value"  />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="field_id_type" class="col-md-4 col-form-label">Condition Field Type</label>
                                        <div class="col-md-6">
                                            <input type="text" id="field_id_type" name="field_id_type" class="form-control" placeholder="Equal Value" />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="equal_value_type" class="col-md-4 col-form-label">Equal Value Type</label>
                                        <div class="col-md-6">
                                            <input type="text" id="equal_value_type" name="equal_value_type" class="form-control" placeholder="Equal"  />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3 row ">
                                <label for="priority" class="col-md-2 col-form-label">Priority</label>
                                <div class="col-md-6 priority-div">
                                    <select id="priority" name="priority" class="priority form-select">
                                        <option value=''>Select...</option>
                                        @foreach (range(1,20) as $option)
                                        <option value='{{ $option }}'>{{ $option }}</option>
                                        @endforeach
                                    </select>
                                    <div  id="priority_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <div class="col-lg-10">
                                </div>
                                <div class="col-lg-2 align-self-center" style="margin-top: -70px;">
                                    <div class="d-grid">
                                        <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/jquery-repeater/jquery-repeater.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/form-repeater.int.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/custom.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $(document).on("change", ".have_condition", function(){
            parentDiv = $(this).parents('.data-item');
            conditionField = parentDiv.find(".condition-field-form");
            if($(this).val() == 'Yes'){
                conditionField.show();
            }else{
                conditionField.hide();
            }
        }).trigger('change');
        $(document).on("change", ".type_id", function(){
            //addAption = $(this). attr('data-option');
            addAption = $(this).find("option:selected").attr('data-option');
            if(addAption == 'Yes'){
                parentDiv = $(this).parents('.data-item');
                optionField = parentDiv.find(".option-field");
                optionField.show();
            }else{
                parentDiv = $(this).parents('.data-item');
                optionField = parentDiv.find(".option-field");
                optionField.hide();
            }
        });
        
        var token = "{{ csrf_token() }}";
        actionUrl = "{{ route('cms.form-fields-by-form') }}";
        updateFormFieldByForm(actionUrl, token);
        $('#form_id').on('change', function() {
            updateFormFieldByForm(actionUrl, token);
        });

        $('#form_field_id').on('change', function() {
            actionUrl = "{{ route('cms.tab-menu-by-form-field') }}";
            updateTabMenuieldByFormField(actionUrl, token);
        });
    });
    
    </script>
@endsection