@extends('admin.layouts.app')
@section('title', 'Main page')

@section('content')
{{-- {{session()->get('errors')}} --}}

    <!-- Start Page content -->
    <div class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-sm-12">
                    <div class="box">

                        <div class="box-header with-border">
                            <a href="{{ url('custom-fields') }}">
                                <button class="btn btn-danger btn-sm pull-right" type="submit">
                                    <i class="mdi mdi-keyboard-backspace mr-2"></i>
                                    @lang('view_pages.back')
                                </button>
                            </a>
                        </div>

                        <div class="col-sm-12">

                            <form method="post" class="form-horizontal" action="{{ url('custom-fields/update/'.$customField->id) }}" id="customFieldStoreForm">
                                @csrf
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="field_name">Field Name:  <span class="text-danger">*</span></label>
                                            <input type="text" name="field_name" class="form-control" required value="{{ $customField->title }}" id="field_name_txt">
                                            <span class="text-danger">{{ $errors->first('field_name') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="field_type">Field Type: <span class="text-danger">*</span></label>
                                            <select name="field_type" id="field_type" class="form-control" required disabled>
                                                <option value="string" data-action="text" {{ ($customField->type == 'string' ? 'selected' : '') }}>Text</option>
                                                <option value="long_text" data-action="long_text" {{ ($customField->type == 'long_text' ? 'selected' : '') }}>Long Text</option>
                                                <option value="number" data-action="number" {{ ($customField->type == 'number' ? 'selected' : '') }}>Number</option>
                                                <option value="date" data-action="date" {{ ($customField->type == 'date' ? 'selected' : '') }}>Date</option>
                                                <option value="bool" data-action="bool" {{ ($customField->type == 'bool' ? 'selected' : '') }}>Boolean Dropdown ( Yes | No )</option>
                                                <option value="dropdown" data-action="dropdown" {{ ($customField->type == 'dropdown' ? 'selected' : '') }}>Dropdown</option>
                                            </select>
                                            <span class="text-danger">{{ $errors->first('field_type') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div id="dropDownProps" style="visibility: {{ ($customField->type == 'dropdown') ? 'visible' : 'hidden' }};">
                                            <div class="form-group">
                                                <label for="">Dropdown Properties: * (Press enter to add a property)</label>
                                                <select name="dropdown_metadata[]" id="dropdownPropsItems" class="form-control" multiple="multiple">
                                                    @if($customField->metadata && isset($customField->metadata['options']) && count($customField->metadata['options']) > 0)
                                                    @foreach($customField->metadata['options'] as $option)
                                                    <option value="{{ $option }}" selected>{{ $option }}</option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="is_required">Is Required: </label>
                                            <select name="is_required" id="is_required" class="form-control" required>
                                                <option value="1" {{ ($customField->required == 1) ? 'selected' : '' }}>Yes</option>
                                                <option value="0" {{ ($customField->required == 0) ? 'selected' : '' }}>No</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="show_in_dispatch_panel">Show in Dispatch Panel: </label>
                                            <select name="show_in_dispatch_panel" id="show_in_dispatch_panel" class="form-control" required>
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>
                                            </select>
                                        </div>
                                    </div>
                                </div> --}}

                                <div class="form-group">
                                    <div class="col-12">
                                        <div class="d-flex flex row align-items-center">
                                            <button class="btn btn-primary btn-sm mt-5" type="submit">
                                                @lang('view_pages.save')
                                            </button>
                                            <span class="text-danger ml-4" id="errorTxt"></span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- container -->
</div>
    <!-- content -->
@endsection

@section('extra-js')
<script>
   $(document).ready(function() {

    $('#dropdownPropsItems').select2({
        tags:true
    })


    $('#field_type').on('change', function(){
        var action = $(this).find(':selected').attr('data-action');
        
        if(action == 'dropdown')
        {
            $('#dropDownProps').css('visibility','visible');
        }
        else
        {
            $('#dropDownProps').css('visibility','hidden');
        }
    });


    $('#customFieldStoreForm').on('submit', function(e){
        e.preventDefault();
        
        if($('#field_type').val() === 'dropdown' && $('#dropdownPropsItems').val().length === 0)
        {
            $('#errorTxt').html('* Please add atleast one dropdown property');
            return false;
        }
        else if($.trim($('#field_name_txt').val()) === '')
        {
            $('#errorTxt').html('* Field name is required');
            return false;
        }

        $('#customFieldStoreForm')[0].submit();
        
    });

   });
</script>
@endsection