@extends('user.app.layout')

@section('content')
    <div class="main-content">
        <section class="table-section">
            <div class="table-section-color">
                <div class="container-fluid p-0">
                    <div class="table-button">
                        <div class="row">
                            <div class="col-lg-5 col-sm-6 my-auto">
                                <h4>Templates</h4>
                            </div>
                            <div class="col-lg-7 col-sm-6 text-end">
                                <a class="btn btn-blue-button" href="{{ route('addNewTemplate') }}"><img
                                        src="../assets/images/plus.png" alt="plus" class="me-3">Add New Template</a>
                            </div>
                        </div>
                    </div>
                    <table id="table_1" class="datatable_ct table table-striped mb-2 pb-1 mt-2 text-center"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center">Sr No</th>
                                <th scope="col" class="text-center">Name</th>
                                <th scope="col" class="text-center">Image</th>
                                <th scope="col" class="text-center">Media</th>
                                <th scope="col" class="text-center">Active/Inactive</th>
                                <th scope="col" class="text-center">Actions</th>

                            </tr>
                        </thead>
                        <tbody>
                            {{-- <tr>
                                <td>01</td>
                                <td>Template 1</td>
                                <td>
                                    <a href="../assets/images/dashboard.png" class="image_view">
                                        <img src="../assets/images/dashboard.png" alt="image" class="img_width">
                                    </a>
                                </td>
                                <td>
                                    <a href="../assets/images/birthdaycard.png" class="image_view btn btn-blue-button "
                                        href="javascript:void(0)">Test</a>
                                </td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a href="templatemedia.php" type="button" class="btn edit_btn"><img
                                                src="../assets/images/b.png" alt="image" class="me-2"> Edit</a>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>02</td>
                                <td>Template 2</td>
                                <td>
                                    <a href="../assets/images/dashboard.png" class="image_view">
                                        <img src="../assets/images/dashboard.png" alt="image" class="img_width">
                                    </a>
                                </td>
                                <td>
                                    <a href="../assets/images/birthdaycard.png" class="image_view btn btn-blue-button "
                                        href="javascript:void(0)">Test</a>
                                </td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a href="templatemedia.php" type="button" class="btn edit_btn"><img
                                                src="../assets/images/b.png" alt="image" class="me-2"> Edit</a>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>03</td>
                                <td>Template 3</td>
                                <td>
                                    <a href="../assets/images/dashboard.png" class="image_view">
                                        <img src="../assets/images/dashboard.png" alt="image" class="img_width">
                                    </a>
                                </td>
                                <td>
                                    <a href="../assets/images/birthdaycard.png" class="image_view btn btn-blue-button "
                                        href="javascript:void(0)">Test</a>
                                </td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a href="templatemedia.php" type="button" class="btn edit_btn"><img
                                                src="../assets/images/b.png" alt="image" class="me-2"> Edit</a>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>04</td>
                                <td>Template 4</td>
                                <td>
                                    <a href="../assets/images/dashboard.png" class="image_view">
                                        <img src="../assets/images/dashboard.png" alt="image" class="img_width">
                                    </a>
                                </td>
                                <td>
                                    <a href="../assets/images/birthdaycard.png" class="image_view btn btn-blue-button "
                                        href="javascript:void(0)">Test</a>
                                </td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a href="templatemedia.php" type="button" class="btn edit_btn"><img
                                                src="../assets/images/b.png" alt="image" class="me-2"> Edit</a>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>05</td>
                                <td>Template 5</td>
                                <td>
                                    <a href="../assets/images/dashboard.png" class="image_view">
                                        <img src="../assets/images/dashboard.png" alt="image" class="img_width">
                                    </a>
                                </td>
                                <td>
                                    <a href="../assets/images/birthdaycard.png" class="image_view btn btn-blue-button "
                                        href="javascript:void(0)">Test</a>
                                </td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <a href="templatemedia.php" type="button" class="btn edit_btn"><img
                                                src="../assets/images/b.png" alt="image" class="me-2"> Edit</a>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr> --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>

    <!-- enroll_doctor -->
    <div class="modal fade" id="delete" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <!-- <div class="modal-header">
                                            <h4 class="modal-title" id="exampleModalToggleLabel">Are you sure?</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                          </div> -->
                <div class="modal-body">
                    <div class="mb-3 delete_modal">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        <h3 class="text-center" id="">Are you sure?</h3>
                        <h6 class="text-center">You won't be able to revert this!</h6>
                    </div>

                </div>
                <div class="pt-2 pb-4 text-center">
                    <button class="btn btn-success">Yes, delete it!</button>
                    <button class="btn btn-danger" data-bs-dismiss="modal">Reject</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        function changeStatus(id) {
            $.ajax({
                url: "{{ route('templateStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        filterData()
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

       /*  function generateTemplate(id) {
            var button = $('.generateButton');

            button.prop('disabled', true);

            $.notify('Processing...', "success");

            $.ajax({
                url: "{{ route('generateTemplate') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.msg, "success");

                        const base64Image = response.generated_image;

                        $.fancybox.open({
                            src: base64Image,
                            type: 'image',
                            opts: {
                                caption: 'Generated Template',
                                thumb: base64Image
                            }
                        });
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                },
                complete: function() {
                    button.prop('disabled', false);
                }
            });
        } */



        function deleteTemplate(id) {
            $.ajax({
                url: "{{ route('deleteTemplate') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        filterData()
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function filterData() {
            var table = $('#table_1').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search",
                    emptyTable: "No records available", // Message when no data exists
                    zeroRecords: "No matching records found", // Message when no search results are found
                    processing: "Loading, please wait...", // Message while loading
                },
                ajax: {
                    url: "{{ route('templatePaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"; // Add CSRF token properly
                        d.pendingList = $('#pendingList').is(':checked') ? 1 : 0; // Send additional filter data
                    },
                },
                drawCallback: function(settings) {
                    var api = this.api();

                    // Handle empty data explicitly
                    if (api.rows({
                            page: 'current'
                        }).data().length === 0) {
                        $("#table_1 tbody").html(`
                    <tr>
                        <td colspan="6" class="text-center">${api.settings()[0].oLanguage.emptyTable}</td>
                    </tr>
                `);
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'template_name',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'template_file',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'test',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'template_status',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: true
                    },
                ],
                columnDefs: [{
                    targets: [1, 2, 3, 4, 5],
                    render: function(data, type, full) {
                        return data != null ? data : '-'; // Return "-" if data is null
                    },
                }, ],
            });
        }



        $(document).ready(function() {
            filterData();
        });
    </script>
@endsection