@extends('componentes.corpo')



@section('cadastroGeral7')
    active
@endsection

@section('pessoas')
active
    @endsection


@section('head')





    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
    <link href="/vendor/datatables.net-dt/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="/vendor/datatables.net-responsive-dt/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />




    <script>



        (function ($) {
            $(function () {

                var addFormGroup = function (event) {
                    event.preventDefault();

                    var $formGroup = $(this).closest('.form-group');
                    var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
                    var $formGroupClone = $formGroup.clone();

                    $(this)
                        .toggleClass('btn-success btn-add btn-danger btn-remove')
                        .html('–');

                    $formGroupClone.find('input').val('');
                    $formGroupClone.find('.concept_sistema').text('Sistema');
                    $formGroupClone.find('.concept').text('Estado');
                    $formGroupClone.insertAfter($formGroup);

                    var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
                    if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
                        $lastFormGroupLast.find('.btn-add').attr('disabled', true);
                    }
                };




                var removeFormGroup = function (event) {
                    event.preventDefault();

                    var $formGroup = $(this).closest('.form-group');
                    var $multipleFormGroup = $formGroup.closest('.multiple-form-group');

                    var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
                    if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
                        $lastFormGroupLast.find('.btn-add').attr('disabled', false);
                    }

                    $formGroup.remove();
                };

                var countFormGroup = function ($form) {
                    return $form.find('.form-group').length;
                };

                $(document).on('click', '.btn-add', addFormGroup);
                $(document).on('click', '.btn-remove', removeFormGroup);

            });
        })(jQuery);



        function mascaraMutuario(o,f){
            v_obj=o
            v_fun=f
            setTimeout('execmascara()',1)
        }

        function execmascara(){
            v_obj.value=v_fun(v_obj.value)
        }

        function cpfCnpj(v){

            //Remove tudo o que não é dígito
            v=v.replace(/\D/g,"")

            if (v.length <= 14) { //CPF

                //Coloca um ponto entre o terceiro e o quarto dígitos
                v=v.replace(/(\d{3})(\d)/,"$1.$2")

                //Coloca um ponto entre o terceiro e o quarto dígitos
                //de novo (para o segundo bloco de números)
                v=v.replace(/(\d{3})(\d)/,"$1.$2")

                //Coloca um hífen entre o terceiro e o quarto dígitos
                v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2")

            } else { //CNPJ

                //Coloca ponto entre o segundo e o terceiro dígitos
                v=v.replace(/^(\d{2})(\d)/,"$1.$2")

                //Coloca ponto entre o quinto e o sexto dígitos
                v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")

                //Coloca uma barra entre o oitavo e o nono dígitos
                v=v.replace(/\.(\d{3})(\d)/,".$1/$2")

                //Coloca um hífen depois do bloco de quatro dígitos
                v=v.replace(/(\d{4})(\d)/,"$1-$2")

            }

            return v
        }

        jQuery("input.telefone")
            .mask("(99) 9999-9999?9")
            .focusout(function (event) {
                var target, phone, element;
                target = (event.currentTarget) ? event.currentTarget : event.srcElement;
                phone = target.value.replace(/\D/g, '');
                element = $(target);
                element.unmask();
                if(phone.length > 10) {
                    element.mask("(99) 99999-999?9");
                } else {
                    element.mask("(99) 9999-9999?9");
                }
            });


        $("#telefone, .celular").mask("(00) 00000-0000");
    </script>



    <style>

        #datable_1 tr:hover td {
            background-color: cadetblue;
            cursor: pointer;
        }

    </style>
@endsection


@section('propriedade')
    active
@endsection

