@extends('adminlte::page')

@section('title', 'blog')

@section('content_header')
    <h1>Dashboard</h1>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Marcas</h3>
                </div>
                <div class="col-sm mt-3 px-4">
                    <a href="" class="btn btn-success px-4" id="addPost">
                        Agregar nuevo post
                    </a>
                </div>
                <div class="d-flex row mt-3 p-3">
                    <div class="col-8">
                        {{ $posts->links() }}
                    </div>
                    {{--
                <div class="col-4">
                    <form action="{{ Route('searchBrands') }}" method="GET">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-10">
                                    <input class="form-control" type="text" placeholder="Buscar marca..."
                                        name="query">
                                </div>
                                <div class="col-2">
                                    <button class="btn custom-hover-button" type="submit"><i
                                            class="bi bi-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                --}}
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 20%;">Titulo</th>
                                    <th style="width: 20%;">Etiqueta</th>
                                    <th style="width: 20%;">Categoria asociada</th>
                                    <th style="width: 20%; align-items:center;">Imagen del post</th>
                                    <th style="width: 20%;">Creado el:</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Actions --}}
                                @forelse($posts as $post)
                                    <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                        <td>{{ $post->display_name }}</td>
                                        <td>{{ $post->slug }}</td>
                                        <td>{{ $post->category->display_name }}</td>
                                        <td class="text-center">
                                            @if (!$post->banner_image)
                                                <img src="{{ Asset('assets/carrito.png') }}" alt="Image"
                                                    class="img-fluid rounded align-middle border" alt="Sin imagen2"
                                                    width="50%" height="50%">
                                            @else
                                                <img src="{{ Asset('uploads/blog/' . $post->banner_image) }}"
                                                    class="img-fluid rounded align-middle border" alt="Sin imagen"
                                                    width="50%" height="50%">
                                            @endif
                                        </td>
                                        <td>{{ $post->created_at }}</td>
                                    </tr>
                                    <tr class="expandable-body row-loading">
                                        <td colspan="5" disabled>
                                            <div class="d-flex mx-auto justify-content-between">
                                                <p class="mt-1">Ultima modificación: {{ $post->updated_at }}</p>
                                                <div class="row p-1">
                                                    <a href="" class="btn btn-warning modPost m-1"
                                                        data-post-id="{{ $post->id }}">Modificar</a>

                                                    <a href="" class="btn btn-danger dropPost m-1"
                                                        data-post-id="{{ $post->id }}"
                                                        data-post-name="{{ $post->display_name }}">Borrar</a>

                                                    <form id="dropPost_{{ $post->id }}"
                                                        action="{{ route('dropPost', $post->id) }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="idDropPost"
                                                            value="{{ $post->id }}">
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="bg-secondary" colspan="5" align="center">Sin posts en el blog, agrege
                                            una nueva
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="container d-flex justify-content-center">
                    {{ $posts->links() }}
                </div>
            </div>
        </div>
    </div>

    {{-- Add post modal --}}
    <div class="modal fade" id="addPostModal" tabindex="-1" aria-labelledby="newPost" data-bs-keyboard="false"
        aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="newPost">Nuevo post</h5>
                    <button type="button" class="close closeModal" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="addPostForm" action="{{ Route('addPost') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <div class="form-group col-8">
                                <label for="namePost" class="form-label">Titulo de la publicación</label>
                                <input type="text" class="form-control" id="namePost" name="namePost"
                                    placeholder="Ingrese el titulo">
                            </div>
                            <div class="form-group col-4">
                                <label for="categorySelect" class="form-label">Categoría</label>
                                @if ($categories->count() > 0)
                                    <select name="categorySelect" id="categorySelect" class="form-control">
                                        <option value="" disabled selected>* Selecciona una opción *</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->slug }}">{{ $category->display_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <select class="form-control" disabled>
                                        <option value="" disabled selected>* Sin categorias disponibles *</option>
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="descriptionPost" class="form-label">Descripción del post</label>
                            <textarea class="form-control summernote" id="descriptionPost" name="descriptionPost" required></textarea>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="contentPost" class="form-label">Contenido del post</label>
                            <textarea class="form-control summernote" id="contentPost" name="contentPost" required></textarea>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="postImage" class="form-label">Imagen de subtitulo</label>
                            <input class="form-control" type="file" id="postImage" name="postImage" accept="">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success" id="submitAddPostForm">Crear post</button>
                            <button type="button" class="btn btn-secondary closeModal"
                                data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Mod post modal --}}
    <div class="modal fade" id="modPostModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-warning" id="notLinkedModal">Modificar post</h5>
                    <button type="button" class="close closeModal" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="modPostForm" action="{{ Route('modPost') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="slugPost" id="slugPost">
                        <div class="row mb-3">
                            <div class="form-group col-8">
                                <label for="nameModPost" class="form-label">Titulo de la publicación</label>
                                <input type="text" class="form-control" id="nameModPost" name="nameModPost"
                                    placeholder="Ingrese el titulo">
                            </div>
                            <div class="form-group col-4">
                                <label for="categoryModSelect" class="form-label">Categoría</label>
                                @if ($categories->count() > 0)
                                    <select name="categoryModSelect" id="categoryModSelect" class="form-control">
                                        <option value="" disabled selected>* Selecciona una opción *</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->slug }}">{{ $category->display_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <select class="form-control" disabled>
                                        <option value="" disabled selected>* Sin categorias disponibles *</option>
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="descriptionModPost" class="form-label">Descripción</label>
                            <textarea class="form-control summernote" id="descriptionModPost" name="descriptionModPost" required></textarea>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="contentModPost" class="form-label">Contenido del post</label>
                            <textarea class="form-control summernote" id="contentModPost" name="contentModPost" required></textarea>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="postModImage" class="form-label">Imagen de subtitulo (opcional)</label>
                            <input class="form-control" type="file" id="postModImage" name="postModImage"
                                accept="">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-warning" id="submitModPostForm">Hacer
                                cambios</button>
                            <button type="button" class="btn btn-secondary closeModal"
                                data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/blog/addPost.js')
    @vite('resources/js/blog/modPost.js')
    @vite('resources/js/blog/dropPost.js')
@endsection