@extends('layouts.app')
@section('title', 'Attributes')
@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
            <small>Manage your attributes</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</h3>
                        <button id="add-attributes" 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-table" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                {{--                                <th>Id</th>--}}
                                <th>Attribute Name</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($attributes as $attribute)
                                <tr>
                                    {{--                                    <td>{{ $attribute->id }}</td>--}}
                                    <td>{{ $attribute->attribute_name }}</td>
                                    <td>
                                        <button data-href="{{ route('attributes.edit', $attribute) }}"
                                                class="btn btn-xs btn-primary edit_attribute_button"><i
                                                    class="glyphicon glyphicon-edit"></i>Edit
                                        </button>
                                        {{--                                        <meta name="csrf-token" content="{{ csrf_token() }}">--}}
                                        <button id="{{ $attribute->id }}"
                                                class="btn btn-xs btn-danger delete_attribute_button"><i
                                                    class="glyphicon glyphicon-trash"></i>Delete
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot>
                            <tr>
                                {{--                                <th>Id</th>--}}
                                <th>Attribute Name</th>
                                <th>Actions</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!--/.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    @include('attributes.create')
    {{--    edit modal--}}
    <div class="modal fade" id="attributes-edit-modal">
    </div>
    <!-- /.modal -->
@endsection

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

    <script>

        $('#attributes-table').DataTable();

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

        $('.edit_attribute_button').on('click', function () {
            $('#attributes-edit-modal').load($(this).data('href'), function () {
                $('#attributes-edit-modal').modal('show');
            })
        });

        $('.delete_attribute_button').on('click', function () {
            var id = $(this).attr('id');
            // var token = $("meta[name='csrf-token']").attr("content");
            var url = "{{ route('attributes.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) {
                            if (response === 'Yes') {
                                Swal.fire(
                                    'Deleted!',
                                    'Your file has been deleted.',
                                    'success'
                                ).then(result => {
                                    location.reload();
                                })
                            } else {
                                Swal.fire(
                                    'Cannot Delete!',
                                    'This attribute have attributes values',
                                    'warning'
                                )
                            }
                        }
                    });
                }
            });
        });

    </script>
@endsection