@extends('admin::layouts.app')

@section('title', $business->name . ' — Templates — BizWap Admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <a href="{{ route('admin.businesses.index') }}" class="text-muted small text-decoration-none">
            <i class="bi bi-arrow-left me-1"></i>Back to Businesses
        </a>
        <h4 class="fw-bold mb-0 mt-1">{{ $business->name }} — Templates</h4>
        <p class="text-muted small mb-0">WhatsApp message templates for this business.</p>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
        <i class="bi bi-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 border-0 shadow-sm" role="alert">
        <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="templates-table" class="table table-hover align-middle mb-0" style="width:100%">
                <thead class="table-light">
                    <tr>
                        <th>Template</th>
                        <th>Category</th>
                        <th>Language</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
$('#templates-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: '{{ route('admin.businesses.templates.data', $business) }}',
        type: 'GET',
    },
    columns: [
        {
            data: 'name',
            render: function (data, type, row) {
                return '<a href="{{ url('admin/businesses/' . $business->id . '/templates') }}/' + row.id + '" class="text-decoration-none fw-medium">' + data + '</a>';
            }
        },
        {
            data: 'category',
            render: function (data) {
                return '<span class="badge bg-secondary-subtle text-secondary-emphasis">' + data + '</span>';
            }
        },
        { data: 'language' },
        {
            data: 'status',
            render: function (data) {
                const map = {
                    DRAFT: 'secondary', PENDING: 'warning', APPROVED: 'success',
                    REJECTED: 'danger', PAUSED: 'info', DISABLED: 'dark'
                };
                const color = map[data] || 'secondary';
                return '<span class="badge bg-' + color + '-subtle text-' + color + '-emphasis text-uppercase">' + data + '</span>';
            }
        },
        {
            data: 'created_at',
            render: function (data) {
                const d = new Date(data);
                return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
            }
        },
        {
            data: 'id',
            orderable: false,
            searchable: false,
            className: 'text-end',
            render: function (data) {
                return '<a href="{{ url('admin/businesses/' . $business->id . '/templates') }}/' + data + '" class="btn btn-sm btn-outline-secondary">Review</a>';
            }
        },
    ],
    order: [[4, 'desc']],
    pageLength: 15,
    language: {
        processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>',
        emptyTable: 'No templates for this business.',
        zeroRecords: 'No matching templates found.',
    },
    dom: "<'row align-items-center px-3 pt-3'<'col'l><'col-auto'f>>rt<'row align-items-center px-3 pb-3'<'col'i><'col-auto'p>>",
});
</script>
@endpush
@endsection