@extends('layouts.admin')

@section('content')
<style>
    .btn-edit { position: absolute;bottom: 5px; left: 25px }
    .btn-delete { position: absolute;bottom: 5px; right: 25px; }
</style>
<div class="container mt-30">
    <h6><a href="{{ route('services.index') }}">Servicios</a> >{{ $service->name }} > Imagenes</h6>

    <div class="card">
        <div class="card-body">
            @include('admin.partials.alert_message')

            <div class="row">
                @foreach ( $service->images as $image)
                    <div class="col-md-3" style="margin-bottom: 30px;">
                        {{-- <img src="{{ url('/img/thumbnail/medium/' . $image->name) }}" class="img-fluid"> --}}
                        <img src="{{ url('/img/uploads/' . $image->name) }}" class="img-fluid">

                        {{-- <a class="btn btn-sm btn-outline-secondary btn-edit" href="#" data-toggle="modal" data-target="#editImage{{ $image->id }}"> <i class="fa fa-pencil fa-2x" aria-hidden="true"></i></a> --}}
                        
                        <a class="btn btn-sm btn-secondary btn-delete" title="Eliminar" href="{{ route('services.images.destroy', [$service->id, $image->id]) }}" data-method="delete" data-confirm="¿Está seguro de borrar la imagen?"><i class="fa fa-trash fa-2x" aria-hidden="true"></i></a>
                    </div>
                @endforeach
            </div>

            <hr>
            {!! Form::open(['route' => ['services.images.store', $service->id], 'method' => 'POST', 'files' => true]) !!}
                <div class="form-group">
                    <label><i class="fa fa-plus-circle" aria-hidden="true"></i> Nueva Imagen (864x513):</label><br>
                    <input type="file" name="image" required>
                    <input type="hidden" name="id" value="{{ $service->id }}">
                </div>                
                <div class="d-flex justify-content-between align-items-end mb-2">
                    <a class="btn btn-sm btn-outline-secondary" title="Regresar" href="{{ route('services.index') }}"><i class="fa fa-arrow-left fa-2x" aria-hidden="true"></i></a>
                    <button type="submit" class="btn btn-sm btn-outline-secondary"><i class="fa fa-floppy-o fa-2x" title="Guardar" aria-hidden="true"></i></button>
                </div>
            {!! Form::close() !!}            
        </div>
    </div>    
</div>

{{-- @foreach ( $service->images as $image)
    <div class="modal fade" tabindex="-1" id="editImage{{ $image->id }}" style="margin-top: 100px;">
        <div class="modal-dialog">
            <div class="modal-content">
                {!! Form::open(['route' => ['services.images.update', $service->id, $image->id], 'method' => 'PUT']) !!}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Editar</h4>
                    </div>
                    <div class="modal-body">
                            <div class="form-group">
                                <label>Alt Tag (Español)</label>
                                <input name="alt_tag_es" type="text" value="{{ $image->alt_tag_es }}" minlength="3" class="form-control">
                            </div>

                            <div class="form-group">
                                <label>Alt Tag (Ingles)</label>
                                <input name="alt_tag_en" type="text" value="{{ $image->alt_tag_en }}" minlength="3" class="form-control">
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endforeach --}}

@endsection

@section('scripts')
    @include('admin.partials.js-delete')
@endsection