@extends('adminlte::page')

@section('title', 'Sliders')

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

@section('content')
    <div class="row">
        <div class="col-3 mb-4">
            <p class="text-bold">Agregue un nueva imagen en un slider existente</p>

            <form autocomplete="off" id="addImageForm" action="{{ Route('addSliderImage') }}" method="post" class="mt-3"
                enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label for="identifier">Identificador:</label>
                    <select name="identifier" id="identifier" class="form-control" required>
                        <option value="" disabled selected>Selecciona una opcion*</option>
                        @foreach ($identifiers as $identifier)
                            <option value="{{ $identifier->id }}">{{ $identifier->display_name }}</option>
                        @endforeach
                    </select>
                    <span id="error-identifier" class="text-danger"></span>
                    @if ($errors->has('identifier'))
                        <span class="text-danger">{{ $errors->first('identifier') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    <label for="image">Imagen para el slider</label>
                    <input type="file" name="image" id="image" class="form-control" accept="image/*" required>
                </div>

                <div class="form-group">
                    <label for="redirect_link">Link de redirección</label>
                    <input type="url" name="redirect_link" id="redirect_link" class="form-control"
                        placeholder="https://www.google.com">
                    <small class="text-danger">Si se agrega algun link; asegurate de colocar la url completa como en el
                        ejemplo para evitar problemas de redirección</small>
                </div>

                <input type="submit" id="submitIdentifier" class="btn btn-success" value="Crear imagen para slider">
            </form>
        </div>

        <div class="col-9">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Imagenes existentes</h3><br>
                    <select id="identifierSearch" class="form-control w-25">
                        @foreach ($identifiers as $identifier)
                            <option value="{{ $identifier->id }}">{{ $identifier->display_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Identificador</th>
                                <th>Imagen</th>
                                <th>Url para redirigir</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Actions --}}
                            @forelse($sliderImages as $image)
                                <tr data-widget="expandable-table" aria-expanded="false" class="row-loading"
                                    data-identifier="{{ $image->identifier->id }}">
                                    <td>{{ $image->id }}</td>
                                    <td>{{ $image->identifier->display_name }}</td>
                                    <td class="text-center"><img src="{{ asset('uploads/sliders/' . $image->image) }}"
                                            alt="Sin imagen" class="img-fluid" width="50%" height="50%"></td>
                                    <td><a href="{{ $image->redirect_link }}">{{ $image->redirect_link }}</a></td>
                                </tr>
                                <tr class="expandable-body row-loading" data-identifier="{{ $image->identifier->id }}">
                                    <td colspan="4" disabled>
                                        <div class="d-flex mx-auto justify-content-around">
                                            <div class="row">
                                                <div class="col border">
                                                    <p class="mt-1">Actualizado por ultima vez:
                                                        {{ $image->updated_at }}</p>
                                                </div>
                                                <div class="col-mg border">

                                                    <a href="" class="btn btn-danger dropImage m-1"
                                                        data-image-id="{{ $image->id }}">
                                                        Borrar imagen</a>

                                                    <form id="dropImage_{{ $image->id }}"
                                                        action="{{ route('dropSliderImage') }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="idDropImage"
                                                            value="{{ $image->id }}">
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="bg-secondary" colspan="4" align="center">Sin imagenes disponibles,
                                        agrege uno
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        $(document).ready(function() {
            filterImages();
            $("#identifierSearch").on('change', function() {
                filterImages();
            });
            $(".dropImage").on('click', function(e) {
                e.preventDefault();
                var imageid = $(this).data('image-id');
                $("#dropImage_" + imageid).submit();
            })
        });

        function filterImages() {
            const identifier = $("#identifierSearch").val();
            $("tbody tr[data-identifier]").each(function() {
                $(this).toggle($(this).data("identifier") == identifier);
            });
        }
    </script>
@endsection