@extends('painel.layout.menu')

@section('css')
    <style>
        #draggablePanelList .panel-heading {
            cursor: move;
        }

        .panel-heading {
            background-color: #fff !important;
        }

        .card-header h2 button {
            text-decoration: none !important;
        }

        @import url(https://fonts.googleapis.com/css?family=Open+Sans);

        * {
            font-family: 'Open Sans', sans-serif;
        }

        .responsive-table {
            overflow: auto;
        }

        table {
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            white-space: nowrap;
        }

        table th {
            background: #BDBDBD;
        }

        table tr:nth-child(odd) {
            background-color: #F2F2F2;
        }

        table tr:nth-child(even) {
            background-color: #E6E6E6;
        }

        th,
        tr,
        td {
            text-align: center;
            border: 1px solid #E0E0E0;
            padding: 5px;
        }

        img {
            font-style: italic;
            font-size: 11px;
        }

        .fa-bars {
            cursor: move;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(function() {
            $("#sortable tbody").sortable({
                cursor: "move",
                placeholder: "sortable-placeholder",
                helper: function(e, tr) {
                    console.log(tr);
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function(index) {
                        $(this).width($originals.eq(index).width());
                    });
                    checkOrder();
                    return $helper;
                }
            }).disableSelection();
        });

        function checkOrder() {
            var table = document.getElementById('sortable')
            console.log(table);
        }

        jQuery(function($) {
            var panelList = $('#draggablePanelList');

            panelList.sortable({
                // Only make the .panel-heading child elements support dragging.
                // Omit this to make then entire <li>...</li> draggable.
                handle: '.panel-heading',
                update: function() {
                    $('.panel', panelList).each(function(index, elem) {
                        var $listItem = $(elem),
                            newIndex = $listItem.index();
                        updateOrdemCategoria(elem, newIndex);
                        // Persist the new indices.
                    });
                }
            });
        });

        function updateOrdemCategoria(el, ordem) {
            $.ajax({
                url: '{{ route('cardapio.updateOrderCategoria') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    "id": el.dataset.id,
                    "ordem": ordem
                },
                beforeSend: function() {
                    loading(true);
                },
                success: function(response) {
                    loading(false);
                    // toastr.success('Ordem alterada com sucesso!')
                }
            })
        }

        $('#modal').on('shown.bs.modal', function() {
            $('#valor').trigger('select')
        })

        function excluir(el, tipo) {
            const data = {
                id: el.dataset.id
            }

            var id = el.dataset.id
            var url = el.dataset.url;

            Swal.fire({
                title: `Excluir ${tipo} da Categoria ?`,
                html: `<input type="hidden" id="id" class="swal2-input" value="` + id + `">`,
                inputAttributes: {
                    autocapitalize: 'off'
                },
                backdrop: true,
                showCancelButton: true,
                confirmButtonText: 'Excluir',
                cancelButtonText: 'Cancelar',
                showLoaderOnConfirm: true,
                preConfirm: (id) => {
                    return fetch(url, {
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json",
                                "X-Requested-With": "XMLHttpRequest",
                                "X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
                            },
                            method: 'POST',
                            dataType: 'json',
                            body: JSON.stringify(data)
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(response.statusText)
                            }
                            return response.json()
                        })
                        .catch(error => {
                            Swal.showValidationMessage(
                                `Request failed: ${error}`
                            )
                        })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.value.success) {
                    Swal.fire({
                        title: `Excluído com sucesso`,
                        icon: 'success',
                    }).then(() => {
                        $(`#row-${tipo}-${id}`).remove()
                    })
                } else {
                    Swal.fire({
                        title: `Erro tente novamente`,
                        text: 'Erro: ' + result.value.error,
                        icon: 'error',
                    })
                }
            })
        }

        function editar(el) {
            loading(true)
            $('#modal-content').html('')
            var route = el.dataset.url

            $.ajax({
                url: route,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    loading(false)
                    if (response.html) {
                        $('#modal-content').html(response.html)
                        $('#modal').modal('show')
                    } else {
                        toastr.error(response.error);
                    }
                },
                error: function(error) {
                    loading(false)
                    toastr.error(error);
                }
            })


        }

        function add(el) {
            loading(true)
            $('#modal-content').html('')
            var route = el.dataset.url;

            $.ajax({
                url: route,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    loading(false)
                    if (response.html) {
                        $('#modal-content').html(response.html)
                        $('#modal').modal('show')
                    } else {
                        toastr.error(response.error);
                    }
                },
                error: function(error) {
                    loading(false)
                    toastr.error(error);
                }
            })
        }
    </script>
