@extends('layouts.master')

@section('title') @lang('translation.Tab Menus') @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 Menus @endslot
@slot('title') Edit Tab Menus @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="edit_form" action="{{ route('cms.tab-menu.update', ['tab_menu' => $formField->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
    <input name="id" type="hidden"  value="{{ $formField->id }}" />
    
        <div class="card">
            <div class="card-body">
                <h5>Tab Menus 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 == $formField->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="{{ $formField->id }}" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="form_field_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>Add Menu</h5>
                        </div>
                        <div class="col-md-2">
                            <input data-repeater-create type="button"  class="menu-list-add-btn btn btn-primary waves-effect waves-light" value="Add Menu" />
                        </div>
                    </div>
                    <div data-repeater-list="menu-list" class="menu-list">
                        
                        @if ($formField->formFieldTabMenu)
                        @foreach ($formField->formFieldTabMenu as $tabMenu)
                        <div data-repeater-item class="row">
                            <div class="mb-3 row">
                                <label for="menu" class="col-md-2 col-form-label">Tab Menu</label>
                                <div class="col-md-6">
                                    <input type="hidden" name="menu_id" value="{{ $tabMenu->id }}" />
                                    <input type="text" id="menu" class="form-control" name="menu" placeholder="Tab Menu" required value="{{ $tabMenu->menu }}" />
                                    <div  id="menu_errors"  class="invalid-feedback">
                                        Tab Menu Required
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        @endforeach
                        @else
                        <div data-repeater-item class="row">
                            <div class="mb-3 row">
                                <label for="menu" class="col-md-2 col-form-label">Tab Menu</label>
                                <div class="col-md-6">
                                    <input type="text" id="menu" class="form-control" name="menu" placeholder="Tab Menu" required />
                                    <div  id="menu_errors"  class="invalid-feedback">
                                        Tab Menu Required
                                    </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(){
        
        
        var token = "{{ csrf_token() }}";
        actionUrl = "{{ route('cms.form-fields-by-form') }}";
        updateFormFieldByForm(actionUrl, token);
        $('#form_id').on('change', function() {
            updateFormFieldByForm(actionUrl, token);
        });
    });
    
    </script>
@endsection