@extends('layouts.vertical', ["page_title"=> "Add & Edit User Attributes"])

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

@section('content')
<div class="container-fluid">
@if(session()->has('message'))
    <div class="alert alert-success mt-3">
        {{ session()->get('message') }}
    </div>
@endif
    <div class="row mt-3">
        <div class="col-xl-12">
            <div class="card">
                <form method="post" action="{{url()->current()}}" id="form-availiblity" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h4 class="page-title">Add / Edit {{$title}}</h4>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                        @foreach($fields as $field => $props)
                            @if($props['type'] != 'hidden')
                            <div class="col-md-{{isset($props['fullwidth'])?'12':'6'}} mb-3" id="field-wrapper-{{$field}}">
                            <label for="field-{{$field}}" class="form-label">{{$props['title']}} {!!isset($props['required'])&&$props['required'] ? '<span class="text-danger">*</span>':''!!} </label>
                            @endif
                            @switch($props['type'])
                                @case('hidden')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" value="{{$mode=='edit'?($item->{$field} ?? ''):''}}">
                                    @break
                                @case('text')
                                @case('email')
                                @case('number')
                                @case('tel')
                                @case('date')
                                    <input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'?($item->{$field} ?? ''):''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                    @break
                                @case('textarea')
                                    <textarea id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" {{isset($props['required'])&&$props['required']?'required':'' }}>{{$mode=='edit'?($item->{$field} ?? ''):''}}</textarea>
                                    @break
                                @case('select')
                                    <select class="form-control" id="field-{{$field}}" name="{{$field}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && isset($item->{$field}) && $item->{$field} == $k ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('multiselect')
                                    <select class="form-control select2-multiple" data-toggle="select2" data-width="100%" multiple="multiple" data-placeholder="Choose {{$props['title']}}" id="field-{{$field}}" name="{{$field}}[]" {{isset($props['required'])&&$props['required']?'required':'' }}>
                                        <option value=""> -- Select {{$props['title']}} -- </option>
                                        @foreach($props['values'] as $k => $v)
                                        <option value="{{$k}}" {{$mode=='edit' && isset($item->{$field}) && in_array($k, (array) $item->{$field}) ? 'selected="selected"':''}}>{{$v}}</option>
                                        @endforeach
                                    </select>
                                    @break
                                @case('yesno')
                                    <div>
                                        <div class="form-check mb-2 form-check-success form-check-inline">
                                            <input class="form-check-input" type="radio" name="{{$field}}" id="field-{{$field}}-yes" value="yes" {{$mode=='edit' && isset($item->{$field}) && $item->{$field} == 'yes' ? 'checked':''}} {{isset($props['required'])&&$props['required']?'required':'' }}>
                                            <label class="form-check-label" for="field-{{$field}}-yes">Yes</label>
                                        </div>
                                        <div class="form-check mb-2 form-check-danger form-check-inline">
                                            <input class="form-check-input" type="radio" name="{{$field}}" id="field-{{$field}}-no" value="no" {{$mode=='edit' && isset($item->{$field}) && $item->{$field} == 'no' ? 'checked':''}}>
                                            <label class="form-check-label" for="field-{{$field}}-no">No</label>
                                        </div>
                                    </div>
                                    @break
                                @case('mapping')
                                    <div class="col-md-12 mb-2">
                                        <button type="button" class="btn btn-info btn-xs float-end" id="btn-add-option">Add Option</button>
                                    </div>
                                    <div id="options-rows" class="row">
                                        <div class="col-md-12 mb-2">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <label>Option Value</label>
                                                </div>
                                                <div class="col-md-5">
                                                    <label>Option Display</label>
                                                </div>
                                                <div class="col-2"></div>
                                            </div>
                                        </div>
                                        @if($mode=='edit' && isset($item->{$field}) && is_array($item->{$field}))
                                            @foreach($item->{$field} as $map)
                                            @php
                                                $optValue = is_object($map) ? ($map->value ?? '') : ($map['value'] ?? '');
                                                $optDisplay = is_object($map) ? ($map->display ?? '') : ($map['display'] ?? '');
                                            @endphp
                                            <div class="col-md-12 mb-2 option-row">
                                                <div class="row">
                                                    <div class="col-md-5">
                                                        <input type="text" class="form-control" name="option_value[]" value="{{$optValue}}" required>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <input type="text" class="form-control" name="option_name[]" value="{{$optDisplay}}" required>
                                                    </div>
                                                    <div class="col-2">
                                                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove-option"><i class="mdi mdi-close"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    @break
                            @endswitch
                            @if($props['type'] != 'hidden')
                            </div>
                            @endif
                        @endforeach

                        <div class="col-md-12 mb-3">
                            <div class="float-end">
                                <a href="{{$base_url}}s" class="btn btn-dark waves-effect waves-light">Back</a>
                                <button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .ms-container {max-width: 100%}
</style>
@endsection

@section('script')
<script src="{{asset('assets/libs/select2/select2.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="select2"]').select2();

        var optionTypes = ['select', 'multiselect', 'checkbox', 'radio'];

        function bindRemoveOption() {
            $('.btn-remove-option').off('click').on('click', function(){
                $(this).closest('.option-row').remove();
            });
        }

        function setOptionInputsEnabled(enabled) {
            $('#options-rows').find('input[name="option_value[]"], input[name="option_name[]"]').each(function(){
                if (enabled) {
                    $(this).prop('disabled', false).prop('required', true);
                } else {
                    $(this).prop('required', false).prop('disabled', true);
                }
            });
        }

        function toggleOptionsField() {
            var type = $('#field-type').val();
            var show = optionTypes.indexOf(type) !== -1;
            if (show) {
                $('#field-wrapper-options').show();
                setOptionInputsEnabled(true);
            } else {
                $('#field-wrapper-options').hide();
                setOptionInputsEnabled(false);
            }
        }

        toggleOptionsField();
        $('#field-type').on('change', toggleOptionsField);

        $('#btn-add-option').on('click', function(){
            $('#options-rows').append(`<div class="col-md-12 mb-2 option-row">
                <div class="row">
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="option_value[]" required>
                    </div>
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="option_name[]" required>
                    </div>
                    <div class="col-2">
                        <button type="button" class="btn btn-danger waves-effect waves-light btn-remove-option"><i class="mdi mdi-close"></i></button>
                    </div>
                </div>
            </div>`);
            bindRemoveOption();
        });

        bindRemoveOption();
    });
</script>
@endsection