@extends('back.layouts.main')
@section('title', 'Attributes')
@section('content')


    <div class="card">
        <div class="card-header">
            <div class="btn-group float-md-right">
                <a href="{{ url('backend/attributes/create') }}" class='btn btn-info'><i class='fa fa-plus mr-1'></i>Create</a>
                <a data-toggle="modal" data-target="#sort" class='btn btn-primary active'>Sort</a>
            </div>
        </div>
        <div class="card-content overflow-auto collapse show">
            <div class="card-body card-dashboard">

                <table class="table table-responsive-sm table-striped table-bordered data-table">
                    <tr>
                        <th style="min-width: 65px">#</th>
                        <th>Name</th>
                        <th>Backend name</th>
                        <th>Group</th>
                        <th style="width: 65px">Actions</th>
                    </tr>
                    <form method='get' class='search'>
                        <tr>
                            <th><input type='text' name='id' value='{{ request('id') }}' class='form-control'></th>
                            <th><input type='text' name='name' value='{{ request('name') }}'
                                    class='form-control'></th>
                            <th><input type='text' name='backend_name' value='{{ request('backend_name') }}'
                                    class='form-control'></th>
                            <th><input type='text' name='group_id' value='{{ request('group_id') }}'
                                    class='form-control'></th>
                            <th style="width: 65px">
                                <input type='submit' class='btn btn-primary filter' name='search' value='filter' />
                            </th>
                        </tr>
                    </form>
                    @if ($data->isNotEmpty())
                        @foreach ($data as $row)
                            <tr>
                                <td>{{ $row->id }}</td>
                                <td>{{ $row->name }}</td>
                                <td>{{ $row->backend_name }}</td>
                                <td>{{ @$row->group->name }}</td>
                                <td>
                                    <a href="{{ url('backend/attributes/' . $row->id . '/edit') }}" title='Edit'>
                                        <i class="fa fa-lg fa-edit"></i>
                                    </a>
                                    <form method="POST" class='d-inline'
                                        action="{{ route('attributes.destroy', $row->id) }}"
                                        onsubmit="return confirm('Do you really want delete this?');">
                                        @method('DELETE')
                                        @csrf
                                        <button class='delete'>
                                            <i class="fas fa-lg fa-times"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td class='text-center' colspan='100'>No Data Available</td>
                        </tr>
                    @endif
                </table>

                <!-- /.box-body -->
                <div class="box-footer clearfix">
                    {{ $data->appends(request()->except('page'))->links() }}
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="sort" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="post" action='./attributes/sort'>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <ul class="sortable">
                            @csrf
                            @foreach ($data as $row)
                                <li class="ui-state-default"><span
                                        class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                                    {{ $row->name }} <input type='hidden' name='id[]' value='{{ $row->id }}'>
                                </li>
                            @endforeach
                        </ul>
                        <style>
                            .sortable {
                                padding: 0;
                            }

                            .sortable li {
                                list-style: none;
                                cursor: pointer;
                            }
                        </style>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" name='sort' class="btn btn-primary">Sort</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@stop

@push('footer')
    <script src="{{ url('admin/app-assets/js/core/libraries/jquery_ui/jquery-ui.min.js') }}"></script>
    <script>
        $(function() {
            $(".sortable").sortable();
        });
    </script>
    <script>
        $('.data-table input , .data-table select ').change(function() {
            $('.filter').trigger('click');
        });
    </script>
@endpush

@section('breadcrumbs')
    <li class="breadcrumb-item active">Attributes</li>
@stop

@push('header')
    <link rel="stylesheet" href="{{ url('admin/app-assets/vendors/css/ui/jquery-ui.min.css') }}"">
@endpush