@extends('template.default')
@section('text-field')
@stop
@section('content')

    <div hidden id="msgVazio" style="padding-top: 20%;">
        <h5 class="font-weight-600 grey-text center-align">Não existe Banners cadastrados</h5>
        <p class="font-weight-500 grey-text center-align">@lang('Clique em ')<a class="btn-floating"
                                                                                style="cursor: default;">
                <i class="material-icons">add</i>
            </a>para cadastrar banner
        </p>
    </div>

    <div hidden id="conteudoPricincipal">

        <br>

        <div class="row">
            <div class="col s12 offset-m1 m10 offset-l1 l10">
                <div class="row">
                    <div class="col s4 m2 l2">
                        <input type="checkbox" class="filled-in" id="marca-todos"/>
                        <label for="marca-todos">@lang('Todos')</label>
                    </div>

                    @if($permissionService->verifyPermissionView(\App\Models\Permission::CRIAR_EDITAR))

                        <div hidden id="divEditar" class="col s8 m10 l10" style="height: 25px;">
                            <a id="btnEditar" class="tooltipped" data-position="bottom" data-delay="50"
                               data-tooltip="@lang('Editar')">
                                <i class="material-icons grey-text" style="cursor: pointer;">edit</i>
                            </a>
                            <a id="btnExcluir" onclick="abrirModalDeletar()" class="tooltipped" data-position="bottom"
                               data-delay="50" data-tooltip="@lang('Excluir')">
                                <i class="material-icons grey-text" style="cursor: pointer;">delete</i>
                            </a>
                        </div>
                    @endif

                    @if($permissionService->verifyPermissionView(\App\Models\Permission::DELETAR))

                        <div hidden id="divExcluir" class="col s8 m10 l10" style="height: 25px;">
                            <a onclick="abrirModalDeletar()" class="tooltipped" data-position="bottom" data-delay="50"
                               data-tooltip="@lang('Excluir')">
                                <i class="material-icons grey-text" style="cursor: pointer;">delete</i>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card-panel col s12 offset-m1 m10 offset-l1 l10 z-depth-2">

                <table class="highlight">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Título</th>
                        <th>Período</th>
                    </tr>
                    </thead>
                    <tbody>

                    <form id="formDeletar" method="POST">
                        {{ csrf_field() }}

                        @php($key = 0)
                        @php($dateFormat = 'Y-m-d H:i:s')
                        @foreach($news->data as $key => $new)

                            @php($new->aux_date_initial = \Carbon\Carbon::parse($new->date_initial)->format('Y-m-d'))
                            @php($new->aux_time_initial = \Carbon\Carbon::parse($new->date_initial)->format('H:i'))
                            @php($new->aux_date_final = \Carbon\Carbon::parse($new->date_final)->format('Y-m-d'))
                            @php($new->aux_time_final = \Carbon\Carbon::parse($new->date_final)->format('H:i'))

                            <tr>
                                <td>
                                    <input onclick="linhaEscolhida({{json_encode($new)}})"
                                           name="deletar[]" value="{{$new->id}}"
                                           type="checkbox" class="filled-in item"
                                           id="check-tabela-{{ $key }}"/>
                                    <label for="check-tabela-{{ $key }}"></label>
                                </td>
                                <td>{{ $new->title }}</td>
                                <td>
                                    <b>
                                        {{ \Carbon\Carbon::parse($new->date_initial)->format('d/m/Y H:i:s') }}
                                    </b>
                                    até
                                    <b>
                                        {{ \Carbon\Carbon::parse($new->date_final)->format('d/m/Y H:i:s') }}
                                    </b>
                                </td>
                            </tr>

                        @endforeach


                    </form>

                    </tbody>
                </table>

            </div>
        </div>

        @if($news->last_page > 1)

            <div class="row">
                <div class="col offset-s8 s4">

                    <ul class="pagination">
                        <li class="disabled"><a href="/categoria?page=1"><i
                                        class="mdi-navigation-chevron-left material-icons">chevron_left</i></a>
                        </li>

                        @for($i = 1; $i <= $news->last_page; $i++)

                            <li class="waves-effect
                     @if($news->current_page == $i)
                                    active
                        @endif
                                    "><a href="/categoria?page={{ $i }}">{{ $i }}</a></li>
                        @endfor

                        <li class="waves-effect"><a href="/categoria?page={{ $news->last_page }}"><i
                                        class="mdi-navigation-chevron-right material-icons">chevron_right</i></a>

                        </li>
                    </ul>

                </div>
            </div>

        @endif

    </div>

    <div id="modalCrud" class="modal bottom-sheet"
         style="
         padding: 0 !important;
         margin: auto;
         max-height: 95%;
         min-height: 95%;
         width: 55%;
         border-bottom-right-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
