@extends('layout._default')

@section('body-con')
@section('title')
Email Template
@endsection

<div class="card">
    <div class="card-header border-0 pt-6">
        <div class="card-toolbar">
            <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                <!-- Search Form -->
                <div class="input-group">
                    <input type="text" id="search-query" class="form-control" placeholder="Search...">
                    <button class="btn btn-primary" type="button">
                        {!! getIcon('search', 'fs-2', '', 'i') !!}
                        Search
                    </button>
                </div>
                @if(Auth::user()->hasPermission('can_add_email_content'))
                <a class="btn btn-primary ms-3" href="{{ route('email-template.add') }}">
                    {!! getIcon('plus', 'fs-2', '', 'i') !!}
                    Add Email Template
                </a>
                @endif
            </div>
        </div>
    </div>

    <div class="card-body py-4">
        <!-- Your existing table code -->
        <div class="table-responsive">
            <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold" id="email-template-table">
                <thead>
                    <tr>
                        <th class="align-items-center">Description</th>
                        <th class="align-items-center">Subject</th>
                        <th class="align-items-center">Type</th>
                        <th class="align-items-center">Body</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($emailTemplates as $value)
                    <tr>
                        <td>{{ $value->description }}</td>
                        <td>{{ $value->subject }}</td>
                        <td>{{ $value->type }}</td>
                        <td>{{ $value->body }}</td>
                        <td class="text-end">
                            @if(Auth::user()->hasPermission('can_edit_email_content'))
                            <a href="{{ route('email-template.edit', $value->id) }}" title="Edit Content">
                                <i class="ki-duotone ki-message-edit" style="font-size:22px">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                            </a>
                            @endif
                            @if(Auth::user()->hasPermission('can_delete_email_content'))
                            <a href="javascript:void(0)" title="Delete" onclick="deleteRecord('{{$value->id}}')">
                                <i class="ki-duotone ki-cross-square" style="font-size:22px">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                            </a>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div>
            {{ $emailTemplates->links() }}
        </div>
        <!--end::Table-->
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function deleteRecord(id)
    {
        var url = "/admin/email-template/"+id+"/delete";
        Swal.fire({
            html: `Are You Sure You Want To Delete This Tempalte ? `,
            icon: "info",
            buttonsStyling: false,
            showCancelButton: true,
            confirmButtonText: "Confirm!",
            cancelButtonText: 'Nope, cancel it',
            customClass: {
                confirmButton: "btn btn-primary",
                cancelButton: 'btn btn-danger'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
        
    }
$(document).ready(function() {
    function escapeHtml(text) {
        return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
    }

    $('#search-query').on('keyup', function() {
        let query = $(this).val();

        $.ajax({
            url: '{{ route("email-template.search") }}',
            method: 'GET',
            data: { query: query },
            success: function(response) {
                $('tbody').empty();

                if (Array.isArray(response) && response.length > 0) {
                    $.each(response, function(index, value) {
                        $('tbody').append(`
                            <tr>
                                <td>${escapeHtml(value.description || '')}</td>
                                <td>${escapeHtml(value.subject || '')}</td>
                                <td>${escapeHtml(value.type || '')}</td>
                                <td>${escapeHtml(value.body || '')}</td> <!-- Display escaped HTML -->
                                <td class="text-end">
                                    <a href="{{ url('admin/email-template') }}/${value.id}/edit" title="Edit Content">
                                        <i class="ki-duotone ki-message-edit" style="font-size:22px">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </a>
                                    <a href="javascript:void(0)" title="Delete" onclick="deleteRecord('${value.id}')">
                                        <i class="ki-duotone ki-cross-square" style="font-size:22px">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </a>
                                </td>
                            </tr>
                        `);
                    });
                } else {
                    // Handle no results
                    $('tbody').append('<tr><td colspan="5" class="text-center">No results found</td></tr>');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);  
                console.log(xhr.responseText); 
            }
        });
    });

    


});
</script>

@endpush
@endsection