@extends('layouts.admin')
@section('title', 'Attributes')
@section('content')
    <div class="content-wrapper admin-attribute-edit-content">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-4">
                    <div class="col-6">
                        <h1>Edit Attribute - {{$attribute->name}}</h1>
                    </div>
                </div>
            </div>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <form id="edit-form" class="row" action="{{route('attributes.update', $attribute->id)}}" method="post"
                      enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="col-md-6">
                        <div class="card card-secondary">
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input class="form-control @error('name') is-invalid @enderror" id="name"
                                           type="text" name="name" value="{{$attribute->name}}" placeholder="name">
                                    @error('name')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="slug">Slug</label>
                                    <input class="form-control @error('slug') is-invalid @enderror" id="slug"
                                           type="text" name="slug" value="{{$attribute->slug}}" placeholder="slug">
                                    @error('slug')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">

                                    <div class="inputFormRow">
                                        <label for="name">Options</label>
                                        @foreach($options as  $key => $option)
                                            <div class="input-group mb-3 remove-row">
                                                <input type="hidden" data-key="{{$key}}"
                                                       name="options[{{$key}}][id]" id="id"
                                                       data-id="{{ $option->id }}" value="{{ $option->id }}"
                                                       class="form-control m-input"
                                                       placeholder="Enter option for Attribute"
                                                       autocomplete="off">
                                                <input type="text" data-key="{{$key}}"
                                                       name="options[{{$key}}][name]" id="name"
                                                       data-id="{{ $option->id }}" value="{{ $option->name }}"
                                                       class="form-control m-input"
                                                       placeholder="Enter option for Attribute"
                                                       autocomplete="off">
                                                <input type="{{ $attribute->slug=='color'?'color':'text' }}" data-key="{{$key}}"
                                                       name="options[{{$key}}][sku_part]" id="sku_part"
                                                       data-id="{{ $option->id }}" value="{{ $option->sku_part }}"
                                                       class="form-control m-input"
                                                       placeholder="Enter option for Attribute"
                                                       autocomplete="off">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn  removeRow">
                                                        Remove
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="newRow"></div>
                                    <button type="button" class="button btn-outline addRow">Add Row</button>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="button btn-primary" form="edit-form" type="submit">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
@endsection


@section('scripts')

    <script type="text/javascript">
        // Add row
        $(document).ready(function () {
            const body = $('body');
            const typeVal = "text"
            let i = $('.remove-row:last-child input').attr('data-key') || 0;
            body.on('click', ".addRow", function () {
                i++;
                let html = ''; // poxel es kod@ kam mi hat @ndhanurov kam nayel clone-ov klini anel
                // html += '<div id="inputFormRow">';
                html += '<div class="input-group mb-3 remove-row">';
                html += '<input type="hidden"  name="options[' + i + '][id]" data-key = "' + i + '" id="id"  class="form-control m-input" placeholder="Enter option for Attribute" autocomplete="off">';
                html += '<input type="text" name="options[' + i + '][name]" data-key = "' + i + '" id="name"  class="form-control m-input" placeholder="Enter option for Attribute" autocomplete="off">';
                html += '<input type="'+ typeVal +'" name="options[' + i + '][sku_part]" data-key = "' + i + '" id="sku_part"  class="form-control m-input" placeholder="Enter option for Attribute" autocomplete="off">';
                html += '<div class="input-group-append">';
                html += '<button type="button" class="btn removeRow">Remove</button>';
                html += '</div>';
                html += '</div>';

                $('.newRow').append(html);
            });

            // Remove row
            body.on('click', '.removeRow', function () {
                $(this).closest('.remove-row').remove();
            });
        });

    </script>
@endsection