@extends('layouts.admin.frame')

@section('header')
    @component('layouts.admin.header')
        {{ $header->title }}
    @slot('subtitle')
        {{ $header->subtitle }}
    @endslot
    @slot('menu_function')
        
    @endslot
    @endcomponent
@endsection

@section('content')
    
    <div class="card">
        <div class="card-header">
            {{ is_numeric($item->id) ? 'Termék módosítása' : 'Új termék feltöltése' }}
        </div>
        <div class="card-body">
            
            <form action="{{ is_numeric($item->id) ? route(Request::segment(2).'.update', $item->id) : route(Request::segment(2).'.store') }}" method="POST" enctype="multipart/form-data">
            
                @csrf

                @if (isset($item->id))
                    @method('PUT')    
                @endif
                
                <input type="hidden" name="cat" value="{{ $item->cat }}">
                <input type="hidden" name="params_type" value="{{ $item->params_type }}">

                <h5>Cikkszám</h5>
                <div class="form-group">
                    <input class="form-control" name="cikkszam" value="{{ old('cikkszam', $item->cikkszam) }}" style="width:200px;"/>
                </div>

                <h5>Nyelvfüggő adatok</h5>
            
                @include('layouts.admin.editor_init')
                <ul class="nav nav-tabs tabs-right">
                    <li class="nav-item">
                        <a role="tab" class="nav-link active" id="tab-c-0" data-toggle="tab" href="#tab-animated-0">
                            <span>hu</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a role="tab" class="nav-link" id="tab-c-1" data-toggle="tab" href="#tab-animated-1">
                            <span>en</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content pt-2">
                    <!-- 1. tab content -->
                    <div class="tab-pane active" id="tab-animated-0" role="tabpanel">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="title_hu">Megnevezés (hu)</label>
                                    <input class="form-control" name="title_hu" value="{{ old('title_hu', $item->title_hu) }}" />
                                </div>

                                <div class="form-group">
                                    <label for="params_1_hu">{{ $item->param_1_name() }} (hu) <em>opciók sortöréssel elválasztva</em></label>
                                    <textarea class="form-control" name="params_1_hu" rows="3">{!! old('params_1_hu', $item->params_1_hu) !!}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="params_2_hu">{{ $item->param_2_name() }} (hu) <em>opciók sortöréssel elválasztva</em></label>
                                    <textarea class="form-control" name="params_2_hu" rows="3">{!! old('params_2_hu', $item->params_2_hu) !!}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="params_3_hu">{{ $item->param_3_name() }} (hu) <em>opciók sortöréssel elválasztva</em></label>
                                    <textarea class="form-control" name="params_3_hu" rows="3">{!! old('params_3_hu', $item->params_3_hu) !!}</textarea>
                                </div>

                            </div>

                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="description_hu">Leírás (hu)</label>
                                    <textarea class="form-control" id="description_hu" name="description_hu" rows="3">{{ old('description_hu', $item->description_hu) }}</textarea>
                                    @include('layouts.admin.editor_multi_mini', ['selector' => '#description_hu'])
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-animated-1" role="tabpanel">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="title_en">Megnevezés (en)</label>
                                    <input class="form-control" name="title_en" value="{{ old('title_en', $item->title_en) }}" />
                                </div>

                                <div class="form-group">
                                    <label for="params_1_en">{{ $item->param_1_name() }} (en) <em>opciók sortöréssel elválasztva</em></label>
                                    <textarea class="form-control" name="params_1_en" rows="3">{!! old('params_1_en', $item->params_1_en) !!}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="params_2_en">{{ $item->param_2_name() }} (en) <em>opciók sortöréssel elválasztva</em></label>
                                    <textarea class="form-control" name="params_2_en" rows="3">{!! old('params_2_en', $item->params_2_en) !!}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="params_3_en">{{ $item->param_3_name() }} (en) <em>opciók sortöréssel elválasztva</em></label>
                                    <textarea class="form-control" name="params_3_en" rows="3">{!! old('params_3_en', $item->params_3_en) !!}</textarea>
                                </div>

                            </div>

                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="description_en">Leírás (en)</label>
                                    <textarea class="form-control" id="description_en" name="description_en" rows="3">{{ old('description_en', $item->description_en) }}</textarea>
                                    @include('layouts.admin.editor_multi_mini', ['selector' => '#description_en'])
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5>Méretek és árak <span id="addPriceOption" class="mx-2 add btn btn-xs btn-success"data-toggle="tooltip" data-placement="top" title="Új méret/ár opció hozzáadása">+</span> </h5>
                    <div id="prices">
                        @forelse ($item->pricesAndSizes as $i => $p)
                            @include('product.admin.priceOption', ['size' => $p['size'],'price' => $p['price'],'hide_delete_button' => ($i == 0 ? 'd-none' : '')])
                        @empty
                            @include('product.admin.priceOption', ['hide_delete_button' => 'd-none'])    
                        @endforelse
                        
                    </div>
                    
                </div>
                                    
                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary">Mentés</button>
                    <a href="{{ route(Request::segment(2).'.index') }}" class="btn btn-secondary">Mégsem</a>
                </div>
                @component('layouts.admin.formErrors')@endcomponent
                
            </form>
        </div>
    </div>
    
    

@endsection

@section('scripts')
    <script>
        $("#addPriceOption").click(function(){
            var ajax_url = '/api/product/add_price_option';
            $.ajax({
                headers: {
                    'Authorization': 'Bearer {{ Auth::user()->api_token }}',
                },
                type: 'POST',
                contentType: 'application/json',
                url: ajax_url,
                success: function(res){                                      
                    $("#prices").append(res);                    
                }
            });
        });
        //$('.numbersOnly').not(':input[readonly]').keyup(function () {
        $(document).on('keyup','.numbersOnly:not([readonly])',function () {
            if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
            this.value = this.value.replace(/[^0-9\.]/g, '');
            }
        });

        $(document).on('click','.delete-size',function(){
            $(this).parents('.size-row').remove();
        });

    </script>
@endsection