@extends('includes.layout')
@section('content')
    @php
        $resww = DB::table('comm_mail_templates')->where('show_hide', '0')->get();
        $resww333 = '';
        if($_GET['id'] ?? '' && $_GET['id'] != ''){
            $resww333 = DB::table('comm_mail_templates')->where('id', $_GET['id'])->get();
        }
    @endphp

    <div class="p-4 text-center w-full overflow-y-auto" style="height:40rem">
      
    <nav aria-label="breadcrumb" class="mx-auto text-left leading-10 w-1/2 h-auto">
    <ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a href="/settings" class="opacity-60">
        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 text-gray-500 transition duration-75  text-white" width="20" height="20" viewBox="0 0 24 24" fill="#00000">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"></path>
                        </svg>
        </a>
        <span
            class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
            /
        </span>
        </li>
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a  class="opacity-60">
            <span>
            Email Templates
            </span>
        </a>
        </li>
    </ol>
    </nav>
    <h1 class="text-2xl font-semibold">Email Templates</h1>
    <span id="hideshow" style="color:green;display:none">
              <b> Updated Successfully...</b>
            </span>
            <span id="hideshow2" style="color:green;display:none">
              <b> Template Removed Successfully...</b>
            </span>
    <br>


  <form id="editform" class="mx-auto text-left leading-10 w-1/2 h-auto" method="POST" onsubmit="saveButton(event)"> 
            <label for="name" class="block mb-2 text-sm font-medium text-gray-900 darks:text-white">Name</label>
            <input type="text" id="name" value="{{$resww333[0]->name ?? ''}}" autocomplete="off" aria-describedby="helper-text-explanation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  darks:bg-gray-700 darks:border-gray-600 darks:placeholder-gray-400 darks:text-white darks:focus:ring-blue-500 darks:focus:border-blue-500" placeholder="Name *" required>
            <label for="message" class="block mb-2 text-sm font-medium text-gray-900 darks:text-white">Content</label>
            <textarea id="message1" rows="4" class="block p-2.5 w-full h-40 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 darks:bg-gray-700 darks:border-gray-600 darks:placeholder-gray-400 darks:text-white darks:focus:ring-blue-500 darks:focus:border-blue-500" placeholder="Content *" required>@php echo $resww333[0]->temp ?? ''; @endphp</textarea>


            

            <div>&nbsp;</div>
            <button
                class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
                type="submit" id="autoescale">Save</button>
        </form>  
      <div>&nbsp;</div>

        <div class="w-full flex justify-center">
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-3/4">
                <table class="w-full text-sm text-left rtl:text-right text-gray-500 darks:text-gray-400">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 darks:bg-gray-700 darks:text-gray-400 sticky top-0">
                        <tr>
                            <th scope="col" class="px-6 py-3">
                                Name
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Content
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Modify
                            </th>
                        </tr>
                    </thead>
                    <tbody class="overflow-y-auto" id="updatebody">
                    @if(count($resww) > 0)
                        @foreach($resww as $items)
                            <tr class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                                <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                    {{$items->name}}
                                </th>
                                <!-- <td class="px-6 py-3">
                                    {{$items->temp}}
                                </td> -->
                                <td class="px-6 py-3">
    {{ Str::limit($items->temp, 60, '...') }}
</td>

                                <td class="px-6 py-3 cursor-pointer" >
                                    <div class="flex items-center gap-3">
                                        <button Onclick="Fun_edit({{$items->id}})" title="edit" class="select-none rounded-lg bg-gray-900 py-1 px-4 text-center align-middle font-sans text-xs font-bold text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
                                            Edit
                                        </button>
                                        <button Onclick="Fun_Removet({{$items->id}})" title="Trash" class="select-none rounded-lg bg-gray-900 py-1 px-4 text-center align-middle font-sans text-xs font-bold text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
                                            Remove
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                             <tr class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                             <th colspan="3" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                            No data available in table
                            </th>
                            </tr>
                    @endif
                    </tbody>
                </table>
            </div>  
            <script>
                function saveButton(event) {
                    event.preventDefault();
                    var text = $('#autoescale').text();

                    const name = $("#name").val();
                    const content = $("#message1").val();
                    
                    $.ajax({
                        type: "post",
                        url: "{{ route('autonomous-level') }}",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {
                            ref: text == 'Save' ? 'mail_temp' : 'mail_temp_up',
                            name: name,
                            content: content,
                            ids: ''
                        },
                        success: function(response) {
                          //  alert(response.message);
                          $('#hideshow').css('display','block');
                              setTimeout(function() {
                                $('#hideshow').css('display','none');


            }, 1000);



           
                            $("#name").val('');
                            $("#message").val('');
                            if(response.message == 'Template Updated successfully') {
                                window.location.href = 'https://smarthub.rn-test.com/Content'
                            }
                            else{
updatetable(response.data);
                            }
                            //else {
                            //     location.reload();
                            // }
                        },
                        error: function() {
                            console.error("Error occurred during the AJAX request.");
                        }
                    });
                }

                function updatetable(data){

                var tableBody = $('#updatebody');
        tableBody.empty(); // Clear existing table rows
        
        // Loop through each item in the data array
        $.each(data, function(index, items) {
            var row = $('<tr>')
                .addClass(index % 2 === 0 ? 'odd:bg-white odd:darks:bg-gray-900' : 'even:bg-gray-50 even:darks:bg-gray-800')
                .addClass('border-b darks:border-gray-700');

            var actions = `
                <div class="flex items-center gap-3">
                    <button onclick="Fun_edit(${items.id})" title="Edit" class="select-none rounded-lg bg-gray-900 py-1 px-4 text-center align-middle font-sans text-xs font-bold text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                        Edit
                    </button>
                    <button onclick="Fun_Remove(${items.id})" title="Trash" class="select-none rounded-lg bg-gray-900 py-1 px-4 text-center align-middle font-sans text-xs font-bold text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
                        Remove
                    </button>
                </div>
            `;

            row.append(`
                <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                    ${items.name}
                </th>
                <td class="px-6 py-3">
                    ${items.temp}
                </td>
                <td class="px-6 py-3 cursor-pointer">
                    ${actions}
                </td>
            `);

            // Append the row to the table body
            tableBody.append(row);
        });
    }
                function Fun_edit(id) {
                    window.location.href = 'https://smarthub.rn-test.com/Content?id='+id
                }

                function Fun_Removet(id) {
                    $.ajax({
                        type: "post",
                        url: "{{ route('autonomous-level') }}",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {
                            ref: 'mail_temp_remove',
                            id: id
                        },
                        success: function(response) {
                           // alert(response.message);
                              //  location.reload();

                              $('#hideshow2').css('display','block');
                              setTimeout(function() {
                                $('#hideshow2').css('display','none');


            }, 1000);

            updatetable(response.data);

                        },
                        error: function() {
                            console.error("Error occurred during the AJAX request.");
                        }
                    });
                }
            </script>
        </div>
    </div>
@endsection