@extends('layouts.Principal')
@section('content')

    {{--Inicio do conteudo da seccao--}}
    <div class="row justify-content-center mt-4">
        <div class="col-lg-5">
            <div class="text-center mb-4">
                <h4 class="fw-semibold fs-22">Todas as Novidades</h4>
                <p class="text-muted mb-4 fs-15">Nesta seccao temos todas as noticias que a organizacao fornece!</p>

            </div>
        </div>
        <!--end col-->
    </div>

    <div class="row justify-content-center">
        <div class="col-xl-9">
            <div class="row">
                
                @foreach ($contents as $content)
                <div class="col-lg-4">
                    <div class="card pricing-box">
                        <div class="card-body p-4 m-2">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fw-semibold">{{$content->Title_blog}}</h5>
                                    <p class="text-muted mb-0">{{$content->Subtitle_blog}}</p>
                                </div>
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-light rounded-circle text-primary">
                                        <i class="ri-book-mark-line fs-20"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="pt-4">
                                <h2><sup><small></small></sup> <span class="fs-13 text-muted">{{$content->Title}}</span></h2>
                            </div><br>

                            {{--Inicio da parte contendo os butoes para eliminar e editar os cards--}}
                            <div class="row">
                                <div class="col">
                                    <a href="javascript:void(0);" class="btn w-100" data-bs-toggle="modal"
                                    data-bs-target="#showModal{{$content->id}}" style="background-color:#06870d; color:white">Editar</a>
                                </div>    
                                <div class="col">
                                    <a href="javascript:void(0);" class="btn btn-danger w-100" data-bs-toggle="modal"
                                    data-bs-target="#deleteRecordModal{{ $content->id }}" style=" color:white">Eliminar</a>
                                </div>
                            </div>
                            {{--Fim da parte contendo os butoes--}}

                                {{--Inicio do modal para adicionar uma noticia--}}

                                <div class="modal fade" id="saveModal" tabindex="-1"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header bg-light p-3">
                                            <h5 class="modal-title" id="exampleModalLabel"></h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close" id="close-modal"></button>
                                        </div>
                                        <form class="tablelist-form" autocomplete="off"
                                            action="{{route('saveBlog')}}"
                                            method="post"  enctype="multipart/form-data">
                                            @csrf
                                            <div class="modal-body">

                                                <div class="mb-3">
                                                    <label for="email-field"
                                                        class="form-label">Foto</label>
                                                    <input type="file" id="email-field"
                                                        class="form-control"
                                                        name="Another" required />
                                                    <div class="invalid-feedback">Digite o seu email de forma
                                                        correcta.</div>
                                                </div>

                                                <div class="mb-3" id="modal-id">
                                                    <label for="customername-field"
                                                        class="form-label">Titulo</label>
                                                    <input type="text" id="id-field" name="Title"
                                                        class="form-control" 
                                                        required />
                                                </div>

                                                <div class="mb-3" id="modal-id">
                                                    <label for="customername-field"
                                                        class="form-label">Titulo da Noticia</label>
                                                    <input type="text" id="id-field" name="Title_blog"
                                                        class="form-control"
                                                        required />
                                                </div>

                                                <div class="mb-3" id="modal-id">
                                                    <label for="customername-field"
                                                        class="form-label">Categoria</label>
                                                    <input type="text" id="id-field" name="Category"
                                                        class="form-control"
                                                        required />
                                                </div>

                                                <div class="mb-3">
                                                    <label for="customername-field"
                                                        class="form-label">Conteudo</label>
                                                    <textarea class="form-control bg-light border-0" name="Subtitle_blog" id="billingAddress" rows="10" required></textarea>
                                                    <div class="invalid-feedback">Por favor escreva bem o seu
                                                        nome
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <div class="hstack gap-2 justify-content-end">
                                                    <button type="button" class="btn btn-light"
                                                        data-bs-dismiss="modal">Fechar</button>
                                                    <button type="submit" name="submit"
                                                        class="btn btn-success" id="add-btn">Adicionar
                                                        Conteudo</button>
                                                    <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            {{--Fim do modal para adicionar uma noticia--}}


                            {{--Inicio da parte contendo os modais de editar e eliminar--}}

                            <div class="modal fade" id="showModal{{$content->id}}" tabindex="-1"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header bg-light p-3">
                                            <h5 class="modal-title" id="exampleModalLabel"></h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close" id="close-modal"></button>
                                        </div>
                                        <form class="tablelist-form" autocomplete="off"
                                            action="{{route('updateBlog',['id'=>$content->id])}}"
                                            method="post"  enctype="multipart/form-data">
                                            @csrf
                                            <div class="modal-body">
            
                                                <div class="mb-3">
                                                    <label for="email-field"
                                                        class="form-label">Foto</label>
                                                    <input type="file" id="email-field"
                                                        class="form-control" value="{{ $content->Another }}"
                                                        name="Another" required />
                                                    <div class="invalid-feedback">Digite o seu email de forma
                                                        correcta.</div>
                                                </div>

                                                <div class="mb-3" id="modal-id">
                                                    <label for="customername-field"
                                                        class="form-label">Titulo</label>
                                                    <input type="text" id="id-field" name="Title"
                                                        class="form-control" value="{{ $content->Title }}"
                                                        required />
                                                </div>
            
                                                <div class="mb-3" id="modal-id">
                                                    <label for="customername-field"
                                                        class="form-label">Titulo da Noticia</label>
                                                    <input type="text" id="id-field" name="Title_blog"
                                                        class="form-control" value="{{ $content->Title_blog }}"
                                                        required />
                                                </div>

                                                <div class="mb-3" id="modal-id">
                                                    <label for="customername-field"
                                                        class="form-label">Categoria</label>
                                                    <input type="text" id="id-field" name="Category"
                                                        class="form-control" value="{{ $content->Category }}"
                                                        required />
                                                </div>
            
                                                <div class="mb-3">
                                                    <label for="customername-field"
                                                        class="form-label">Conteudo</label>
                                                    <textarea class="form-control bg-light border-0" name="Subtitle_blog" id="billingAddress" rows="10" required>{{$content->Subtitle_blog}}</textarea>
                                                    <div class="invalid-feedback">Por favor escreva bem o seu
                                                        nome
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="modal-footer">
                                                <div class="hstack gap-2 justify-content-end">
                                                    <button type="button" class="btn btn-light"
                                                        data-bs-dismiss="modal">Fechar</button>
                                                    <button type="submit" name="submit"
                                                        class="btn btn-success" id="add-btn">Actualizar
                                                        Conteudo</button>
                                                    <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
            
                            {{--Inicio do modal para eliminar os dados--}}
            
                            <!-- Modal -->
                            <div class="modal fade zoomIn" id="deleteRecordModal{{ $content->id }}"
                                tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close" id="btn-close"></button>
                                        </div>
                                        <form action="{{ route('deleteBlog', ['id' => $content->id]) }}"
                                            method="get">
                                            @csrf
                                            @method('DELETE')
                                            <div class="modal-body">
                                                <div class="mt-2 text-center">
                                                    <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json"
                                                        trigger="loop"
                                                        colors="primary:#f7b84b,secondary:#f06548"
                                                        style="width:100px;height:100px">
                                                    </lord-icon>
                                                    <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                                        <h4>Voce tem certeza ?</h4>
                                                        <p class="text-muted mx-4 mb-0">Voce pretende eliminar ?</p>
                                                    </div>
                                                </div>
                                                <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                                                    <button type="button" class="btn w-sm btn-light"
                                                        data-bs-dismiss="modal">Fechar</button>
                                                    <button type="submit" name="submit"
                                                        class="btn w-sm btn-danger " id="delete-record">Sim,
                                                        elimine!</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>


                            {{--Fim do modal--}}

                        </div>
                    </div>
                </div>
                @endforeach

                <div class="row justify-content-center">
                    <div class="col-sm-3">
                        <a href="javascript:void(0);" class="btn btn-primary w-100" data-bs-toggle="modal"
                        data-bs-target="#saveModal" style=" color:white">Adicionar Noticia</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {{--Fim do conteudo da seccao--}}

@endsection