@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>Text SMS Content Template</h3>
        <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
            <div class="search_box">
                <input type="text" class="form-control" placeholder="Search SMS templates..." id="search-input">
                <button class="btn btn_search" id="search-btn">
                    <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                </button>
                <button class="btn btn-clear-search" id="clear-search" style="display: none; margin-left: 5px;">
                    <i class="fas fa-times"></i> Clear
                </button>
                <div class="search-loading" id="search-loading" style="display: none; margin-left: 10px;">
                    <i class="fas fa-spinner fa-spin text-primary"></i>
                    <small class="text-muted ms-1">Searching...</small>
                </div>
            </div>
            <div class="contact_btns">
                @if($permission['create'] ?? true)
                <a href="{{ route('sms-templates.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/template.svg') }}"> Add Template
                </a>                
                @endif
                @if($permission['destroy'] ?? true)
                <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected">
                    <img src="{{ asset('images/delete_multiple.svg') }}"> Delete Multiple
                </a>                
                @endif
            </div>
        </div>
    </div>

    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="sms-templates-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all" title="Select All Templates">
                        </th>
                        <th>Name</th>
                        <th>SMS Content</th>
                        <th>Event Key</th>
                        <th>Language</th>
                        <th>Is Enabled?</th>
                        @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                        <th>Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody id="sms-templates-tbody">
                    @if(isset($data) && $data->count() > 0)
                        @foreach($data as $template)
                        <tr class="sms-template-row" data-template-id="{{ $template->id }}">
                            <td width="30">
                                <input type="checkbox" class="form-check-input template-checkbox" value="{{ $template->id }}">
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <strong>
                                        @if($permission['show'] ?? true)
                                            <a href="{{ route('sms-templates.show', $template->id) }}" class="text-decoration-none">
                                                {{ $template->title }}
                                            </a>
                                        @else
                                            {{ $template->title }}
                                        @endif
                                    </strong>
                                </div>
                            </td>
                            <td>
                                <span class="text-muted">{{ $template->truncated_body }}</span>
                            </td>
                            <td>
                                @if($template->event_key)
                                    <span class="badge bg-info">{{ $template->event_key }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                @if($template->language)
                                    <span class="badge bg-success">{{ $template->language->name }}</span>
                                    @if($template->language->native_name && $template->language->native_name !== $template->language->name)
                                        <div class="text-muted small">{{ $template->language->native_name }}</div>
                                    @endif
                                @else
                                    <span class="badge bg-secondary">Not Set</span>
                                @endif
                            </td>
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input status-toggle" 
                                           type="checkbox" 
                                           role="switch" 
                                           data-id="{{ $template->id }}"
                                           {{ $template->is_enabled ? 'checked' : '' }}>
                                    <label class="form-check-label"></label>
                                </div>
                            </td>
                            @if($permission['edit'] || $permission['destroy'] || $permission['show'])                      
                            <td class="text-right">                      
                                @if($permission['show'] ?? true)
                                <a href="{{ route('sms-templates.show', $template->id) }}" class="me-2" title="View Template">
                                    <img src="{{ asset('images/view.svg') }}">
                                </a>
                                @endif
                                @if($permission['edit'] ?? true)
                                <a href="{{ route('sms-templates.edit', $template->id) }}" class="me-4" data-toggle="tooltip" title="Edit" data-original-title="Edit">
                                    <img src="{{ asset('images/edit.svg') }}">
                                </a>
                                @endif
                                @if($permission['destroy'] ?? true)
                                <a class="me-4" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                                   data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$template->id}}').submit();" 
                                   data-original-title="Delete">
                                    <img src="{{ asset('images/delete_black.svg') }}">
                                </a>
                                {!! html()->form('DELETE', route('sms-templates.destroy', $template->id))->attributes([
                                    'style' => 'display:inline',
                                    'id'    => 'delete-form-' . $template->id  
                                ])->open() !!}
                                {!! html()->form()->close() !!}
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-sms fa-2x mb-2"></i>
                                    <p>No SMS templates found</p>                                    
                                </div>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        @if(isset($data) && method_exists($data, 'links') && $data->count() > 0)
        <div class="pagination pagination-rounded justify-content-end mb-0 mt-2">
            {{ $data->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
$(document).ready(function() {
    // Select all functionality
    $('#select-all').change(function() {
        $('.template-checkbox').prop('checked', $(this).is(':checked'));
        updateDeleteButtonState();
    });

    $('.template-checkbox').change(function() {
        updateDeleteButtonState();
        
        // Update select all checkbox state
        const totalCheckboxes = $('.template-checkbox').length;
        const checkedCheckboxes = $('.template-checkbox:checked').length;
        $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
    });

    function updateDeleteButtonState() {
        const checkedBoxes = $('.template-checkbox:checked').length;
        $('#delete-selected').prop('disabled', checkedBoxes === 0);
        
        if (checkedBoxes > 0) {
            $('#delete-selected').removeClass('btn-secondary').addClass('btn-danger');
        } else {
            $('#delete-selected').removeClass('btn-danger').addClass('btn-secondary');
        }
    }

    // Bulk delete functionality
    $('#delete-selected').click(function() {
        const selectedIds = [];
        $('.template-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {            
            showAlert('Please select at least one template to delete.', 'warning');
            return;
        }

        // Use SweetAlert2 confirmation like single delete
        Swal.fire({
            title: 'Are You Sure?',
            text: `This action can not be undone. Do you want to continue deleting ${selectedIds.length} selected template(s)?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Sure!',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("sms-templates.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            location.reload();
                        } else {
                            showAlert(response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        showAlert('Error deleting templates. Please try again.', 'error');
                    }
                });
            }
        });
    });

    // Status toggle functionality
    $('.status-toggle').change(function() {
        const templateId = $(this).data('id');
        const isEnabled = $(this).is(':checked');
        
        $.ajax({
            url: `{{ route('sms-templates.toggle-status', '') }}/${templateId}`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status) {
                    showAlert(response.message, 'success');
                } else {
                    // Revert checkbox state on error
                    $('.status-toggle[data-id="' + templateId + '"]').prop('checked', !isEnabled);
                    showAlert('Error: ' + response.message, 'error');
                }
            },
            error: function(xhr) {
                // Revert checkbox state on error
                $('.status-toggle[data-id="' + templateId + '"]').prop('checked', !isEnabled);
                showAlert('Error updating template status. Please try again.', 'error');
            }
        });
    });

    // Search functionality
    let searchTimeout;
    $('#search-input').on('input', function() {
        clearTimeout(searchTimeout);
        const query = $(this).val().trim();
        
        if (query.length >= 2 || query.length === 0) {
            searchTimeout = setTimeout(function() {
                performSearch(query);
            }, 500);
        }
    });

    $('#search-btn').click(function() {
        const query = $('#search-input').val().trim();
        performSearch(query);
    });

    $('#clear-search').click(function() {
        $('#search-input').val('');
        $(this).hide();
        location.reload();
    });

    function performSearch(query) {
        if (query.length === 0) {
            $('#clear-search').hide();
            return;
        }

        $('#search-loading').show();
        $('#clear-search').show();

        $.ajax({
            url: '{{ route("sms-templates.search") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                $('#search-loading').hide();
                updateTable(response.data);
            },
            error: function() {
                $('#search-loading').hide();
                showAlert('Search failed. Please try again.', 'error');
            }
        });
    }

    function updateTable(templates) {
        const tbody = $('#sms-templates-tbody');
        tbody.empty();

        if (!templates || templates.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No templates found matching your search</p>
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        templates.forEach(function(template) {
            const eventKeyBadge = template.event_key ? 
                `<span class="badge bg-info">${template.event_key}</span>` : 
                '<span class="text-muted">-</span>';
                
            const statusToggle = template.is_enabled ? 'checked' : '';
            
            const row = `
                <tr class="sms-template-row" data-template-id="${template.id}">
                    <td width="30">
                        <input type="checkbox" class="form-check-input template-checkbox" value="${template.id}">
                    </td>
                    <td>
                        <div class="d-flex flex-column">
                            <strong>
                                @if($permission['show'] ?? true)
                                <a href="{{ route('sms-templates.show', '') }}/${template.id}" class="text-decoration-none">
                                    ${template.title}
                                </a>
                                @else
                                ${template.title}
                                @endif
                            </strong>
                        </div>
                    </td>
                    <td>
                        <span class="text-muted">${template.truncated_body || template.body.substring(0, 50) + '...'}</span>
                    </td>
                    <td>${eventKeyBadge}</td>
                    <td>
                        <div class="form-check form-switch">
                            <input class="form-check-input status-toggle" 
                                   type="checkbox" 
                                   role="switch" 
                                   data-id="${template.id}"
                                   ${statusToggle}>
                            <label class="form-check-label"></label>
                        </div>
                    </td>
                    <td class="text-right">
                        @if($permission['show'] ?? true)
                        <a href="{{ route('sms-templates.show', '') }}/${template.id}" class="me-2" title="View Template">
                            <img src="{{ asset('images/view.svg') }}">
                        </a>
                        @endif
                        @if($permission['edit'] ?? true)
                        <a href="{{ route('sms-templates.edit', '') }}/${template.id}" class="me-4" data-toggle="tooltip" title="Edit">
                            <img src="{{ asset('images/edit.svg') }}">
                        </a>
                        @endif
                        @if($permission['destroy'] ?? true)
                        <a class="me-4" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                                   data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-${template.id}').submit();" 
                                   data-original-title="Delete">
                            <img src="{{ asset('images/delete_black.svg') }}">
                        </a>
                        <form id="delete-form-${template.id}" action="{{ route('sms-templates.destroy', '') }}/${template.id}" method="POST" style="display:inline">
                            @csrf
                            @method('DELETE')
                        </form>
                        @endif
                    </td>
                </tr>
            `;
            tbody.append(row);
        });

        // Reinitialize event handlers
        $('.template-checkbox').change(function() {
            updateDeleteButtonState();
        });
        
        // Reinitialize status toggle handlers
        $('.status-toggle').change(function() {
            const templateId = $(this).data('id');
            const isEnabled = $(this).is(':checked');
            
            $.ajax({
                url: `{{ route('sms-templates.toggle-status', '') }}/${templateId}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status) {
                        showAlert(response.message, 'success');
                    } else {
                        $('.status-toggle[data-id="' + templateId + '"]').prop('checked', !isEnabled);
                        showAlert('Error: ' + response.message, 'error');
                    }
                },
                error: function(xhr) {
                    $('.status-toggle[data-id="' + templateId + '"]').prop('checked', !isEnabled);
                    showAlert('Error updating template status. Please try again.', 'error');
                }
            });
        });
    }

    // Helper function to show alerts
    function showAlert(message, type) {
        if (type === 'success') {
            showNotification('success', message);
        } else if (type === 'error') {
            showNotification('error', message);
        } else if (type === 'warning') {
            showNotification('warning', message);
        } else {
            showNotification('info', message);
        }
    }

    // Initialize delete button state
    updateDeleteButtonState();
});
</script>
@endpush