@extends('admin::layouts.master')
@if(isset($dropdown))
    @section('pagetitle','Edit Dropdown')
@else
    @section('pagetitle','Add Dropdown')
@endif
@section('content')
<style>
    
/* Label and input start */
.input-wrapper {
  position: relative;
}

.input_label {

  border-radius: 6px;
  position: relative;
  width: 100%;
  margin: 10px;
}

select {

  border-radius: 6px;
  position: relative;
  width: 100%;
  
}

label {
  position: absolute;
  top: 0.2ex;
  z-index: 1;
  left: 2.6em; /* for label field set, Here we use row so compare to other balde files, here value is increase  */
  background-color: white;
  font-size: small !important;
}
.form-select {
    margin: 10px;
}

.handle {
  cursor: move;
}
.bgimg-none{
    background-image: none !important;
}

</style>
<div class="tab-pane fade active show px-10" id="kt_ecommerce_settings_general" role="tabpanel">
    <div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
        <!--begin::Header title-->
        <div class="d-flex align-items-center" id="kt_docs_header_title">
            <!--begin::Page title-->
            <div class="docs-page-title d-flex flex-column flex-lg-row align-items-lg-center py-5 mb-lg-0" data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_docs_content_container', 'lg': '#kt_docs_header_title'}">
                <!--begin::Title-->
                <h1 class="d-flex align-items-center text-dark my-1 fs-2x">Master Management</h1>
                <!--end::Title-->
                <!--begin::Separator-->
                <span class="fs-5 pt-2 px-2 sub_header fw-bolder text-muted">
                    /Add Dropdown Values</span>
                    <!--end::Separator-->
            </div>
            <!--end::Page title-->
        </div>
        <!--end::Header title-->
        <!--begin::Toolbar-->
        <div class="d-flex align-items-center">
            <!--begin::Purchase link-->
            <a class="btn bdr-primary btn-light-primary btn-flex h-40px fw-bolder px-4 px-lg-6" href="/admin/dropdown" ><span class="p-5">< Back</span></a>
            <!--end::Purchase link-->
        </div>
        <!--end::Toolbar-->
    </div>
        <form id="kt_add_dropdown_form" method="POST" class="form" enctype="multipart/form-data"  action="/admin/dropdown/{{$encryptid}}">
            @csrf
            @method('PUT')
            <div class="card card-flush">
                <!--begin::Card body-->
                <div class="card-body p-0">
                    <input type='hidden' id='dropdown_id' name='dropdown_id' value='@if(isset($encryptid)){{$encryptid}}@endif' />
                    <div class="row">
                        <div class="pt-5 px-9 mb-2">
                            <span class="fs-5 fw-boldest">Dropdown information - {{ucfirst($dropdown->dropdown_name)}}</span>
                            <div class="row flex-md-row  mt-7 ">
    
                                <div class="col-md-6 input-wrapper">
                                    <!-- Input-->
                                    <label>Description</label>
                                    <input class="form-control input_label" name="description" placeholder="Description" value="@isset($dropdown){{$dropdown->description}}@endisset">
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>

                            </div>
                            <hr>
                        </div>
                                            
                        <div class="pt-5 px-9 mb-2">
                            <span class="fs-5 fw-boldest mb-3">Value information</span>
                            <!--begin::Input group-->
                                <div class="fv-row mb-5">
                                    <!--begin::Row-->
                                    <!--begin::Repeater-->
                                    <div id="kt_question_repeater">
                                        <!--begin::Form group-->
                                        <div class="form-group kt-scroll kt-scroll--pull" style="overflow-y:auto;overflow-x:hidden;">
                                            <div data-repeater-list="kt_question_repeater" id="dropdown_sort">
                                                @if($dropdownvalueinfo->count()>0)
                                                    @foreach($dropdownvalueinfo as $key=> $valueinfo)
                                                    <div data-repeater-item class="repeat_items">
                                                        <div class="row mb-2">
                                                            <div class="col-md-4 input-wrapper col-4">
                                                                <label>Value {{$key+1}}</label>
                                                                <div class="input-container position-relative sortable-item"> <!-- Position-relative container -->
                                                                    <input class="form-control input_label bgimg-none"  name="valueinfo" data-order="" placeholder="Value {{$key+1}}" value="{{$valueinfo->value}}">
                                                                    <!-- Drag to sort icon -->
                                                                    <div class="handle position-absolute end-0 top-50 translate-middle-y" style="cursor: move;">
                                                                        <i class="fa fa-bars"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2 col-2">
                                                                <a href="javascript:;" data-repeater-delete name="deletebtn" class="btn btn-md btn-light-danger mt-3 repeaterdelete">
                                                                    <i class="la la-trash-o fs-3"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                @else
                                                    <div data-repeater-item class="repeat_items">
                                                        <div class="row mb-2">
                                                            <div class="col-md-4 input-wrapper col-4">
                                                                <label>Value 1</label>
                                                                <div class="input-container position-relative sortable-item"> <!-- Position-relative container -->
                                                                    <input class="form-control input_label bgimg-none" data-order="" name="valueinfo" placeholder="Value " value="">
                                                                    <!-- Drag to sort icon -->
                                                                    <div class="handle position-absolute end-0 top-50 translate-middle-y" style="cursor: move;">
                                                                        <i class="fa fa-bars"></i>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2 col-2">
                                                                <a href="javascript:;" data-repeater-delete name="deletebtn" class="btn btn-md btn-light-danger mt-3 repeaterdelete">
                                                                    <i class="la la-trash-o fs-3"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <!--end::Form group-->

                                        <!--begin::Form group-->
                                        <div class="form-group mt-5">
                                            <a href="javascript:;" id="addmore_value" data-repeater-create class="btn btn-light-primary mx-2">
                                                <span class="svg-icon svg-icon-2">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="currentColor" />
                                                        <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
                                                    </svg>
                                                </span>Add More Value
                                            </a>
                                        </div>
                                        <!--end::Form group-->
                                    </div>
                                    <!--end::Repeater-->
                                    <!--end::Row-->
                                </div>
                            <!--end::Input group-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-primary  m-5" data-kt-dropdown-modal-action="submit">Save Changes</button>
            </div>
        </form>
</div>
@endsection

@section('scripts')
<script src="{{asset('js/jquery-ui.js')}}"></script>
<script src="{{asset('js/formrepeater.bundle.js')}}"></script>
<script src="{{asset('js/Tachyons.min.js')}}"></script>
<script src="{{asset('js/admin/dropdown/addedit.js')}}"></script>
@endsection