@extends('layouts.app')
@section('content')
    <div class="container">

        <div class="card">

            <div class="card-header">
                <div class="row">
                    @include('itemCategory.searchBar')
                </div>
            </div>

            <div class="table-responsive table--no-card m-b-30">
                <div class="container_header_list" style="display: flex; justify-content: space-between;">
                    <div>
                        <button type="button" id="select_all" class="btn btn-primary">Selecionar
                            todos
                            itens</button>
                    </div>

                    <div>
                        <button type="button" id="edit_category" class="btn btn-primary">Selecionar categoria</button>
                    </div>
                </div>
                <form action="{{ route('item-category.update', ['item_category' => Auth::user()->id]) }}" method="POST">
                    @method('PUT')
                    @csrf
                    <table class="table table-borderless table-earning">
                        <thead class="card-header">
                            <tr>
                                <td></td>
                                <td>item</td>
                                <td>descrição</td>
                                <td>categoria</td>
                                <td>tipo</td>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($items as $item)
                                <tr>
                                    <td>
                                        <input style="width: 100%;" type="checkbox" name="items[]"
                                            id="{{ $item->id }}" value="{{ $item->id }}">
                                    </td>
                                    <td> <label style="width: 100%;"
                                            for="{{ $item->id }}">{{ $item->client->business->user->id == $item->client->user->id ? 'matriz' : $item->client->name }}</label>
                                    </td>
                                    <td> <label style="width: 100%;"
                                            for="{{ $item->id }}">{{ $item->description }}</label>
                                    </td>
                                    <td> <label style="width: 100%;"
                                            for="{{ $item->id }}">{{ $item->category->name }}</label></td>
                                    <td> <label style="width: 100%;"
                                            for="{{ $item->id }}">{{ $item->type->name }}</label>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    @include('itemCategory.edit')
                </form>
            </div>

        </div>

        <div align="center" style="margin-top:20px">
            {{ $items->links() }}
        </div>
    </div>
    <style>
        .container_header_list {
            display: flex;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.03);
        }

        .container_header_list>button {
            margin-left: 10px;
        }
    </style>

    <script>
        $(document).ready(() => {
            var selectAll = false;
            $('#select_active').click(() => {
                $("tbody input:checkbox").show();
                $("#select_all").show();
                $("#select_delete").show();
                $("#select_cancel").show();
                $('#select_active').hide()
                return false;
            })
            $('#select_all').click(() => {
                if (selectAll == false) {
                    $('#select_all').text('Desselecionar todos itens')
                    $('tbody input:checkbox').prop('checked', true);
                    selectAll = true;
                } else {
                    $('#select_all').text('Selecionar todos')
                    $('tbody input:checkbox').prop('checked', false);
                    selectAll = false;
                }
                return false;
            })
            $('#select_cancel').click(() => {
                $("tbody input:checkbox").hide();
                $("#select_all").hide();
                $("#select_delete").hide();
                $("#select_cancel").hide();
                $('#select_active').show();
                $('tbody input:checkbox').prop('checked', false);
                return false;
            })
            $('#select_delete').click(() => {
                let items = [];

                $("tbody input:checked").each(function() {
                    items.push($(this).attr("id"));
                });

                $.ajax({
                    method: "POST",
                    url: "{{ route('items.delete.multiple') }}",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        items,
                    }
                }).done((resp) => {
                    if (resp == 'success') {
                        window.location.href =
                            "{{ route('items.feedback', ['feedback' => 'item excluído com sucesso !']) }}"
                    }
                    console.log(resp)
                })

                // $("#items_list_delete_form").submit();
                return false;
            })
            $('tbody input:checkbox').click(() => {
                if (selectAll == true) {
                    $('#select_all').text('Selecionar todos')
                    selectAll = false;
                }
            })

            $('#edit_category').click(() => {
                $("#item_sequence_edit").modal('show');
            });
        })
    </script>
@endsection