"
    >
        <div class="modal-content">
            <div class="row">
                <div class="col s12">
                    <h5 class="font-weight-800 grey-text">@lang('Cadastrar / Editar')</h5>
                </div>
            </div>

            <form id="formCrud" method="post" enctype="multipart/form-data">
                {{ csrf_field() }}

                <input hidden name="id" id="id">

                <br>

                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s12">
                            <select name="type_new_id" id="type_new_id">
                                <option value="" disabled selected>Escolha um tipo</option>

                                @foreach($typeNews->data as $typeNew)

                                    <option value="{{ $typeNew->id }}">{{ $typeNew->name }}</option>

                                @endforeach

                            </select>
                            <label>Tipos de Banner</label>
                        </div>
                    </div>
                </div>

                <br>

                <div class="row">
                    <div class="col s12">
                        <p>WEB: (1050 x 260px)</p>
                    </div>
                </div>

                <br>

                <div class="row valign-wrapper">
                    <div class="col s4">
                        <img id="img_preview"
                             style="object-fit: cover;width: 150px;height: 150px;border-radius: 50%;"
                        >
                    </div>
                    <div class="col s8">
                        <div class="file-field input-field">
                            <div class="btn">
                                <span>File</span>
                                <input name="img" type="file">
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate" type="text">
                            </div>
                        </div>
                    </div>
                </div>

                <br><br>

                <div class="row">
                    <div class="col s12">
                        <p>Mobile (1050 x 1050px)</p>
                    </div>
                </div>

                <br>

                <div class="row valign-wrapper">
                    <div class="col s4">
                        <img id="img_preview_mobile"
                             style="object-fit: cover;width: 150px;height: 150px;border-radius: 50%;"
                        >
                    </div>
                    <div class="col s8">
                        <div class="file-field input-field">
                            <div class="btn">
                                <span>File</span>
                                <input name="imgMobile" type="file">
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate" type="text">
                            </div>
                        </div>
                    </div>
                </div>

                <br>

                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s12">
                            <input id="title" name="title" type="text" class="validate">
                            <label for="title">Título</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s12">
                            <textarea id="new" name="new" type="text" class="validate materialize-textarea"></textarea>
                            <label for="new">Texto</label>
                        </div>
                    </div>
                </div>

                <p class="font-weight-500" style="margin-left: 10px;">Defina o período que o banner ficarar visivel</p>

                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s6">
                            <input id="date_initial" name="date_initial" type="date">
                        </div>
                        <div class="input-field col s2">
                            <input id="time_initial" name="time_initial" type="time">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s6">
                            <input id="date_final" name="date_final" type="date">
                        </div>
                        <div class="input-field col s2">
                            <input id="time_final" name="time_final" type="time">
                        </div>
                    </div>
                </div>

            </form>

        </div>
        <div id="modalBtn" class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-yellow btn-flat">@lang('Cancelar')</a>
            <a href="#!" onclick="enviarFormComValidacao()"
               class="modal-action waves-effect waves-yellow btn-flat">@lang('Salvar')</a>
        </div>

        <div hidden id="modalLoad" class="row">
            <div class="col offset-s10 s1" style="margin-bottom: 15px;">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-yellow-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>

    <div id="modalDeletar" class="modal">
        <div class="modal-content">
            <div class="row">
                <div class="col s12">
                    <h5 class="font-wecategoria
categoria
categoriaight-800 grey-text">@lang('Deletar')</h5>
                </div>
            </div>

            <div class="row">
                <div class="col s12">
                    <p class="font-weight-800 grey-text">@lang('Tem certeza que deseja deletar ')
                        <span id="quantidadeRegistroDeletado" class="red-text"></span>
                        @lang(' registros ?')
                    </p>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">@lang('Cancelar')</a>
            <a href="#!" onclick="deletar()"
               class="modal-action waves-effect waves-yellow btn-flat">@lang('Deletar')</a>
        </div>

        <div hidden id="modalLoadDeletar" class="row">
            <div class="col offset-s10 s1" style="margin-bottom: 15px;">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-yellow-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>


    @if($permissionService->verifyPermissionView(\App\Models\Permission::CRIAR_EDITAR))
        <div class="fixed-action-btn" style="bottom: 40px; right: 20px;">
            <a onclick="abrirModalCrud(0,null)" id="abrir-reclamacao"
               class="btn-floating z-depth-3 btn-large waves-effect waves-light scale-transition">
                <i class="material-icons">add</i>
            </a>
        </div>
    @endif


@endsection
@section('specific-scripts')

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/crud-basic.js') }}"></script>
    <script>

        var linkCrud = [
            '/banner/cadastrar',
            '/banner/editar',
            '/banner/deletar'
        ];

        inicio({{ count($news->data) }});
        $('#formDeletar').attr('action', linkCrud[2]);
        $('.titulo_pagina').text('Banners');

        function inserirDadosForm(data) {

            var array = $.map(data, function (value, index) {
                console.log(value, index);

                if (index === 'aux_date_initial') {

                    $('#date_initial').val(value);

                    return;

                }

                if (index === 'aux_time_initial') {

                    $('#time_initial').val(value);

                    return;

                }

                if (index === 'aux_date_final') {

                    $('#date_final').val(value);

                    return;

                }

                if (index === 'aux_time_final') {

                    $('#time_final').val(value);

                    return;

                }

                if (index === 'img') {
                    $('#img_preview').attr('src', '{{$info->directory}}' + value);
                }

                if (index === 'imgMobile') {

                    $('#img_preview_mobile').attr('src', '{{$info->directory}}' + value);

                }

                $('#' + index).val(value);

            });

            $(document).ready(function () {
                $('select').material_select();
            });

            Materialize.updateTextFields();

        }


        $("#formCrud").validate({
            rules: {
                // title: {
                //     required: true,
                // },
                // new: {
                //     required: true,
                // },
                date_initial: {
                    required: true,
                },
                date_final: {
                    required: true,
                },
                time_initial: {
                    required: true
                },
                time_final: {
                    required: true
                }
            },
            //For custom messages
            messages: {
                // title: {
                //     required: "Campo title é obrigatorio",
                // },
                // new: {
                //     required: "Campo new é obrigatorio",
                // },
                date_initial: {
                    required: "Campo data inícial é obrigatorio",
                },
                date_final: {
                    required: "Campo data inícial é obrigatorio",
                },
                time_initial: {
                    required: "Campo Tempo inícial é obrigatorio"
                },
                time_final: {
                    required: "Campo Tempo final é obrigatorio"
                }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        });

        @if (session('status'))

        msgToast('{{ session('status') }}');

        @endif


    </script>

@stop