@extends('layouts.app')

@section('title', 'Template Pesan WhatsApp')

@section('content')
<div class="container-fluid">
    <div class="template-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fab fa-whatsapp text-success me-2"></i>
                    Template Pesan WhatsApp
                </h1>
                <p class="text-muted small mb-0">Kelola template pesan untuk WhatsApp automation</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('pesan-templates.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i>
                    Tambah Template
                </a>
            </div>
        </div>
    </div>

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

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list me-2"></i>Daftar Template Pesan
            </h6>
        </div>
        <div class="card-body">
            @if($templates->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th width="5%" class="text-center">#</th>
                                <th width="20%">Nama Template</th>
                                <th width="15%">Slug</th>
                                <th width="25%">Deskripsi</th>
                                <th width="20%">Preview Konten</th>
                                <th width="10%" class="text-center">Status</th>
                                <th width="5%" class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($templates as $index => $template)
                                <tr>
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>
                                        <div class="template-info">
                                            <strong>{{ $template->pesan_template }}</strong>
                                            <br>
                                            <small class="text-muted">
                                                <i class="fas fa-clock me-1"></i>
                                                {{ $template->updated_at->format('d M Y, H:i') }}
                                            </small>
                                        </div>
                                    </td>
                                    <td>
                                        <code class="bg-light p-1 rounded">{{ $template->slug }}</code>
                                    </td>
                                    <td>
                                        <div class="description-info">
                                            {{ $template->desk_template ?: '-' }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content-preview">
                                            <p class="mb-1 small">{{ $template->konten_preview }}</p>
                                            <small class="text-muted">
                                                <i class="fas fa-font me-1"></i>
                                                {{ $template->jumlah_karakter }} karakter
                                            </small>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge {{ $template->status_badge_class }}">
                                            {{ $template->status_aktif }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="fas fa-cog"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('pesan-templates.show', $template) }}">
                                                        <i class="fas fa-eye me-2"></i>Lihat Detail
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('pesan-templates.edit', $template) }}">
                                                        <i class="fas fa-edit me-2"></i>Edit
                                                    </a>
                                                </li>
                                                <li>
                                                    <form action="{{ route('pesan-templates.duplicate', $template) }}" method="POST" style="display: inline;">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-copy me-2"></i>Duplikasi
                                                        </button>
                                                    </form>
                                                </li>
                                                <li>
                                                    <form action="{{ route('pesan-templates.toggle-status', $template) }}" method="POST" style="display: inline;">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">
                                                            <i class="fas fa-toggle-{{ $template->aktif ? 'off' : 'on' }} me-2"></i>
                                                            {{ $template->aktif ? 'Nonaktifkan' : 'Aktifkan' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <!-- No Data State -->
                <div class="text-center py-5">
                    <i class="fab fa-whatsapp fa-4x text-success mb-4"></i>
                    <h4 class="text-muted mb-3">Belum Ada Template Pesan</h4>
                    <p class="text-muted mb-4">Silakan tambahkan template pesan WhatsApp untuk memulai automation.</p>
                    <a href="{{ route('pesan-templates.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Tambah Template Pertama
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Quick Stats -->
    @if($templates->count() > 0)
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="card stat-card stat-card-success">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-number">{{ $templates->where('aktif', true)->count() }}</div>
                    <div class="stat-label">Template Aktif</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card stat-card-warning">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-pause-circle"></i>
                    </div>
                    <div class="stat-number">{{ $templates->where('aktif', false)->count() }}</div>
                    <div class="stat-label">Template Nonaktif</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card stat-card-info">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="stat-number">{{ $templates->count() }}</div>
                    <div class="stat-label">Total Template</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card stat-card-primary">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-font"></i>
                    </div>
                    <div class="stat-number">{{ number_format($templates->sum('jumlah_karakter')) }}</div>
                    <div class="stat-label">Total Karakter</div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                    Konfirmasi Hapus
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus template <strong id="templateName"></strong>?</p>
                <p class="text-muted small">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(templateId, templateName) {
    document.getElementById('templateName').textContent = templateName;
    document.getElementById('deleteForm').action = `/pesan-templates/${templateId}`;
    
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border-radius: 0.5rem;
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.template-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e3e6f0;
}

.table {
    margin-bottom: 0;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #5a5c69;
    background-color: #f8f9fc;
}

.table td {
    vertical-align: middle;
}

.template-info strong {
    color: #5a5c69;
    font-weight: 600;
}

.content-preview {
    max-height: 60px;
    overflow: hidden;
}

.content-preview p {
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.btn-group .btn {
    border-radius: 0.25rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.alert {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.modal-content {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid #e3e6f0;
}

.modal-footer {
    border-top: 1px solid #e3e6f0;
}

.dropdown-menu {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.dropdown-item:hover {
    background-color: #f8f9fc;
}

code {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
    .template-header h1 {
        font-size: 1.25rem;
    }
    
    .template-header .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .content-preview {
        max-height: 40px;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .dropdown-menu {
        width: 100%;
    }
}

/* Hover effects */
.table tbody tr:hover {
    background-color: #f8f9fc;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Loading state */
.table tbody tr.loading {
    opacity: 0.6;
    pointer-events: none;
}
</style>
@endsection