@endsection

@section('content')
    {{-- <div class="responsive-table">
        <table id="sortable">
            <thead>
                <tr class="ui-state-default">
                    <th>Drag Row</th>
                    <th>Id</th>
                    <th>Fruit</th>
                    <th>Quantity</th>
                    <th>Image</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><i class="fa fa-bars" data-id="1"></i></td>
                    <td data-id="1">1</td>
                    <td>Apple</td>
                    <td>5</td>
                    <td><img src="" alt="noImage" width="30px" height="25px"></td>
                </tr>
                <tr>
                    <td><i class="fa fa-bars" data-id="2"></i></td>
                    <td data-id="2">2</td>
                    <td>Orange</td>
                    <td>8</td>
                    <td><img src="" alt="noImage" width="30px" height="25px"></td>
                </tr>
                <tr>
                    <td><i class="fa fa-bars" data-id="3"></i></td>
                    <td data-role="test" data-id="3">3</td>
                    <td>Banana</td>
                    <td>3</td>
                    <td><img src="" alt="noImage" width="30px" height="25px"></td>
                </tr>
            </tbody>
        </table>
    </div> --}}


    <div class="accordion mt-4" id="accordionExample">
        <ul id="draggablePanelList" class="list-unstyled">
            @foreach ($categorias as $key => $categoria)
                <li class="panel panel-info" data-id="{{ $categoria->id }}">
                    <div class="card panel-heading">
                        <div class="card-header" id="heading{{ $categoria->id }}">
                            <h2 class="mb-0">
                                <button class="btn btn-link btn-block text-left collapsed" type="button"
                                    data-toggle="collapse" data-target="#collapse{{ $categoria->id }}" aria-expanded="true"
                                    aria-controls="collapse{{ $categoria->id }}">
                                    {{ $categoria->titulo }}
                                </button>
                            </h2>
                        </div>

                        <div id="collapse{{ $categoria->id }}" class="collapse"
                            aria-labelledby="heading{{ $categoria->id }}" data-parent="#accordionExample">
                            <div class="card-body">
                                <div class="item-categoria sabores border-3 border-bottom border-info">
                                    <label>Sabores</label>
                                    <button class="btn btn-sm btn-success" title="Adicionar Sabor"
                                        data-url="{{ route('cardapio.addSabor', $categoria->id) }}"
                                        onclick="add(this)">+</button>
                                    @if ($categoria->sabores()->count() === 0)
                                        <div class="col-md-12 text-center">
                                            <span>Nenhum sabor encontrado!</span>
                                        </div>
                                    @else
                                        <div class="table-responsive mt-2">
                                            <table id="example1"
                                                class="table table-sm table-bordered table-striped text-center">
                                                <thead>
                                                    <tr>
                                                        <th>Título</th>
                                                        <th>Valor</th>
                                                        <th>Ação</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($categoria->sabores() as $sabor)
                                                        <tr id="row-sabor-{{ $sabor->id }}">
                                                            <td>{{ $sabor->get('titulo') }}</td>
                                                            <td>R$ {{ number_format($sabor->valor, 2, ',', '.') }}</td>
                                                            <td>
                                                                <center class="d-flex justify-content-center">
                                                                    <a href="javascript:void(0)"
                                                                        data-url="{{ route('cardapio.editarSabor', $sabor->id) }}"
                                                                        onclick="editar(this)"
                                                                        class="btn btn-sm btn-outline-warning mr-2"
                                                                        title="Editar"><i class="far fa-edit"></i></a>
                                                                    <a href="javascript:void(0)"
                                                                        data-url={{ route('cardapio.excluirSabor') }}
                                                                        data-id="{{ $sabor->id }}"
                                                                        onclick="excluir(this, 'sabor')"
                                                                        class="btn btn-sm btn-outline-danger mr-2"
                                                                        title="Excluir"><i class="fas fa-trash"></i></a>
                                                                </center>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif
                                </div>

                                <div class="item-categoria bordas border-3 border-bottom border-info">
                                    <label>Bordas</label>
                                    <button class="btn btn-sm btn-success" title="Adicionar Borda"
                                        data-url="{{ route('cardapio.addBorda', $categoria->id) }}"
                                        onclick="add(this)">+</button>
                                    @if ($categoria->bordas()->count() === 0)
                                        <div class="col-md-12 text-center">
                                            <span>Nenhuma borda encontrada!</span>
                                        </div>
                                    @else
                                        <div class="table-responsive mt-2">
                                            <table id="example1"
                                                class="table table-sm table-bordered table-striped text-center">
                                                <thead>
                                                    <tr>
                                                        <th>Título</th>
                                                        <th>Valor</th>
                                                        <th>Ação</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($categoria->bordas() as $borda)
                                                        <tr id="row-borda-{{ $borda->id }}">
                                                            <td>{{ $borda->get('titulo') }}</td>
                                                            <td>R$ {{ number_format($borda->valor, 2, ',', '.') }}</td>
                                                            <td>
                                                                <center class="d-flex justify-content-center">
                                                                    <a href="javascript:void(0)"
                                                                        data-url="{{ route('cardapio.editarBorda', $borda->id) }}"
                                                                        data-id="{{ $borda->id }}"
                                                                        onclick="editar(this)"
                                                                        class="btn btn-sm btn-outline-warning mr-2"
                                                                        title="Editar"><i class="far fa-edit"></i></a>
                                                                    <a href="javascript:void(0)"
                                                                        data-url="{{ route('cardapio.excluirBorda') }}"
                                                                        data-id="{{ $borda->id }}"
                                                                        onclick="excluir(this, 'borda')"
                                                                        class="btn btn-sm btn-outline-danger mr-2"
                                                                        title="Excluir"><i class="fas fa-trash"></i></a>
                                                                </center>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif
                                </div>

                                <div class="item-categoria adicionais border-3 border-bottom border-info">
                                    <label>Adicionais</label>
                                    <button class="btn btn-sm btn-success" title="Adicionar Borda"
                                        data-url="{{ route('cardapio.addAdicional', $categoria->id) }}"
                                        onclick="add(this)">+</button>
                                    @if ($categoria->bordas()->count() === 0)
                                        <div class="col-md-12 text-center">
                                            <span>Nenhum adicional encontrado!</span>
                                        </div>
                                    @else
                                        <div class="table-responsive mt-2">
                                            <table id="example1"
                                                class="table table-sm table-bordered table-striped text-center">
                                                <thead>
                                                    <tr>
                                                        <th>Título</th>
                                                        <th>Valor</th>
                                                        <th>Ação</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($categoria->adicionais() as $adicional)
                                                        <tr id="row-adicional-{{ $adicional->id }}">
                                                            <td>{{ $adicional->get('titulo') }}</td>
                                                            <td>R$ {{ number_format($adicional->valor, 2, ',', '.') }}</td>
                                                            <td>
                                                                <center class="d-flex justify-content-center">
                                                                    <a href="javascript:void(0)"
                                                                        data-url="{{ route('cardapio.editarAdicional', $adicional->id) }}"
                                                                        data-id="{{ $adicional->id }}"
                                                                        onclick="editar(this)"
                                                                        class="btn btn-sm btn-outline-warning mr-2"
                                                                        title="Editar"><i class="far fa-edit"></i></a>
                                                                    <a href="javascript:void(0)"
                                                                        data-url="{{ route('cardapio.excluirAdicional') }}"
                                                                        data-id="{{ $adicional->id }}"
                                                                        onclick="excluir(this, 'adicional')"
                                                                        class="btn btn-sm btn-outline-danger mr-2"
                                                                        title="Excluir"><i class="fas fa-trash"></i></a>
                                                                </center>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif
                                </div>

                            </div>
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
@endsection

@section('modal')
    <!-- Modal Editar Sabor -->
    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" id="modal-content">
            {{-- Conteudo é preenchido atraves do JS --}}
        </div>
    </div>
@endsection