@section('conteudo')


    <div class="hk-pg-wrapper ">

        <!-- Breadcrumb -->
        <nav class="hk-breadcrumb" aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-light bg-transparent">
                <li class="breadcrumb-item"><a href="/home">Inicio</a></li>
                <li class="breadcrumb-item active" aria-current="page">Notícias</li>
            </ol>

        </nav>
        <!-- /Breadcrumb -->






        <!-- Container -->
        <div class="container-fluid px-xxl-65 px-xl-20" >

            <!-------------- TITULO NAV ------------------------->
            <div class="tab-content" id="myTabContent">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cadastrar Slides</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Slides Cadastrados </a>
                    </li>


                </ul>


                <!------- PRIMEIRA NAV ------------------------------>

                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="row">
                        <div class="col-xl-12">
                            <section class="hk-sec-wrapper">

                                <!-- Título -->
                                <div class="hk-pg-header">
                                    <h4 class="hk-pg-title">
                                <span class="pg-title-icon">
                                    <span class="feather-icon"><i data-feather="edit"></i></span>
                                </span>
                                        @if(empty($editar)) Cadastro  de @else Editar @endif Slide</h4>
                                </div>
                                <!-- /Title -->

                                <div class="col-sm">

                                    @if(empty($editar))
                                        <form method="post" action="{{route('slidesCadastro')}}" enctype="multipart/form-data">
                                            @else
                                                <form method="post" action="{{route('updatePessoas')}}" enctype="multipart/form-data">
                                                    <input type="hidden" name="id" value="{{$pessoasEditar->id}}">
                                                    @endif
                                                    @csrf

                                                   <div class="row">







                                                       <div class="col-md-12">
                                                           <div class="form-group">
                                                               <label class="control-label mb-10" for="exampleInputuname_1">Insira a imagem (Tamanho recomendado: 1343x619)</label>
                                                               <div class="input-group">

                                                                   <input type="file" class="form-control-file" name="img"  >
                                                               </div>
                                                           </div>
                                                       </div>

                                                    <button type="submit" class="btn btn-success mr-10"> Cadastrar Novo Slide</button>

                                                    @if(!empty($editar))
                                                        <a class="btn btn-sm btn-info mr-10" href="{{route('pessoas')}}">
                                                           + Cadastrar Nova Pessoa
                                                        </a>
                                                    @endif
                                                </form>


                            </section>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="row">
                        <div class="col-xl-12">
                            <section class="hk-sec-wrapper">

                                <!-- Título -->
                                <div class="hk-pg-header">
                                    <h4 class="hk-pg-title">
                                <span class="pg-title-icon">
                                    <span class="feather-icon"><i data-feather="search"></i></span>
                                </span>
                                        Slides Ativos</h4>
                                </div>




                                <div class="row">
                                    <div class="col-sm">
                                        <div class="table-wrap">
                                            <table id="datable_1" class="table table-hover w-100 display pb-30">
                                                <thead>
                                                <tr>
                                                    <th>Código</th>
                                                    <th>Imagem</th>
                                                    <th align="center" class="text-center">Ações</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @php $i=1; @endphp


                                                    @foreach($slides as $p)

                                                        <tr>
                                                            <td>{{$i++}}</td>
                                                            <td><img src="/img/{{$p->img}}" width="400px" height="120px"> </td>
                                                            <td  class="text-center">
                                                                <button href="#excluir{{$i}}" class="btn btn-sm btn-danger" data-toggle="modal">excluir</button>


                                                                <div id="excluir{{$i}}" class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog modal-confirm">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">

                                                                                <h4 class="modal-title">Você realmente deseja excluir?</h4>
                                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <p style="font-color: #1b1e21">Ao excluir essa informação será elimiado permanentemente. </p>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-info" data-dismiss="modal">Cancelar</button>
                                                                                <a href="{{route('excluirSlides',$p->id)}}">
                                                                                    <button type="button" class="btn btn-danger">Sim, desejo excluir.</button>
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </td>

                                                        </tr>





                                                    @endforeach

                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                    <th>Código</th>
                                                    <th>Imagem</th>
                                                    <th>Ações</th>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>
                </div>


                <!------- SEGUNDA NAV ------------------------------>


            </div>

            <!---------------- FIM NAV-------------->
        </div>
    </div>








@endsection


@section('footer')




    <script src="/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="/vendor/datatables.net-dt/js/dataTables.dataTables.min.js"></script>
    <script src="/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/dist/js/dataTables-data.js"></script>



@endsection