@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('global.specification_values.title_singular') }}

    </div>
    <div class="card-body">
        <form action="{{ route("admin.specification_value.store") }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="spec_id" value="{{Request::get('spec_id')}}">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('name_en') ? 'has-error' : '' }}">
                        <label for="name_en">{{ trans('global.specification_values.fields.name') }}*</label>
                        <select name="specification_id" id="specifications" class="form-control" required>
                            @foreach($specifications as $id => $specification)
                                <option value="{{ $id }}" {{ $id  == Request::get('spec_id') ? 'selected' : '' }}>{{ $specification }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    @if (App\Specification::find(Request::get('spec_id'))->name == 'Color' || App\Specification::find(Request::get('spec_id'))->name == 'color')
                    <label style="display: block;" for="name_en">{{ trans('global.specification_values.fields.name') }}*</label>
                    <div id="cp2" class="colorpicker-component input-group colorpicker{{ $errors->has('name_en') ? 'has-error' : '' }}">
                        <input type="text" id="name" name="name" class="form-control" value="">
                        <span class="input-group-addon" style="background-color: #ddd; padding-right: 20px; cursor: pointer;"><i style=" margin-left: 50%; margin-top: 55%; padding: 9px;"></i></span>
                        @if($errors->has('name'))
                            <p class="help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                    </div>
                     @else

                     <div class="form-group {{ $errors->has('name_en') ? 'has-error' : '' }}">
                        <label for="name_en">{{ trans('global.specification_values.fields.name') }}*</label>
                        <input type="text" id="name" name="name" class="form-control" value="">
                        @if($errors->has('name'))
                            <p class="help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                    </div>
                     @endif
                </div>

                <div class="col-md-6">
                    @if (App\Specification::find(Request::get('spec_id'))->name == 'Color' || App\Specification::find(Request::get('spec_id'))->name == 'color')
                        <div class="form-group">
                            <label for="color_name">Color Name*</label>
                            <input type="text" name="color_name" id="color_name" class="form-control">
                        </div>
                    @endif
                </div>


            </div>
            <div class="text-right">
                <input class="btn btn-info" type="submit" value="{{ trans('global.save') }}">
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript">
    $('.colorpicker').colorpicker({});
</script>
@endsection

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">