@extends('layouts.app')

@section('title', 'Communication Templates')

@section('content')
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item">Terms & Templates</li>
            <li class="breadcrumb-item active" aria-current="page">Communication Templates</li>
        </ol>
    </nav>

    <!-- Main Table Card -->
    <div class="card mb-3" id="templatesTable" data-list='{"valueNames":["template_name","template_type","subject","description","is_active","created_at"],"page":10,"pagination":true}'>
        <div class="card-header">
            <div class="row flex-between-center">
                <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                    <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Communication Templates</h5>
                </div>
                <div class="col-8 col-sm-auto text-end ps-2">
                    <div class="d-none" id="table-templates-actions">
                        <div class="d-flex">
                            <select class="form-select form-select-sm" aria-label="Bulk actions">
                                <option selected="">Bulk actions</option>
                                <option value="activate">Activate</option>
                                <option value="deactivate">Deactivate</option>
                                <option value="delete">Delete</option>
                                <option value="export">Export Selected</option>
                            </select>
                            <button class="btn btn-falcon-default btn-sm ms-2" type="button">Apply</button>
                        </div>
                    </div>
                    <div id="table-templates-replace-element">
                        <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#templateModal">
                            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">New</span>
                        </button>
                        <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#templateFilters">
                            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Filter</span>
                        </button>
                        <button class="btn btn-falcon-default btn-sm" type="button" id="exportTemplates">
                            <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
                            <span class="d-none d-sm-inline-block ms-1">Export</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Advanced Filters (Collapsible) -->
        <div class="collapse" id="templateFilters">
            <div class="card-body border-top fs-10">
                <div class="row g-3">
                    <div class="col-6 col-md-4 col-lg-3">
                        <select class="form-select form-select-sm" id="typeFilter">
                            <option value="">All Types</option>
                            <option value="Email">Email</option>
                            <option value="SMS">SMS</option>
                            <option value="WhatsApp">WhatsApp</option>
                            <option value="Letter">Letter</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <select class="form-select form-select-sm" id="statusFilter">
                            <option value="">All Status</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <input class="form-control form-control-sm datetimepicker" id="createdDateFilter" type="text" placeholder="Created Date" />
                    </div>
                    <div class="col-6 col-md-4 col-lg-3">
                        <button class="btn btn-falcon-default btn-sm me-2" type="button" id="applyTemplateFilters">Apply</button>
                        <button class="btn btn-falcon-default btn-sm" type="button" id="clearTemplateFilters">Clear</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive scrollbar">
                <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
                    <thead class="bg-200">
                        <tr>
                            <th>
                                <div class="form-check fs-9 mb-0 d-flex align-items-center">
                                    <input class="form-check-input" id="checkbox-bulk-templates-select" type="checkbox"
                                           data-bulk-select='{"body":"table-templates-body","actions":"table-templates-actions","replacedElement":"table-templates-replace-element"}' />
                                </div>
                            </th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="template_name">Template Name</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="template_type">Type</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="subject">Subject</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="description">Description</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="variables">Variables</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="is_active">Status</th>
                            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="created_at">Created</th>
                            <th class="align-middle no-sort"></th>
                        </tr>
                    </thead>
                    <tbody class="list" id="table-templates-body">
                        <!-- Sample Data Rows -->
                        <tr class="btn-reveal-trigger">
                            <td class="align-middle py-2" style="width: 28px;">
                                <div class="form-check fs-9 mb-0 d-flex align-items-center">
                                    <input class="form-check-input" type="checkbox" id="template-0" data-bulk-select-row="data-bulk-select-row" />
                                </div>
                            </td>
                            <td class="template_name align-middle white-space-nowrap py-2">
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-xl me-2">
                                        <div class="avatar-name rounded-circle bg-soft-success text-success"><span>WE</span></div>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mb-0 fs-10">Welcome Email</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="template_type align-middle py-2">
                                <span class="badge rounded-pill badge-subtle-success">Email</span>
                            </td>
                            <td class="subject align-middle py-2">Welcome to SSG Furnishing Solutions</td>
                            <td class="description align-middle py-2">Welcome email for new customers</td>
                            <td class="variables align-middle py-2">
                                <span class="badge rounded-pill badge-subtle-info me-1">customer_name</span>
                                <span class="badge rounded-pill badge-subtle-info">company_name</span>
                            </td>
                            <td class="is_active align-middle py-2">
                                <span class="badge rounded-pill badge-subtle-success">Active</span>
                            </td>
                            <td class="created_at align-middle py-2">{{ now()->format('d/m/Y') }}</td>
                            <td class="align-middle white-space-nowrap py-2 text-end">
                                <div class="dropdown font-sans-serif position-static">
                                    <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button"
                                            id="template-dropdown-0" data-bs-toggle="dropdown" data-boundary="window"
                                            aria-haspopup="true" aria-expanded="false">
                                        <span class="fas fa-ellipsis-h fs-10"></span>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end border py-0" aria-labelledby="template-dropdown-0">
                                        <div class="py-2">
                                            <a class="dropdown-item" href="#!" onclick="editTemplate(0)">
                                                <i class="fas fa-edit me-2"></i>Edit
                                            </a>
                                            <a class="dropdown-item" href="#!" onclick="viewTemplate(0)">
                                                <i class="fas fa-eye me-2"></i>View Details
                                            </a>
                                            <a class="dropdown-item" href="#!" onclick="previewTemplate(0)">
                                                <i class="fas fa-search me-2"></i>Preview
                                            </a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item text-warning" href="#!" onclick="toggleTemplateStatus(0)">
                                                <i class="fas fa-toggle-on me-2"></i>Toggle Status
                                            </a>
                                            <a class="dropdown-item text-danger" href="#!" onclick="deleteTemplate(0)">
                                                <i class="fas fa-trash me-2"></i>Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        <div class="card-footer d-flex align-items-center justify-content-center">
            <button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev">
                <span class="fas fa-chevron-left"></span>
            </button>
            <ul class="pagination mb-0"></ul>
            <button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next">
                <span class="fas fa-chevron-right"></span>
            </button>
        </div>
    </div>

    <!-- Template Modal -->
    <div class="modal fade" id="templateModal" tabindex="-1" aria-labelledby="templateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="templateModalLabel">
                        <i class="fas fa-envelope me-2"></i>Add New Communication Template
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="templateForm">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="template_name" class="form-label">Template Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="template_name" name="template_name" required>
                                    <div class="form-text">Descriptive name for the template</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="template_type" class="form-label">Template Type <span class="text-danger">*</span></label>
                                    <select class="form-select" id="template_type" name="template_type" required>
                                        <option value="">Select Type</option>
                                        <option value="Email">Email</option>
                                        <option value="SMS">SMS</option>
                                        <option value="WhatsApp">WhatsApp</option>
                                        <option value="Letter">Letter</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3" id="subjectGroup">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control" id="subject" name="subject">
                                    <div class="form-text">Subject line (for Email and Letter templates)</div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <input type="text" class="form-control" id="description" name="description" maxlength="500">
                            <div class="form-text">Brief description of the template</div>
                        </div>

                        <div class="mb-3">
                            <label for="content" class="form-label">Content <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="content" name="content" rows="8" required
                                      placeholder="Enter the template content here. Use {{variable_name}} for dynamic content..."></textarea>
                            <div class="form-text">Template content with variables in {{variable_name}} format</div>
                        </div>

                        <div class="mb-3">
                            <label for="variables" class="form-label">Available Variables</label>
                            <input type="text" class="form-control" id="variables" name="variables"
                                   placeholder="{{customer_name}}, {{order_number}}, {{amount}}, {{date}}">
                            <div class="form-text">Comma-separated list of available variables</div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                                        <label class="form-check-label" for="is_active">Active</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Preview Section -->
                        <div class="mt-4">
                            <h6 class="mb-3"><i class="fas fa-eye me-2"></i>Preview</h6>
                            <div class="border rounded p-3 bg-light">
                                <div id="previewSubject" class="fw-bold mb-2" style="display: none;">
                                    <strong>Subject:</strong> <span id="previewSubjectText">Sample Subject</span>
                                </div>
                                <div id="previewContent">
                                    <strong>Content:</strong>
                                    <div id="previewContentText" class="mt-2">Enter content to see preview...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Cancel
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Template
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendors/list.js/list.min.js') }}"></script>
    <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize List.js for table functionality
            var templatesList = new List('templatesTable', {
                valueNames: ['template_name', 'template_type', 'subject', 'description', 'variables', 'is_active', 'created_at'],
                page: 10,
                pagination: true
            });

            // Initialize date picker
            flatpickr('#createdDateFilter', {
                dateFormat: 'd/m/Y',
                allowInput: true
            });

            // Template type change handler
            document.getElementById('template_type').addEventListener('change', function() {
                var subjectGroup = document.getElementById('subjectGroup');
                var previewSubject = document.getElementById('previewSubject');

                if (this.value === 'SMS' || this.value === 'WhatsApp') {
                    subjectGroup.style.display = 'none';
                    previewSubject.style.display = 'none';
                } else {
                    subjectGroup.style.display = 'block';
                    previewSubject.style.display = 'block';
                }
                updatePreview();
            });

            // Preview update functionality
            function updatePreview() {
                var templateType = document.getElementById('template_type').value;
                var subject = document.getElementById('subject').value;
                var content = document.getElementById('content').value;

                var previewSubjectText = document.getElementById('previewSubjectText');
                var previewContentText = document.getElementById('previewContentText');

                if (templateType === 'SMS' || templateType === 'WhatsApp') {
                    previewSubjectText.textContent = '';
                } else {
                    previewSubjectText.textContent = subject || 'Sample Subject';
                }

                previewContentText.textContent = content || 'Enter content to see preview...';
            }

            // Add event listeners for preview update
            ['subject', 'content'].forEach(function(id) {
                document.getElementById(id).addEventListener('input', updatePreview);
            });

            // Filter functionality
            document.getElementById('applyTemplateFilters').addEventListener('click', function() {
                var typeFilter = document.getElementById('typeFilter').value;
                var statusFilter = document.getElementById('statusFilter').value;
                var dateFilter = document.getElementById('createdDateFilter').value;

                templatesList.filter(function(item) {
                    var matchType = !typeFilter || item.values().template_type.includes(typeFilter);
                    var matchStatus = !statusFilter || item.values().is_active.includes(statusFilter);
                    return matchType && matchStatus;
                });
            });

            // Clear filters
            document.getElementById('clearTemplateFilters').addEventListener('click', function() {
                document.getElementById('typeFilter').value = '';
                document.getElementById('statusFilter').value = '';
                document.getElementById('createdDateFilter').value = '';
                templatesList.filter();
            });

            // Export functionality
            document.getElementById('exportTemplates').addEventListener('click', function() {
                alert('Export functionality will be implemented');
            });

            // Form submission
            document.getElementById('templateForm').addEventListener('submit', function(e) {
                e.preventDefault();

                var formData = new FormData(this);

                console.log('Form data:', Object.fromEntries(formData));

                var modal = bootstrap.Modal.getInstance(document.getElementById('templateModal'));
                modal.hide();
                this.reset();

                showAlert('Communication Template added successfully!', 'success');
                loadTemplateData();
            });

            // Initialize preview
            updatePreview();
        });

        function editTemplate(id) {
            console.log('Edit template:', id);
        }

        function viewTemplate(id) {
            console.log('View template:', id);
        }

        function previewTemplate(id) {
            console.log('Preview template:', id);
            // Show preview modal or window
        }

        function toggleTemplateStatus(id) {
            console.log('Toggle status for template:', id);
        }

        function deleteTemplate(id) {
            if (confirm('Are you sure you want to delete this communication template?')) {
                console.log('Delete template:', id);
            }
        }

        function loadTemplateData() {
            console.log('Loading template data...');
        }

        function showAlert(message, type) {
            alert(message);
        }
    </script>
@endpush