@extends('layouts.app')

@section('content')
    <div class="container">

        <div class="card">

            <div class="card-header">
                <div class="row">
                    <div class="col-md-10">
                        @include('components.filter')
                    </div>
                    <div class="col-md-2">
                        <button type="button" data-toggle="modal" data-target="#item_client_filter" tabindex="-1"
                            class="btn btn-primary btn-sm float-right" style="display: inline-block; height: 36px;">cadastar
                            item</button>
                        @include('items.filter')
                    </div>

                </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_active" class="btn btn-primary">Selecionar Itens</button>
                        <button type="button" style="display: none;" id="select_all" class="btn btn-primary">Selecionar
                            todos
                            itens</button>
                        <button type="button" style="display: none;" id="select_delete"
                            class="btn btn-danger">Apagar</button>
                        <button type="button" style="display: none;" id="select_cancel"
                            class="btn btn-primary">Cancelar</button>

                    </div>

                    <div>
                        <a href="{{ route('item-category.index') }}" class="btn btn-primary">Gerenciar Categorias</a>
                    </div>
                </div>
                <table class="table table-borderless table-earning">
                    <thead class="card-header">
                        <tr>
                            <td></td>
                            <td>item</td>
                            <td>{{ $hierarchy == 'matriz' ? 'loja' : 'cliente' }}</td>
                            <td>descrição</td>
                            <td>categoria</td>
                            <td>tipo</td>
                            <td style="text-align: center;" colspan="2">ações</td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($items as $item)
                            <tr>
                                <td>
                                    <input type="checkbox" name="{{ $item->id }}" id="{{ $item->id }}"
                                        style="display: none;">
                                </td>
                                <td>
                                    @switch($item->type_id)
                                        @case($types->where('name', 'imagem')->first()->id)
                                            <a href="{{ route('items.show', $item->id) }}">
                                                <img src="{{ url('storage/thumbnails') . '/' . $item->parameter->thumbnail }}"
                                                    alt="" border=3 height=auto width=auto></img>
                                            </a>
                                        @break

                                        @case($types->where('name', 'texto')->first()->id)
                                            <a href="{{ route('items.show', $item->id) }}">
                                                <small>
                                                    <p style="white-space: nowrap; width: 80px; overflow: hidden; text-overflow: ellipsis;"
                                                        data-toggle="tooltip" title="{{ $item->content }}">
                                                        {{ $item->content }}
                                                    </p>
                                                </small>
                                            </a>
                                        @break

                                        @case($types->where('name', 'video')->first()->id)
                                            <a href="{{ route('items.show', $item->id) }}">
                                                <video src="{{ asset("storage/videos/$item->content") }}" poster width="80px"
                                                    height="60px"></video>
                                                {{-- <img src="{{ url('storage/thumbnails') . '/' . $item->parameter->thumbnail }}" alt="" border=3 height=auto width=80px></img> --}}
                                            </a>
                                        @break

                                        @case($types->where('name', 'página web')->first()->id)
                                            <a href="{{ route('items.show', $item->id) }}">
                                                <img src="{{ url('storage/thumbnails') . '/' . $item->parameter->thumbnail }}"
                                                    alt="" border=3 height=auto width=80px></img>
                                            </a>
                                        @break

                                        @case($types->where('name', 'produto')->first()->id)
                                            <a href="{{ route('items.show', $item->id) }}">
                                                <img src="{{ url('storage/thumbnails') . '/' . explode('|', $item->parameter->thumbnail)[0] }}"
                                                    alt="" border=3 height=auto width=80px></img>
                                            </a>
                                        @break

                                        @case($types->where('name', 'video web')->first()->id)
                                            <a href="{{ route('items.show', $item->id) }}">
                                                <img src="{{ url('storage/thumbnails') . '/' . $item->parameter->thumbnail }}"
                                                    alt="" border=3 height=auto width=80px></img>
                                            </a>
                                        @break
                                    @endswitch
                                </td>
                                <td>{{ $item->client->business->user->id == $item->client->user->id ? 'matriz' : $item->client->name }}
                                </td>
                                <td>{{ $item->description }}</td>
                                <td>{{ $item->category->name }}</td>
                                <td>{{ $item->type->name }}</td>
                                <td style="width: 70px">
                                    <form role="form" method="GET" action="{{ route('items.edit', $item->id) }}">
                                        <button type="submit" class="btn btn-primary btn-sm">editar</button>
                                    </form>
                                </td>
                                <td style="width: 70px">
                                    <form role="form" method="GET"
                                        action="{{ route('items.confirm.delete', $item->id) }}">
                                        <button type="submit" class="btn btn-danger btn-sm">excluir</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>

        <div align="center" style="margin-top:20px">
            {{ $items->links() }}
        </div>

        @if (empty($items->first()))
            <br>
            <div>
                <table class="table table-bordered" style="width:250px; background-color:#fff">
                    <tbody>
                        <tr>
                            <td>nenhum resultado encontrado</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        @endif


    </div>

    @if (session()->has('categories_by_client'))
        @include('items.create', [
            'client' => session()->get('client'),
            'categories' => session()->get('categories_by_client'),
            'hierarchy' => session()->get('hierarchy'),
            'types' => session()->get('types'),
        ])
    @endif

    @if (session()->has('agency_item_show'))
        @include('items.show', ['agency_item_show' => session()->get('agency_item_show')])
    @endif

    @if (session()->has('agency_item_edit'))
        @include('items.edit', [
            'agency_item_edit' => session()->get('agency_item_edit'),
            'categories' => session()->get('categories'),
        ])
    @endif

    @if (session()->has('agency_item_delete'))
        @include('items.delete', ['agency_item_delete' => session()->get('agency_item_delete')])
    @endif

    <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;
                }
            })
        })
    </script>
@endsection