<div class="tab-pane p-20" id="fotos8" role="tabpanel">

    <div class="col-lg-12">
        <div class="card-block">
            <!--            <form action="-->
            <?php //echo base_url(); ?><!--manutencao/adicionarFotoAoServico" method="post"-->
            <!--                  name="formAddFoto" id="formAddFoto"-->
            <!--                  class="floating-labels m-t-40">-->
            <?php
            $attributes = array('class' => 'floating-labels m-t-40', 'id' => 'formAddFoto');
            echo form_open_multipart("manutencao/adicionarFotoAoServico", $attributes);
            ?>
            <div class="form-body">
                <input type="hidden" id="peca_id" name="peca_id">
                <input type="hidden" id="manutencao_id" name="manutencao_id"
                       value="<?php echo $preventivaEditar->ID_PREVENTIVA ?>">
                <div class="row p-t-20 ">


                    <div class="form-group col-lg-8">
                        <div class="form-group">
                            <label>File upload</label>
                            <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                                <div class="form-control" data-trigger="fileinput"><i
                                            class="glyphicon glyphicon-file fileinput-exists"></i> <span
                                            class="fileinput-filename"></span></div>
                                <span class="input-group-addon btn btn-default btn-file"> <span
                                            class="fileinput-new">Selecionar Foto</span> <span
                                            class="fileinput-exists">Trocar</span>
                                            <input type="file" id="imagensManutencao"
                                                   accept="image/x-png,image/gif,image/jpeg"
                                                   name="imagensManutencao"> </span> <a href="#"
                                                                                        class="input-group-addon btn btn-default fileinput-exists"
                                                                                        data-dismiss="fileinput">Remover</a>
                            </div>
                        </div>
                    </div>


                    <div class="form-group col-lg-4 ">
                        <button type="submit" id="botaoPecaServico" class="btn btn-info">
                            <i class="fa fa-save"></i> Adicionar
                        </button>
                    </div>


                </div>


            </div>

            </form>
        </div>
    </div>
    <hr>

<!--    <div class="col-lg-12">-->
<!--        <div class="card">-->
<!--            <div class="card-block">-->
<!--                <div class="row el-element-overlay">-->
<!--                    --><?php //foreach ($fotosManutencao as $r) { ?>
<!--                        <div class="col-lg-3 col-md-6">-->
<!--                            <div class="card">-->
<!--                                <div class="el-card-item">-->
<!--                                    <div class="el-card-avatar el-overlay-1">-->
<!--                                        <img class="img-thumbnail img-rounded" src="--><?php //echo base_url()?><!--documentos/fotos_manutencao/--><?php //echo $r->FOTO_URL?><!--"-->
<!--                                                                                  alt="user"/>-->
<!--                                        <div class="el-overlay scrl-dwn">-->
<!--                                            <ul class="el-info">-->
<!--                                                <li><a class="btn default btn-outline image-popup-vertical-fit"-->
<!--                                                       href="--><?php //echo base_url()?><!--documentos/fotos_manutencao/--><?php //echo $r->FOTO_URL?><!--"><i-->
<!--                                                                class="icon-magnifier"></i>-->
<!--                                                    </a>-->
<!--                                                </li>-->
<!--                                                <li>-->
<!--                                                    <a class="btn default btn-outline"-->
<!--                                                       href="--><?php //echo base_url()?><!--manutencao/excluirFotoManutencao/--><?php //echo $r->ID_FOTOS_MANUTENCAO?><!--/--><?php //echo $preventivaEditar->ID_PREVENTIVA?><!--">-->
<!--                                                       <i class="icon-trash"></i>-->
<!--                                                    </a>-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!---->
<!---->
<!--                                    </div>-->
<!---->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    --><?php //} ?>
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->


    <div class="container">
        <div class="row">
            <div class="row">
                <?php foreach ($fotosManutencao as $r) { ?>


                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title=""
                       data-image="<?php echo base_url()?>documentos/fotos_manutencao/<?php echo $r->FOTO_URL?>"
                       data-target="#image-gallery">
                        <img class="img-thumbnail"
                             src="<?php echo base_url()?>documentos/fotos_manutencao/<?php echo $r->FOTO_URL?>"
                             alt="Another alt text">
                        <a class="btn default btn-outline"
                           href="<?php echo base_url()?>manutencao/excluirFotoManutencao/<?php echo $r->ID_FOTOS_MANUTENCAO?>/<?php echo $preventivaEditar->ID_PREVENTIVA?>/<?php echo $r->FOTO_URL?>">
                            <i class="fa fa-2x fa-trash-o"></i>
                        </a>

                    </a>
                </div>
                <?php } ?>

            </div>


            <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="image-gallery-title"></h4>
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <img id="image-gallery-image" class="img-responsive col-md-12" src="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                            </button>

                            <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    var modalId = $('#image-gallery');

    $(document)
        .ready(function () {

            loadGallery(true, 'a.thumbnail');

            //This function disables buttons when needed
            function disableButtons(counter_max, counter_current) {
                $('#show-previous-image, #show-next-image')
                    .show();
                if (counter_max === counter_current) {
                    $('#show-next-image')
                        .hide();
                } else if (counter_current === 1) {
                    $('#show-previous-image')
                        .hide();
                }
            }

            /**
             *
             * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
             * @param setClickAttr  Sets the attribute for the click handler.
             */

            function loadGallery(setIDs, setClickAttr) {
                var current_image,
                    selector,
                    counter = 0;

                $('#show-next-image, #show-previous-image')
                    .click(function () {
                        if ($(this)
                            .attr('id') === 'show-previous-image') {
                            current_image--;
                        } else {
                            current_image++;
                        }

                        selector = $('[data-image-id="' + current_image + '"]');
                        updateGallery(selector);
                    });

                function updateGallery(selector) {
                    var $sel = selector;
                    current_image = $sel.data('image-id');
                    $('#image-gallery-title')
                        .text($sel.data('title'));
                    $('#image-gallery-image')
                        .attr('src', $sel.data('image'));
                    disableButtons(counter, $sel.data('image-id'));
                }

                if (setIDs == true) {
                    $('[data-image-id]')
                        .each(function () {
                            counter++;
                            $(this)
                                .attr('data-image-id', counter);
                        });
                }
                $(setClickAttr)
                    .on('click', function () {
                        updateGallery($(this));
                    });
            }
        });

    // build key actions
    $(document)
        .keydown(function (e) {
            switch (e.which) {
                case 37: // left
                    if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
                        $('#show-previous-image')
                            .click();
                    }
                    break;

                case 39: // right
                    if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
                        $('#show-next-image')
                            .click();
                    }
                    break;

                default:
                    return; // exit this handler for other keys
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        });

</script>