@extends('layouts.app')
@section('title', 'Attributes Values')
@section('css')
    <link href="{{ asset('plugins/extras/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Attributes Values
            <small>Manage your attributes values</small>
        </h1>
        {{--        <ol class="breadcrumb">--}}
        {{--            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>--}}
        {{--            <li><a href="#">Forms</a></li>--}}
        {{--            <li class="active">General Elements</li>--}}
        {{--        </ol>--}}
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <!-- left column -->
            <div class="col-md-12">
                <!-- general form elements -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Manage your attributes values</h3>
                        <button id="add-attributes-values" type="button" class="btn btn-primary pull-right"><i
                                    class="fa fa-plus"></i> Add
                        </button>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="attributes-values-table" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                {{--                                <th>Id</th>--}}
                                <th>Attribute Name</th>
                                <th>Attribute Values</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($all_attributes as $all_attribute)
                                <tr>
                                    <td>{{ $all_attribute->attribute_name }}</td>
                                    <td>
                                        @if($all_attribute->attributes_values->count() > 0)
                                            @foreach($all_attribute->attributes_values as $attribute_value)
                                                @if($loop->last)
                                                    {{ $attribute_value->value }}
                                                @else
                                                    {{ $attribute_value->value }},
                                                @endif
                                            @endforeach
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td>
                                        <button data-href="{{ route('attributes-values.edit', $all_attribute->id) }}"
                                                class="btn btn-xs btn-primary edit_attribute_values_button"><i
                                                    class="glyphicon glyphicon-edit"></i>Edit
                                        </button>
                                        <meta name="csrf-token" content="{{ csrf_token() }}">
                                        <button id="{{ $all_attribute->id }}"
                                                class="btn btn-xs btn-danger delete_attribute_values_button"><i
                                                    class="glyphicon glyphicon-trash"></i>Delete
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot>
                            <tr>
                                {{--                                <th>Id</th>--}}
                                <th>Attribute Name</th>
                                <th>Attribute Values</th>
                                <th>Actions</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!--/.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    @include('attributes_values.create')
    {{--    edit modal--}}
    <div class="modal fade" id="attributes-values-edit-modal">
    </div>
    <!-- /.modal -->
@endsection

@section('javascript')
    <script type="application/javascript" src="{{ asset('plugins/extras/sweet-alert2/sweetalert2.min.js') }}"></script>
    <script>

        $(document).ready(function () {
            $('#attributes-values-table').DataTable();

            $('.repeater-attributes-values').repeater({
                show: function () {
                    $(this).slideDown();
                },
                hide: function (remove) {
                    // if (confirm('Are you sure you want to remove this item?')) {
                    $(this).slideUp(remove);
                    // }
                }
            });


        });

        $('#add-attributes-values').on('click', function () {
            $('#attributes-values-create-modal').modal('show');
        });

        $('.edit_attribute_values_button').on('click', function () {
            $('#attributes-values-edit-modal').load($(this).data('href'), function () {
                $('.repeater-edit-attributes-values').repeater({
                    show: function () {
                        $(this).slideDown();
                    },
                    hide: function (remove) {
                        // if (confirm('Are you sure you want to remove this item?')) {
                        $(this).slideUp(remove);
                        // }
                    }
                });
                $('#attributes-values-edit-modal').modal('show');
            })
        });

        $('.delete_attribute_values_button').on('click', function () {
            var id = $(this).attr('id');
            // var token = $("meta[name='csrf-token']").attr("content");
            var url = "{{ route('attributes-values.destroy', 'id') }}";
            url = url.replace('id', id);
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value === true) {
                    $.ajax({
                        method: 'POST',
                        url: url,
                        data: {
                            _token: '{{ csrf_token() }}',
                            _method: 'DELETE'
                        },
                        success: function (response) {
                            Swal.fire(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            ).then(result => {
                                location.reload();
                            })
                        }
                    });
                }
            });
        });

    </script>
@endsection