@extends('layouts.admin')

@section('title', 'Attributes')

@section('content')
    <div class="page-fixed-header">
        <h3 class="page-title">Attributes</h3>
    </div>
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header mb-4">
                                <h1 class="card-title">Attributes</h1>
                                <div class="card-tools">
                                    <a href="javascript:" class="add-attribute-btn button btn-outline">Add new</a>
                                </div>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12" id="table-init"></div>
                                    <div class="col pt-4 pb-4 add-attribute-box position-absolute">
                                        <div class="card card-default">
                                            <div class="card-header">
                                                <h3 class="card-title">Add new attribute</h3>
                                            </div>
                                            <!-- /.card-header -->
                                            <form id="create-form" class="card-body"
                                                  action="{{route('attributes.store')}}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <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="{{old('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="{{old('slug')}}"
                                                           placeholder="slug">
                                                    @error('slug')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <div>
                                                        <button class="btn btn-primary"
                                                                form="create-form" type="submit">Save
                                                        </button>
    <!--                                                                <button id="reset-form"
                                onclick="document.getElementById('create-form').reset()"
                                class="btn btn-sm btn-danger" type="reset">Reset
                     </button>-->
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            new Table({
                name: "attributes",
                columns: [
                    {title: 'ID'},
                    {
                        title: 'Name',
                        render: function (data, type, row) {
                            return `<a class="row-title" href="/admin/attributes/${row.id}/edit">${row.name}</a>
                                    <div>
                                        <ul class="actions-list">
                                            <li><a  href="/admin/attributes/${row.id}/edit">Edit</i></a></li>
                                            <li><button class="delete-confirm-btn" data-popup="delete-confirm-${data}">Trash</button></li>
                                        </ul>
                                        <div class="text-center delete-popup delete-confirm-${data} d-none">
                                            <div class="mb-1"> Are you sure?</div>
                                            <div class="d-flex justify-content-center">
                                                <form action="/admin/attributes/${row.id}" class="delete-form" method="POST">
                                                    <input type="hidden" name="_method" value="DELETE">
                                                        <input type="hidden" name="_token" value="${$('meta[name="csrf-token"]').attr('content')}">
                                                            <button type="submit" class="mr-1 delete_form">
                                                                Yes
                                                            </button>
                                                </form>
                                                <button class="mr-1 delete-popup-close" type="button">
                                                    No
                                                </button>
                                            </div>
                                        </div>
                                    </div>`;
                        }
                    },
                    {title: 'Slug'},
                    {
                        data: 'options',
                        render: function (data) {
                            return data.map(i => i.name).join(', ');
                        }
                    }
                ],
            })
        });

    </script>
@endsection