@extends('layouts.app')

@section('title', $data['title'])

@section('content')
<div class="container mt-3">
        <div class="mb-3 d-flex justify-content-end">
            <button type="button" id="create_template" class="btn btn-primary text-end" data-bs-toggle="modal" data-bs-target="#addTemplateModal">
                Add New Template
            </button>
        </div>
    </div>
    <!-- Add Template Modal -->
    <div class="modal fade" id="addTemplateModal" tabindex="-1" aria-labelledby="addTemplateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addTemplateModalLabel">Add New Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addTemplateForm">
                        @csrf
                        <input type="hidden" id="templateId" name="id">
                        <div class="mb-3">
                            <label for="templateName" class="form-label">Template Name</label>
                            <input type="text" class="form-control" id="templateName" name="template_name" placeholder="Enter Template Name" required>
                        </div>
                        <div class="mb-3">
                            <label for="language_code" class="form-label">Language Code</label>
                            <input type="text" class="form-control" id="language_code" name="language_code" placeholder="Enter Language Code" required>
                        </div>
                        <div class="mb-3">
                            <label for="modalStatus" class="form-label">Status</label>
                            <select class="form-select" id="statuss" name="status" required>
                                <option value="1">Active</option>
                                <option value="2">Inactive</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="type" class="form-label">Type</label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="1">Text</option>
                                <option value="2">Location</option>
                                <option value="3">Image</option>
                                <option value="4">Video</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Existing DataTable code -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="templateTable" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Template Name</th>
                                <th>Language Code</th>
                                <th>Status</th>
                                <th>Type</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables will populate this -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- End Page-content -->

<!-- CSRF Token Meta Tag -->
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('scripts')
<script type="text/javascript">
 
 $(document).ready(function() {
    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    var ajaxURLTemplate = '{{ route("templatelist.ajax") }}';
    var templatePageLength = 10;
    var templateDelete = "{{ route('template.delete') }}";

    // Initialize DataTable
    var templateTable = $('#templateTable').DataTable({
        "processing": true,
        "serverSide": true,
        "pageLength": templatePageLength,
        "ajax": {
            "url": ajaxURLTemplate,
            "type": "POST",
            "data": function(d) {
                d._token = csrfToken;
            }
        },
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "language_code"},
            {
                "data": "status",
                "render": function(data, type, row) {
                    return data == 1 ? 'Active' : 'Inactive'; // Display 'Active' or 'Inactive'
                }
            },
            {
                "data": "type",
                "render": function(data, type, row) {
                    switch(data) {
                        case 1: return 'Text';
                        case 2: return 'Location';
                        case 3: return 'Image';
                        case 4: return 'Video';
                        default: return 'Unknown';
                    }
                }
            },
            { "data": "action", "orderable": false, "searchable": false }
        ]
    });

    // Open the "Add New Template" Modal
    $(document).on('click', '#create_template', function() {
        $('#addTemplateForm')[0].reset(); // Reset the form
        $('#templateId').val(''); // Clear the template ID (ensuring it's empty for new template)
        $('#addTemplateModalLabel').text('Add New Template'); // Change the modal title to "Add New Template"
    });

    // Add Template Form Submission
    $(document).on('submit', '#addTemplateForm', function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        const saveUrl = '{{ route("add.templatelist.ajax") }}';

        $.ajax({
            url: saveUrl,
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.status == 1) {
                    toastr.success(response.msg);
                    $('#addTemplateModal').modal('hide'); // Close the modal
                    $('#addTemplateForm')[0].reset(); // Reset the form
                    templateTable.ajax.reload(); // Reload the table without refreshing the page
                }
            },
            error: function(xhr) {
                Swal.fire('Error!', 'Failed to save template.', 'error');
            }
        });
    });
//edit template
$(document).on('click', '.edit-btn', function() {
    var id = $(this).data('id');  // Get the template ID from the data-id attribute
    var url = '{{ route('template.get', ':id') }}'.replace(':id', id);  // Replace the :id placeholder with the actual ID
     
    $.ajax({
        url: url,
        method: 'GET',
        success: function(response) {
            console.log(response);
          
                // Populate the form with the response data
                $('#templateId').val(response.data.id);  // Set the template ID (hidden field)
                $('#templateName').val(response.data.name);  // Set the template name
                $('#language_code').val(response.data.language_code);  // Set the language code
                $('#statuss').val(response.data.status);  // Set the status (Active/Inactive)
                $('#type').val(response.data.type);  // Set the type (Text/Location/Image/Video)

                // Update modal title to reflect editing mode
                $('#addTemplateModalLabel').text('Edit Template - ' + response.name);

                // Show the modal
                $('#addTemplateModal').modal('show');
         
        },
        error: function(xhr) {
            Swal.fire('Error!', 'Failed to fetch template details.', 'error');  // Show error if AJAX fails
        }
    });
});
    // Delete Template
    $(document).on('click', '.delete-btn', function(e) {
        e.preventDefault();
        var templateId = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: templateDelete,
                    type: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: { id: templateId },
                    success: function(data) {
                        if (data.status == 1) {
                            Swal.fire('Deleted!', 'Template has been deleted.', 'success');
                            templateTable.ajax.reload(); // Reload the table
                        } else {
                            Swal.fire('Error!', 'An error occurred.', 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Error!', 'An unexpected error occurred.', 'error');
                    }
                });
            }
        });
    });
});

</script>
@endsection