@extends('layouts.admin')

@section('content')

    <style>
        #upload_file {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }
        .show23 {
            display: inline;
            float: left;
        }
        .hide {
            display: none;
            float: left;
        }
    </style>


    <!--begin::Main-->
    <div class="app-main flex-column flex-row-fluid " id="kt_app_main">

        <!--conteudo-->

        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 "
            >
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
                    <!--begin::Page title-->
                    <div  class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
                        <!--begin::Title-->
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a href="{{route('admin.dashboard')}}" class="text-muted text-hover-primary">
                                    Prefeitura de congonhas                            </a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-500 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                noticias
                            </li>
                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                    <!--end::Page title-->


                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content  flex-column-fluid " >
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container  container-xxl ">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title float-left">Editar Notícia</h4>


                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if (session('success'))

        <div class="alert alert-success">
            {{ session('success') }}
        </div>

    @endif
    @if (session('erro'))

        <div class="alert alert-danger">
            {{ session('erro') }}
        </div>

    @endif
    <div class="row">
        <!-- ============================================================== -->
        <!-- basic form -->
        <!-- ============================================================== -->
        <div class="col-xl-9 col-lg-9col-md-9 col-sm-12 col-12">
            <div class="card">

                <div class="card-body">


                    <form action="{{route('noticias.update', [$category->id])}}" enctype="multipart/form-data" method="POST" class="form" id="enviarimagem">
