@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>Site Templates</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 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($routePrefix . '.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 btn-secondary" id="delete-selected" disabled>
                    <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="templates-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all" title="Select All Templates">
                        </th>
                        <th>Template Name</th>
                        <th>Subject/Content</th>
                        <th>Language</th>
                        @if(!session('tenant_id'))
                        <th>Tenant</th>
                        @endif
                        <th>Status</th>
                        @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                        <th>Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $template)
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input template-checkbox" value="{{ $template->id }}" title="Select Template">
                        </td>
                        <td>
                            <div class="template-info">
                                <strong>{{ $template->template_name }}</strong>
                                @if($template->template_type)
                                    <small class="text-muted d-block">{{ $template->templateTypes[$template->template_type]['name'] ?? 'Unknown' }}</small>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="content-preview">
                                @if($template->template_type == 1)
                                    <strong>{{ Str::limit(html_entity_decode(strip_tags($template->subject)), 50) }}</strong>
                                    <div class="text-muted small">{{ Str::limit(strip_tags(html_entity_decode($template->template_content)), 80) }}</div>
                                @elseif($template->template_type == 2)
                                    {{ Str::limit(html_entity_decode(strip_tags($template->template_content)), 100) }}
                                @else
                                    {{ Str::limit(strip_tags(html_entity_decode($template->template_content)), 100) }}
                                @endif
                            </div>
                        </td>
                        <td>
                            @if($template->language)
                                <span class="badge bg-info">{{ $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>
                        @if(!session('tenant_id'))
                        <td>
                            @if($template->tenant_id && $template->tenant_id > 0)
                                <span class="badge bg-info">{{ $template->tenant->name ?? 'Unknown Tenant' }}</span>
                            @else
                                <span class="badge bg-secondary">Global</span>
                            @endif
                        </td>
                        @endif
                        <td>
                            <span class="badge badge-pill badge-soft-{{ $template->statuses[$template->status]['badge'] }} font-size-12">
                                {!! $template->statuses[$template->status]['name'] !!}
                            </span>
                        </td>
                        @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                        <td class="text-right">
                            @if($permission['show'] ?? true)
                            <a href="{{ route($routePrefix . '.show', $template->id) }}" class="me-2" title="View Template">
                                <img src="{{ asset('images/view.svg') }}">
                            </a>
                            @endif
                            
                            @if($permission['edit'] ?? true)
                            <a href="{{ route($routePrefix . '.edit', $template->id) }}" class="me-4" title="Edit Template">
                                <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($routePrefix . '.destroy', $template->id))->attributes([
                                'style' => 'display:inline',
                                'id'    => 'delete-form-' . $template->id  
                            ])->open() !!}
                            {!! html()->form()->close() !!}
                            @endif
                        </td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
            </table>

            @if($data->isEmpty())
            <div class="text-center py-5">
                <div class="empty-state">
                    <img src="{{ asset('images/template.svg') }}" alt="No Templates" class="mb-3" style="width: 64px; opacity: 0.5;">
                    <h5 class="text-muted">No templates found</h5>                    
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@include('admin.components.pagination')

<!-- Delete Multiple Form -->
<form id="delete-multiple-form" method="POST" action="{{ route($routePrefix . '.delete-multiple') }}" style="display: none;">
    @csrf
    <input type="hidden" name="ids" id="selected-ids">
</form>

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<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($routePrefix . ".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');
                    }
                });
            }
        });
    });

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

    $('#search-btn').click(function() {
        var 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();
            location.reload();
            return;
        }

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

        // Simple client-side search instead of AJAX for now
        var rows = $('.service_table tbody tr');
        var visibleCount = 0;

        rows.each(function() {
            var $row = $(this);
            var text = $row.text().toLowerCase();
            
            if (text.includes(query.toLowerCase())) {
                $row.show();
                visibleCount++;
            } else {
                $row.hide();
            }
        });

        $('#search-loading').hide();

        // Show no results message if needed
        if (visibleCount === 0) {
            if ($('#no-results-row').length === 0) {
                var colspanCount = @if(!session('tenant_id')) 6 @else 5 @endif;
                $('.service_table tbody').append(
                    '<tr id="no-results-row">' +
                        '<td colspan="' + colspanCount + '" class="text-center py-4">' +
                            '<div class="text-muted">' +
                                '<i class="fas fa-search fa-2x mb-2"></i>' +
                                '<p>No templates found matching "' + query + '"</p>' +
                                '<button class="btn btn-sm btn-outline-primary" onclick="$(\'#search-input\').val(\'\').trigger(\'input\');">' +
                                    'Clear Search' +
                                '</button>' +
                            '</div>' +
                        '</td>' +
                    '</tr>'
                );
            }
        } else {
            $('#no-results-row').remove();
        }
    }

    // Helper function to show alerts
    function showAlert(message, type) {
        if (type === 'success') {
            // Swal.fire({
            //     title: 'Success!',
            //     text: message,
            //     icon: 'success',
            //     confirmButtonText: 'OK'
            // });
            showNotification('success', message);
        } else if (type === 'error') {
            // Swal.fire({
            //     title: 'Error!',
            //     text: message,
            //     icon: 'error',
            //     confirmButtonText: 'OK'
            // });
            showNotification('error', message);
        } else if (type === 'warning') {
            // Swal.fire({
            //     title: 'Warning!',
            //     text: message,
            //     icon: 'warning',
            //     confirmButtonText: 'OK'
            // });
            showNotification('warning', message);
        }
    }

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

@endsection