@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatablesb5/colReorder.bootstrap5.min.css') }}">

<style>
    /* Estilo para el resaltado de búsqueda (Mark.js) */
    mark {
        padding: 0.2em;
        background-color: #fff8dd;
        color: #ff3e1d;
        font-weight: bold;
        border-radius: 4px;
    }

    /* Ajuste para que los botones de DataTables se vean alineados */
    div.dt-buttons {
        gap: 0.5rem;
        display: flex;
        flex-wrap: wrap;
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 d-flex flex-row align-items-center justify-content-between">
            <h5 class="m-0 fw-bold text-primary">
                <i class="fas fa-puzzle-piece me-2"></i>Listado de Plugins
            </h5>

            <button type="button" class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#pluginnew">
                <i class="fas fa-plus me-2"></i> Nuevo Plugin
            </button>
        </div>

        <div class="card-body">

            @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                <strong><i class="fas fa-exclamation-triangle me-2"></i> Por favor revisa los errores:</strong>
                <ul class="mb-0 mt-2">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle" id="table_id" width="100%">
                    <thead class="table-light">
                        <tr>
                            <th width="5%">ID</th>
                            <th width="20%">Nombre</th>
                            <th width="25%">URL</th>
                            <th>Descripción</th>
                            <th width="10%" class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($plugins as $plugin)
                        <tr>
                            <td><span class="badge bg-label-secondary text-secondary">#{{ $plugin->id }}</span></td>
                            <td class="fw-bold text-dark">{{ $plugin->nombre }}</td>
                            <td>
                                <a href="{{ $plugin->url }}" target="_blank" class="btn btn-sm btn-outline-info text-truncate" style="max-width: 200px;">
                                    <i class="fas fa-external-link-alt me-1"></i> Ir al sitio
                                </a>
                            </td>
                            <td><small class="text-muted">{{ Str::limit($plugin->descripcion, 50) }}</small></td>
                            <td class="text-center">
                                <form action="{{ route('plugins.destroy', ['plugin' => $plugin->id]) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger border-0"
                                        data-bs-toggle="tooltip"
                                        title="Eliminar Plugin"
                                        onclick="return confirm('¿Está seguro de eliminar el plugin {{ $plugin->nombre }}?')">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="pluginnew" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold text-white"><i class="fas fa-plus-circle me-2"></i>Nuevo Plugin / Widget</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form action="{{ route('plugins.store') }}" method="POST">
                @csrf
                <div class="modal-body">

                    <div class="mb-3">
                        <label for="nombre" class="form-label fw-bold">Nombre del Plugin <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-tag"></i></span>
                            <input type="text" class="form-control @error('nombre') is-invalid @enderror" id="nombre" name="nombre" value="{{ old('nombre') }}" placeholder="Ej: Chat Widget" required>
                        </div>
                        @error('nombre') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="url" class="form-label fw-bold">URL del Plugin <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-link"></i></span>
                            <input type="url" class="form-control @error('url') is-invalid @enderror" id="url" name="url" value="{{ old('url') }}" placeholder="https://..." required>
                        </div>
                        @error('url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label for="descripcion" class="form-label fw-bold">Descripción</label>
                        <textarea class="form-control @error('descripcion') is-invalid @enderror" id="descripcion" name="descripcion" rows="4" placeholder="Breve descripción de la funcionalidad...">{{ old('descripcion') }}</textarea>
                        @error('descripcion') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i> Guardar Plugin</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('plugins/datatablesb5/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.js') }}"></script>

<script src="{{ asset('plugins/datatablesb5/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/buttons.html5.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/buttons.print.min.js') }}"></script>

<script src="{{ asset('plugins/datatablesb5/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/vfs_fonts.js') }}"></script>

<script src="{{ asset('plugins/datatablesb5/dataTables.colReorder.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/jquery.mark.min.js') }}"></script>
<script src="{{ asset('plugins/datatablesb5/dataTables.searchHighlight.min.js') }}"></script>

<script>
    $(document).ready(function() {
        var table = $('#table_id').DataTable({
            // Configuración del layout BS5
            dom: "<'row mb-3'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

            processing: true,
            colReorder: true,
            stateSave: true,
            stateDuration: 60 * 60 * 24,

            buttons: [{
                    extend: 'collection',
                    text: '<i class="fas fa-file-export me-1"></i> Exportar',
                    className: 'btn btn-outline-secondary btn-sm dropdown-toggle',
                    buttons: [{
                            extend: 'copy',
                            text: '<i class="fas fa-copy"></i> Copiar',
                            className: 'dropdown-item'
                        },
                        {
                            extend: 'csv',
                            text: '<i class="fas fa-file-csv"></i> CSV',
                            className: 'dropdown-item'
                        },
                        {
                            extend: 'excel',
                            text: '<i class="fas fa-file-excel"></i> Excel',
                            className: 'dropdown-item'
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="fas fa-file-pdf"></i> PDF',
                            className: 'dropdown-item'
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print"></i> Imprimir',
                            className: 'dropdown-item'
                        }
                    ]
                },
                {
                    extend: 'colvis',
                    text: '<i class="fas fa-columns me-1"></i> Columnas',
                    className: 'btn btn-outline-secondary btn-sm',
                    columns: ':not(:last-child)'
                },
                {
                    extend: 'pageLength',
                    className: 'btn btn-outline-secondary btn-sm'
                }
            ],



            drawCallback: function(settings) {
                var api = this.api();
                $(api.table().body()).unmark();

                var searchVal = api.search();
                if (searchVal) {
                    $(api.table().body()).mark(searchVal, {
                        "caseSensitive": false,
                        "className": "highlight"
                    });
                }
            }
        });

        // Inicializar tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
@endsection