@method('PUT')

                    @include('app.noticia._form')





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

        <div class="col-xl-3 col-lg-3col-md-3 col-sm-12 col-12">

            <div class="card ">

                <div class="card-body">
                    <div class="form-group">
                        <div class="form-group">
                            <input type="submit" value="Salvar Noticia" class="btn btn-primary" style="margin-top: 10px;" name="criar">
                            <input type="submit" value="Salvar e Editar" class="btn btn-warning" style="margin-top: 10px; color: #000;" name="editar">


                        </div>

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

            <div class="card ">
                <div class="card-body">

                    <h5> Editar data de Publicação</h5>

                    <div class="form-group"  style="margin-top: 20px; " id="diahora">
                        <label for="Titulo"> Selecionar dia e horário:</label>
                        <input class="form-control" type="datetime-local" name="datapublicacao"   value="{{$category->datapublicacao}}" >

                    </div>

                </div>
            </div>

            <div class="card ">
                <div class="card-body">

                    <h5>Destaque</h5>
                    <div class="form-check" style="margin-top: 20px;">
                        <input class="form-check-input" type="checkbox" value="Sim" @if(isset($category->destaque)) @if($category->destaque == 'Sim') checked @endif  @endif name="destaque" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Selecione para destacar
                        </label>
                    </div>


                </div>
            </div>
            <div class="card ">
                <div class="card-body">

                    <h5>Enviar notificação</h5>
                    <div class="form-check" style="margin-top: 20px;">
                        <input class="form-check-input" type="checkbox" value="Sim" name="isnotifica" id="flexCheckDefault1">
                        <label class="form-check-label" for="flexCheckDefault1">
                            Selecione para enviar
                        </label>
                    </div>


                </div>
            </div>
            <div class="card ">

                <div class="card-body">
                    <div class="form-group">
                        <select name="category_id" class="form-control" required>
                            <option >Selecione uma Categoria</option>
                            @foreach($categorys as $categor)
                                <option
                                        @if($category->category_id == $categor->id)
                                        selected="selected"
                                        @endif
                                        value="{{$categor->id}}"> {{$categor->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="card imgdestacada">
                <div class="card-body">
                    <div class="form-group text-center">

                        <input type="file" id="upload_file" name="img" />
                        <div class=" mudarimagem" style="text-align: center">
                            <a  onclick="add('')" style="color: #FFF; padding: 3px; margin-left: 20%; margin-bottom: 30px; " class="  btn btn-danger  mudarimagem2">Trocar de Imagem </a></div>
                            <a  onclick="add2('')" style="color: #FFF; padding: 3px; margin-left: 20%; margin-bottom: 30px; " class="  hide btn btn-danger  mudarimagem3">Trocar de Imagem </a></div>
                        <img class="fecharimg" width="100%" src="{{asset($category->img)}}" alt="">

                        <label id="upload_btn" for="upload_file">
                            <img class="image hide" width="100%" src="{{asset('images/Placeholder.jpg')}}"/>
                        </label>

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

</form>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title " style="color: #FFF;" >Deletar Imagem</h4>
                </div>
                <div class="modal-body">
Tem certeza que deseja Deletar essa imagem ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <a type="button" class="btn btn-danger" id="link" style="color: #FFF;"  >Deletar</a>
                </div>
            </div>
        </div>
    </div>

            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>




    <!--begin::Footer-->
    <div id="kt_app_footer" class="app-footer " >
        <!--begin::Footer container-->
        <div class="app-container  container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3 ">
            <!--begin::Copyright-->
            <div class="text-gray-900 order-2 order-md-1">
                <span class="text-muted fw-semibold me-1">2024&copy;</span>
                <a href="" target="_blank" class="text-gray-800 text-hover-primary">Rlv Tecnologia</a>
            </div>
            <!--end::Copyright-->
            <!--begin::Menu-->
            <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                <li class="menu-item"><a href="" target="_blank" class="menu-link px-2">Sobre</a></li>
                <li class="menu-item"><a href="" target="_blank" class="menu-link px-2">Suporte</a></li>
            </ul>
            <!--end::Menu-->
        </div>
        <!--end::Footer container-->
    </div>
    <!--end::Footer-->
    </div>
    <!--end:::Main-->
@endsection

@section('script')

    <script type="text/javascript" src="{{url('')}}/admin/assets/js/bootstrap-filestyle.min.js"></script>
    <script>
        $('#input03').filestyle({
            badge: true,
            input: false,
            btnClass: 'btn-primary',
            text: "",
            htmlIcon: ' <div style=" width: 100%; padding: 20px;">Adicionar Imagem</div>\n' +
                '                    <i class="fa fa-plus-circle" style="font-size: 50px; margin-bottom: 20px;" aria-hidden="true"></i> '
        });
    </script>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

    <script>
        $(document).ready(function(){





            $('#my-editor').summernote({

                height: 250,
                toolbar: [

                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['popovers', ['lfm']],
                    ['insert', ['link', 'video', 'hr', 'picture']],
                    ['view', ['fullscreen', 'codeview']],
                    ['help', ['help']]
                ]
            })
        });
    </script>


    <script>
        function readURL(input) {



            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $img = $('<img/>').attr('src', e.target.result).attr('class', 'fecharimg').attr('width', '100%');
                    console.log($img);
                    $('.mudarimagem').append($img);
                    $('.image').addClass('hide');
                    $('.mudarimagem3').addClass('show23');
                }

                reader.readAsDataURL(input.files[0]);
            }
        }


        $('body').on("change", "input[name=img]", function() {

            readURL(this);


        });
        function add(value){
            //$(".imgdestacada").load('create .imgdestacada');

            $('.image').removeClass('hide');
            $('.fecharimg').remove();
            $('.mudarimagem2').addClass('hide');

        }
        function add2(value){
            $(".imgdestacada").load('edit .imgdestacada');



        }

        $(document).ready(function(){

            $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('whatever') // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this)
                modal.find('#link').attr('href',recipient)
            })





            $("input[name=url_imagem2]").change(function(){
                $('#enviarimagem').submit();
                console.log('madara');
            });
        });
    </script>
    <script type="text/javascript" src="{{url('')}}/admin/assets/js/lightbox.js"> </script>
    <link href="{{url('')}}/admin/assets/js/lightbox.css" rel="stylesheet" />
@endsection