@extends('admin.layout.master')
@section('title', 'Chat')
<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    .chat-wrapper .chat-content .chat-body {
        max-height: 400px !important;
    }

    .chat-wrapper .chat-content .chat-body .messages {
        max-height: 400px !important;
    }

    .nav-tabs {
        --bs-nav-tabs-border-width: 0px !important;

    }

    /* Show the dropdown on hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    /* Prevent the dropdown from closing when clicked inside */
    .dropdown-menu {
        margin-top: 0;
    }

    .gstr1-hover {
        cursor: pointer;
    }

    .gstr1-hover:hover {
        background-color: lightgray;
        /* Change to any background color you prefer */
    }

    ul.messages {
        max-height: 400px;
        overflow-y: auto;
        /* Enable scrolling */
    }
</style>
@section('content')
    <div class="container">
        <div class="col-md-12">
            <div class="card">
                <h2 style="text-align: center">Dashboard (Admin)</h2>
            </div>
        </div>
        <div class="col-12">
            @livewire('admin.chat.header')
            {{-- <livewire:highlight-link :items="$items" /> --}}

        </div>
    </div>
@endsection
@push('custom-scripts')
    @stack('custom-script')
    {{-- <script>
        document.getElementById('filterSelect').addEventListener('change', function() {
            var url = this.value;
            if (url) {
                window.location.href = url;
            }
        });
    </script> --}}

    <script>
        $(document).on('click', '.load-chat', function(event) {
            event.preventDefault(); // Prevent the default link behavior

            let chatId = $(this).data('id'); // Get the chat ID
            let url = $(this).attr('href'); // Get the URL to make the AJAX request

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    // Load the response into the chat-content div
                    $('#chat-content').html(response);
                },
                error: function(xhr) {
                    console.error('Error loading chat:', xhr);
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // When "Old" or "Current" is clicked
            $('.old-tab, .current-tab').on('click', function() {
                $('.gstr1-hover').css('background-color', 'lightgray');
            });
        });
    </script>

    <script>
        $(".chat").on("click", function() {
            var dataId = $(this).attr("data-id");
            $(".gstr1_comment").val(dataId);
            // alert("The data-id of clicked item is: " + dataId);
        });
    </script>

    {{-- <script>
    document.getElementById('name').addEventListener('mousedown', function(event) {
        // Prevent the default action of placing the cursor where the mouse is clicked
        event.preventDefault();
        // Set the cursor position to the start (position 0)
        this.setSelectionRange(0, 0);
        // Focus the textarea
        this.focus();
    });
</script> --}}

    <script>
        // document.getElementById('filing_status_').addEventListener('change', function() {
        //     var commentBox = document.getElementById('commentBox');
        //     if (this.value === 'Error') {
        //         commentBox.style.display = 'block';
        //     } else {
        //         commentBox.style.display = 'none';
        //     }
        // });

        // document.getElementById('filing_status_').dispatchEvent(new Event('change'));
        // document.getElementById('filterSelect').addEventListener('change', function() {
        //     var url = this.value;
        //     if (url) {
        //         window.location.href = url;
        //     }
        // });

        $(document).on("click", ".modal2", function(e) {
            // console.log(e);
            var id = $(this).data("id");
            console.log(id);
            $("#filing_id").val(id);
            // alert(id)
        });

        // $(".filing_status").on("change", function(e) {
        //     var id = $(this).data("filingid");
        //     console.log(id);
        //     var status = $("#filing_status_" + id).val();
        //     var confirmed = confirm("Are you sure you want to update this record?");

        //     // alert(status)
        //     console.log(status);

        //     // $.ajaxSetup({
        //     //     headers: {
        //     //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //     //     }
        //     // });
        //     var url = `{{ route('admin.user.filing.status') }}`;
        //     if (confirmed) {

        //     $.ajax({

        //         // Our sample url to make request
        //         url: url,

        //         // Type of Request
        //         type: "GET",
        //         dataType: "json",
        //         data: {
        //             id: id,
        //             status: status
        //         },
        //         // Function to call when to
        //         // request is ok
        //         success: function(data) {
        //             let x = JSON.stringify(data);
        //             console.log(x);
        //             // alert('Status Successfully')
        //             alert('Status updated successfully.');



        //             //location.reload();
        //             // Reload the page only if the status is not 'Error'

        //         },

        //         // Error handling
        //         error: function(error) {
        //             console.log(`Error ${error}`);
        //             // alert('success')
        //             location.reload()


        //         }
        //     });
        // }

        // });
        // $(document).on("change", ".filing_status", function(e) {
        //     console.log("working..");
        //     var id = $(this).data("filingid");
        //     var originalStatus = $(this).data("original-status");
        //     var status = $("#filing_status_" + id).val();

        //     // SweetAlert confirmation box
        //     Swal.fire({
        //         title: 'Are you sure?',
        //         text: "Do you want to update this record?",
        //         icon: 'warning',
        //         showCancelButton: true,
        //         confirmButtonColor: '#3085d6',
        //         cancelButtonColor: '#d33',
        //         confirmButtonText: 'Yes, update it!'
        //     }).then((result) => {
        //         if (result.isConfirmed) {
        //             var url = `{{ route('admin.user.filing.status') }}`;

        //             $.ajax({
        //                 url: url,
        //                 type: "GET",
        //                 dataType: "json",
        //                 data: {
        //                     id: id,
        //                     status: status
        //                 },
        //                 success: function(data) {
        //                     if (data.status === "error") {
        //                         // Show the comment box in case of error
        //                         $("#commentBox").show();
        //                         Swal.fire('Error', 'An error occurred while updating the status.', 'error');
        //                         // Revert to the original value
        //                         $("#filing_status_" + id).val(originalStatus);
        //                     } else {
        //                         // Hide the comment box if status is successfully updated
        //                         $("#commentBox").hide();
        //                         // Update the original-status attribute with the new value
        //                         $("#filing_status_" + id).data("original-status", status);
        //                         Swal.fire('Updated!', 'The status has been updated.', 'success');
        //                         $('ul.messages').append(`<li class="message-item me">
    //                             <img src="http://127.0.0.1:8000/assets/images/logo.jpeg" class="img-xs rounded-circle" alt="avatar">
    //                             <div class="content">
    //                                 <div class="message">
    //                                     <div class="bubble">
    //                                         <p>
    //                                         ${data.fileData.status}
    //                                         </p>
    //                                     </div>
    //                                     <span>${data.fileData.currentt_date} |
    //                                     ${data.fileData.currentt_time}</span>
    //                                 </div>
    //                             </div>
    //                         </li>`);
        //                     }
        //                 },
        //                 error: function(error) {
        //                     console.log(`Error ${error}`);
        //                     // Show the comment box and alert for general error
        //                     $("#commentBox").show();
        //                     Swal.fire('Error', 'A general error occurred. Please try again.', 'error');
        //                     // Revert to the original value
        //                     $("#filing_status_" + id).val(originalStatus);
        //                 }
        //             });
        //         } else {
        //             // Hide the comment box and revert to the original value if the user cancels
        //             $("#commentBox").hide();
        //             $("#filing_status_" + id).val(originalStatus);
        //         }
        //     });
        // });

        $(document).on("change", ".filing_status", function(e) {
            console.log("working..");
            var id = $(this).data("filingid");
            var originalStatus = $(this).data("original-status");
            var status = $("#filing_status_" + id).val();



            // SweetAlert confirmation box
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to update this record?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, update it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    var url = `{{ route('admin.user.filing.status') }}`;

                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        data: {
                            id: id,
                            status: status
                        },
                        success: function(data) {
                            console.log(data)
                            if (data.data.gstr1_file_status == "Error") {
                                // Show the comment box in case of error
                                $("#commentBox").show();
                                // Swal.fire('Error', 'An error occurred while updating the status.', 'error');

                                // Revert to the original value
                                $("#filing_status_" + id).val(data.data.gstr1_file_status);

                                // Append the comment form if status is 'Error'
                                $('div.chat-footer d-flex').append(`<form action="{{ route('admin.store.chat') }}" method="POST" class="search-form flex-grow-1 me-2"
                id="commentBox">
                @csrf
                <input type="hidden" name="return_filing_id" value="{{-- $gstr1_chat->id --}}">
                <div class="input-group">
                    <input type="text" class="form-control rounded-pill" id="chatForm"
                        placeholder="Type a message" name="gstr1_comment" required>

                    <div>
                        <button type="submit" class="btn btn-primary btn-icon rounded-circle">
                            <i data-feather="send"></i>
                        </button>
                    </div>
                </div>

            </form>`);


                            } else {
                                // Hide the comment box if status is successfully updated
                                $("#commentBox").hide();

                                // Update the original-status attribute with the new value
                                $("#filing_status_" + id).data("original-status", status);
                                Swal.fire('Updated!', 'The status has been updated.',
                                    'success');

                                // Append message with updated status and timestamp
                                $('ul.messages').append(`<li class="message-item me">
                            <img src="http://127.0.0.1:8000/assets/images/logo.jpeg" class="img-xs rounded-circle" alt="avatar">
                            <div class="content">
                                <div class="message">
                                    <div class="bubble">
                                        <i>${data.fileData.status}</i>
                                    </div>
                                    <i>${data.fileData.currentt_date} | ${data.fileData.currentt_time}</i>
                                </div>
                            </div>
                        </li>`);
                            }
                        },
                        error: function(error) {
                            console.log(`Error ${error}`);

                            // Show the comment box and alert for general error
                            $("#commentBox").show();
                            Swal.fire('Error', 'A general error occurred. Please try again.',
                                'error');

                            // Revert to the original value
                            $("#filing_status_" + id).val(originalStatus);
                        }
                    });
                } else {
                    // Hide the comment box and revert to the original value if the user cancels
                    $("#commentBox").hide();
                    $("#filing_status_" + id).val(originalStatus);
                }
            });
        });

        // $(document).ready(function() {
        $(document).on('submit', "#commentBox", function(e) {
            e.preventDefault(); // Prevent form submission

            let formData = $(this).serialize(); // Serialize form data
            var url = `{{ route('admin.store.chat') }}`;


            $.ajax({
                url: url,
                // _token: '{{ csrf_token() }}',
                type: 'POST',
                data: formData,
                success: function(response) {
                    // Append the new comment
                    if (response.comment) {

                        $('ul.messages').append(`<li class="message-item me">
                            <img src="http://127.0.0.1:8000/assets/images/logo.jpeg" class="img-xs rounded-circle" alt="avatar">
                            <div class="content">
                                <div class="message">
                                    <div class="bubble">
                                        <i>${response.comment}</i>
                                    </div>
                                    <i>${response.date} | ${response.time}</i>
                                </div>
                            </div>
                        </li>`);

                        // Clear the input field
                        $('#chatForm').val('');

                        // Ensure scrolling happens after DOM update
                        setTimeout(function() {
                            var messageList = $('ul.messages');
                            messageList.animate({
                                scrollTop: messageList.prop("scrollHeight")
                            }, 500); // Smooth scroll
                        }, 100);

                        // Show success SweetAlert notification
                        Swal.fire({
                            icon: 'success',
                            title: 'Message sent!',
                            text: 'Your comment has been added successfully.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    } else {
                        console.log('No comment found in the response');
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText); // Log the error if any
                }
            });
        });
        // });



        $(document).on("click", ".pick-link", function(e) {
            e.preventDefault(); // Prevent default link behavior

            let chatId = $(this).data('id'); // Get the chat ID from the clicked element

            // Show SweetAlert2 confirmation
            Swal.fire({
                title: "Are you sure?",
                text: "Once picked, you cannot undo this action!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, pick it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    // Make the AJAX request if user confirms
                    $.ajax({
                        url: '{{ route('admin.user.filing.picked', ':id') }}'.replace(':id',
                            chatId), // Replace ':id' with chatId
                        type: 'GET',
                        data: {
                            _token: '{{ csrf_token() }}',
                            chatId: chatId // CSRF token for security
                        },
                        success: function(response) {
                            if (response.status) {
                                // Show success alert
                                Swal.fire("Success!", "Admin has been picked!", "success");

                                // Append the admin name inside the <p class="pick"> element
                                $('p.pick').append(`<a>admin</a> <a href="#" data-bs-toggle="modal" class="modal2" data-id="{{-- $gstr1_chat->id --}}"
                                data-bs-target="#exampleModal">
                                Re-Assignment
                            </a>`);

                                // Update the UI - Change the content of the picked chat item
                                $(`#gstr1-chat-${chatId}`).html('You have picked this filing.');

                                // Optionally append a new record below the current one
                                let newRecord = `<div class="picked-record">
                                             <p>Filing ID ${chatId} has been picked by you.</p>
                                         </div>`;
                                $(`#gstr1-chat-${chatId}`).after(newRecord);
                            } else {
                                // Handle any error messages returned in the response
                                Swal.fire("Error!", response.message, "error");
                            }
                        },
                        error: function(xhr) {
                            // Handle different error scenarios
                            if (xhr.status === 404) {
                                Swal.fire("Error!", 'Record not found.', "error");
                            } else if (xhr.status === 500) {
                                Swal.fire("Error!",
                                    'Internal server error. Please try again later.',
                                    "error");
                            } else {
                                Swal.fire("Error!",
                                    'An unexpected error occurred. Please try again.',
                                    "error");
                            }
                        }
                    });
                } else {
                    // Show cancelled alert if the user cancels the action
                    Swal.fire("Cancelled", "Your action has been cancelled.", "info");
                }
            });
        });



        // $.ajaxSetup({
        //     headers: {
        //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //     }
        // });


        $(document).on('click', '#submitFormButton', function() {
            $('#reAssignmentForm').submit(); // Trigger the form submission
        });

        $(document).on('submit', '#reAssignmentForm', function(e) {
            e.preventDefault(); // Prevent default form submission

            var formData = $(this).serialize(); // Serialize the form data
            var url = $(this).attr('action'); // Get the form action URL

            $.ajax({

                url: url,
                type: "POST",
                _token: '{{ csrf_token() }}',
                data: formData,
                success: function(response) {
                    // Handle success
                    if (response.status) {
                        // Hide the modal
                        // $('#exampleModal').modal('hide');
                        // Optionally, show a success message
                        Swal.fire('Success', 'The reassignment was successful!', 'success');
                    } else {
                        // Display validation error if exists
                        $('#teamError').text(response.errors.team);
                    }
                },
                error: function(xhr) {
                    // Handle error
                    Swal.fire('Error', 'An error occurred. Please try again.', 'error');
                }
            });
        });
    </script>
    {{-- <script>
    Echo.channel('filing-status-channel')
        .listen('.filing-status-updated', (e) => {
            const filingStatus = e.filingStatus;
            let newFiling = `
                <li class="message-item me">
                    <img src="{{ asset('/assets/images/logo.jpeg') }}" class="img-xs rounded-circle" alt="avatar">
                    <div class="content">
                        <div class="message">
                            <div class="bubble">
                                <p>${filingStatus.status}</p>
                            </div>
                            <span>${filingStatus.currentt_date} | ${filingStatus.currentt_time}</span>
                        </div>
                    </div>
                </li>
            `;
            $('#filings-container').prepend(newFiling); // Add the new status to the top of the list
        });
</script> --}}


    <script>
        function updateTotals() {
            // Define arrays for each type of tax
            const cgstIds = ['gstr1_comment_2', 'gstr1_comment_6', 'gstr1_comment_10', 'gstr1_comment_14'];
            const sgstIds = ['gstr1_comment_3', 'gstr1_comment_7', 'gstr1_comment_11', 'gstr1_comment_15'];
            const igstIds = ['gstr1_comment_4', 'gstr1_comment_8', 'gstr1_comment_12', 'gstr1_comment_16'];

            // Calculate totals for CGST, SGST, and IGST
            const totalCGST = cgstIds.reduce((sum, id) => sum + (parseFloat(document.getElementById(id).value) || 0), 0);
            const totalSGST = sgstIds.reduce((sum, id) => sum + (parseFloat(document.getElementById(id).value) || 0), 0);
            const totalIGST = igstIds.reduce((sum, id) => sum + (parseFloat(document.getElementById(id).value) || 0), 0);

            // Calculate Sub Total
            const subTotal = totalCGST + totalSGST + totalIGST;

            // Update fields
            document.getElementById('gstr1_comment_17').value = subTotal.toFixed(2);
            document.getElementById('total_cgst').value = totalCGST.toFixed(2);
            document.getElementById('total_sgst').value = totalSGST.toFixed(2);
            document.getElementById('total_igst').value = totalIGST.toFixed(2);
        }
    </script>
@endpush