@extends('layouts.app')
@section('css')
<style media="screen" type="text/css">
    .panel {
        width: 99% !important;

    }

    #addBanner {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    }

    .titulo {
        padding-bottom:5px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>

@stop
@section('contenido')
<div class="panel panel-default">
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @elseif(session()->has('error'))
    <div class="alert alert-danger">
            {{ session()->get('error') }}
    </div>
    @endif
    <div class="panel-heading">

        <h4 class="titulo">
            {{ trans('empresas.titulo_panel_catalogo_slider') }}
             {{count($find)}}/4
            @if ( Auth::user()->isAdmin() )
                <span class="float-r" ><a id="addBanner"
                    @if (count($find) === 4)
                        class="btn btn-success disabled"
                    @else
                        class="btn btn-success" href="{{ route('sliderCrear') }}"
                    @endif
                    >
                    <i class="fas fa-plus"></i>
                    Agregar Banner</a>
                </span>
            @endif
        </h4>


    </div>

    {{-- <div id="modalBanner" class="modal">
        <form action="" method="POST" class="modal-content">
            @csrf

            <span class="close">&times;</span>
            <h2>Seleccionar imagen</h2>
            <hr>
            <hr style="border:1px solid rgba(130,230,130,0.5);">
            <div id="selectImage" class="selectImage-content">
                <img id="imgPreview" src="" alt="new-Banner">

                {<input type="file" id="fileInput" accept=".jpg,.jpeg,.png">
                <input type="button" class="btn btn-secondary"  value="Subir imagen">

                {{-- <label for="tituloBanner">Titulo</label>
                <input type="text" name="tituloBanner" placeholder="Titulo">
            </div>
            <div class="saveBanner">
                <input type="button" class="btn btn-success" value="cambiar imagen">
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>

        </form>
    </div> --}}

    <div class="panel-body">
         <table id="empresas" class="table display responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                    <th data-priority="1">{{ trans('empresas.th_slider') }}</th>
                    <th>{{ trans('empresas.th_titulo_es') }}</th>
                    <th>{{ trans('empresas.th_titulo_en') }}</th>
                     <th>{{ trans('empresas.th_descripcion_es') }}</th>
                    <th>{{ trans('empresas.th_descripcion_en') }}</th>
                    <th>{{ trans('empresas.th_estatus') }}</th>
                    <th data-priority="2">{{ trans('empresas.th_accion') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($find as $data)
                        <tr>
                            <td><img width="35px" src="{{ asset($data->getImagen()) }}" alt=""></td>
                            <td>{{ $data->getTituloEs() }}</td>
                            <td>{{ $data->getTituloEn() }}</td>
                            <td>{{ $data->getDescripcionEs() }}</td>
                            <td>{{ $data->getDescripcionEn() }}</td>
                            <td>{{ $data->getEstatus() }}</td>
                            <td class="link-botones-catalogo">

                            <a href="{{ route('sliderEdit', ['id' => $data->getID()]) }}" title="{{ trans('empresas.th_editar') }}"><i class="far fa-edit"></i></a>
                            <a href="{{ route('sliderDelete', ['id' => $data->getID()]) }}" title="{{ trans('empresas.th_borrar') }}"><i class="far fa-trash-alt"></i></a>

                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>
    </div>
</div>
@stop
@section('js')
<script>

  $(document).ready( function () {

    $('#empresas').DataTable({
            responsive: true,
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: -1 }
            ],
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]], //
            searching: true,
            order: [0, 'asc'],
            dom: "Blfrtip",
            displayLength: 10,
            pageLength: 10,
            language: {
                @if(App::getLocale() == 'es')
                "url":"/lang/es/dataTable/datatables",
                @endif
            },


        });
   });
</script>
{{-- <script>
    document.addEventListener("DOMContentLoaded", function() {
    var modal = document.getElementById("modalBanner");
    var btn = document.getElementById("addBanner");
    var span = document.getElementsByClassName("close")[0];
    let addIMG = document.getElementById("selectImage");
    var fileInput = document.getElementById("fileInput");

    btn.onclick = function() {
        modal.style.display = "flex";
    }
    span.onclick = function() {
        modal.style.display = "none";
    }
    addIMG.onclick = function() {
        fileInput.click();
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    fileInput.onchange = function(event) {
        var file = event.target.files[0];
        if (file && (file.type == "image/jpeg" || file.type == "image/png")) {
            alert("File selected: " + file.name);
            modal.style.display = "none";
        } else {
            alert("Please select a valid image file (jpg, jpeg, png).");
            fileInput.value = ""; // Clear the input
        }
    }
});
</script> --}}
@stop