@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Plantillas ML</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item active">Plantillas</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">
                        <i class="ri-file-copy-2-line text-muted me-1"></i> Plantillas de Respuesta
                    </h5>
                    <div class="flex-shrink-0">
                        <a href="{{ route('admin.meli.templates.create') }}" class="btn btn-sm btn-primary">
                            <i class="ri-add-line me-1"></i> Nueva Plantilla
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped align-middle table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="100">Código</th>
                                <th width="80">Tipo</th>
                                <th>Descripción</th>
                                <th>Título</th>
                                <th class="text-center" width="90">Estado</th>
                                <th width="120">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($templates as $tpl)
                            <tr>
                                <td><span class="font-monospace fw-medium">{{ $tpl->cod_planti }}</span></td>
                                <td>
                                    @switch($tpl->tip_planti)
                                        @case('RESP')
                                            <span class="badge bg-info-subtle text-info">RESP</span>
                                            @break
                                        @case('MAIL')
                                            <span class="badge bg-primary-subtle text-primary">MAIL</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary-subtle text-secondary">{{ $tpl->tip_planti }}</span>
                                    @endswitch
                                </td>
                                <td>{{ $tpl->des_planti }}</td>
                                <td>{{ $tpl->tit_planti ?? '-' }}</td>
                                <td class="text-center">
                                    @if($tpl->habilitada)
                                        <span class="badge bg-success">Activa</span>
                                    @else
                                        <span class="badge bg-secondary">Inactiva</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <a href="{{ route('admin.meli.templates.edit', $tpl->id) }}" class="btn btn-sm btn-warning" title="Editar">
                                            <i class="ri-pencil-line"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" title="Eliminar"
                                                onclick="deleteTemplate({{ $tpl->id }})">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6">
                                    <div class="text-center py-4">
                                        <i class="ri-file-copy-2-line d-block fs-1 text-muted mb-2"></i>
                                        <h6 class="text-muted">No hay plantillas</h6>
                                        <a href="{{ route('admin.meli.templates.create') }}" class="btn btn-sm btn-primary mt-2">
                                            <i class="ri-add-line"></i> Crear Primera Plantilla
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($templates->hasPages())
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <div class="text-muted small">
                            Mostrando {{ $templates->firstItem() }} a {{ $templates->lastItem() }} de {{ $templates->total() }}
                        </div>
                        <div>{{ $templates->links() }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function deleteTemplate(id) {
    Swal.fire({
        title: '¿Eliminar plantilla?',
        text: 'Esta acción no se puede deshacer.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`{{ url('admin/meli/templates') }}/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                }
            }).then(response => response.json())
            .then(data => {
                if (data.status) {
                    Swal.fire('Eliminada', data.message, 'success').then(() => location.reload());
                } else {
                    Swal.fire('Error', data.message || 'No se pudo eliminar', 'error');
                }
            }).catch(() => {
                Swal.fire('Error', 'Error al comunicarse con el servidor', 'error');
            });
        }
    });
}
</script>
@endpush