@php
    $user = auth()->user();
  
    $role = $user->roles->pluck('name')[0];

@endphp
<x-admin.layout>
    <x-slot name="title">Forward List</x-slot>
    <x-slot name="heading">Forward List</x-slot>
 
          <style>
        /* Style for the table cell to look like a link with blue underline */
        .open-modal {
            color: blue; /* Text color */
            text-decoration: underline; /* Underline text */
            cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
        }
        
        .open-modal:hover {
            color: darkblue; /* Darker color on hover for better visibility */
            text-decoration: underline; /* Keep underline on hover */
        }
       
        #fileLink {
            color: red; /* This sets the link color to red */
            cursor: pointer; /* Makes the link appear clickable */
        }
    
        td {
            position: relative; /* Needed for positioning the tooltip */
            cursor: pointer; /* Change cursor to pointer */
            padding: 10px; /* Add some padding */
            border: 1px solid #ddd; /* Add border for visibility */
        }

        .tooltip {
            visibility: hidden; /* Hidden by default */
            width: 150px; /* Width of the tooltip */
            background-color: white; /* Background color */
            color: black; /* Text color */
            text-align: center; /* Center text */
            border-radius: 5px; /* Rounded corners */
            padding: 5px; /* Padding around text */
            position: absolute; /* Positioning */
            z-index: 1; /* On top of other elements */
            bottom: 100%; /* Position above the td */
            left: 50%; /* Center horizontally */
            margin-left: -75px; /* Center adjustment */
            opacity: 0; /* Start hidden */
            transition: opacity 0.3s; /* Smooth transition */
        }

        td:hover .tooltip {
            visibility: visible; /* Show tooltip on hover */
            opacity: 1; /* Show tooltip */
        }

    </style>       
    <div class="row">
        <div class="col-lg-12">
            <div class="card">

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="buttons-datatables" class="table table-bordered nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Revoke</th>
                                    <th>Inward No.</th>
                                    <!--<th>Letter Ref No.</th>-->
                                    <th>From Whom</th>
                                    <th>Sendername & Designation</th>
                                    <th>Subject</th>
                                    <th>Receive Date</th>
                                    <th>Created On</th>
                                    <th>Send On</th>
                                    <!--<th>Send</th>-->
                                   
                                   
                                </tr>
                            </thead>
                            <tbody>
                               
                                @foreach ($forwardlist_datas as $index => $inward)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                         <td>
                                             <button class="btn btn-primary btn-revoke px-2 py-1" title="Revoke Department" data-id="{{ $inward->id }}" >
                                                Revoke
                                            </button>
                                         </td>
                                       
                                         <td class="open-modal" style="color: red;" data-id="{{ $inward->id }}">{{ $inward->formatted_id }}</td>
                                       
                                         <td>{{ $inward->fromwhom }}</td>
                                        
                                        <td>{{ $inward->sendername_designation }}</td>
                                       
                                       <td>
                                                                                        {{ $shortSubject }}
                                            <span class="tooltip">{{ $inward->subject }}</span>
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($inward->created_at)->format('d-m-Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($inward->created_at)->format('d-m-Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($inward->created_at)->format('d-m-Y') }}</td>
                                        
                                        <!--<td>-->
                                           
                                           
                                        <!--    <button class="btn {{ $inward->subdepartment == 0 ? 'btn-success' : 'btn-danger' }} rem-element px-2 py-1 send-button" -->
                                        <!--        title="Send" -->
                                        <!--        data-id="{{ $inward->id }}"-->
                                        <!--        {{ $inward->subdepartment != 0 ? 'disabled' : '' }}>-->
                                        <!--        <i class="ri-mail-send-fill fs-16"></i> Send-->
                                        <!--    </button>-->
                                            
                                        <!--</td>-->
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="inwardModal" tabindex="-1" role="dialog" aria-labelledby="inwardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="inwardTrackingModalLabel">Inward Tracking History</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th scope="row">Inward No.</th>
                            <td><p id="inwardId"></p></td>
                            <th scope="row">Letter Ref. No.</th>
                            <td><p id="letteref"></p></td>
                        </tr>
                        <tr>
                            <th scope="row">Received Date</th>
                            <td id="receivedDate">26-08-2024</td>
                            <th scope="row">Subject</th>
                            <td id="subject">Dr. Kafeel Ahmad S/o Abdul Aziz Ansari On 28.08.24 at 2.45</td>
                        </tr>
                        <tr>
                            <th scope="row">File Link</th>
                            <td id="fileLink"></td>
                            <th scope="row">Comment</th>
                            <td id="comments"></td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Sr. No.</th>
                            <th scope="col">From</th>
                            <th scope="col">Sent To</th>
                            <th scope="col">Sent On</th>
                            <th scope="col">Attachment</th>
                            <th scope="col">Comment</th>
                            <th scope="col">Review</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody id="trackingHistoryTable">
                     
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



  <!-- Modal for displaying images -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img id="modalImage" src="" alt="Preview" style="width: 100%; max-height: 80vh; object-fit: contain;">
            </div>
        </div>
    </div>
</div>

<!-- Modal for displaying PDFs -->
<div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfModalLabel">PDF Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <iframe id="modalPdf" src="" style="width: 100%; height: 80vh;" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>

</x-admin.layout>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

<script>
    
  
    // $(document).ready(function() {
    //     $(document).on('click', '.open-modal', function() {
    //         var inwardId = $(this).data('id');

    //         $.ajax({
    //             url: '/acknoacceptlist/' + inwardId,
    //             type: 'GET',
    //             success: function(response) {
    //                 var acknoaccept = response.acknoaccept;
    //                 var departments = response.departments;

    //                 // Function to format date as dd-mm-yyyy
    //                 function formatDate(dateString) {
    //                     if (!dateString) return 'N/A'; 
    //                     const date = new Date(dateString);
    //                     const day = ('0' + date.getDate()).slice(-2);
    //                     const month = ('0' + (date.getMonth() + 1)).slice(-2);
    //                     const year = date.getFullYear();
    //                     return `${day}-${month}-${year}`;
    //                 }

    //                 $('#inwardId').text(acknoaccept.formatted_id || 'N/A');
    //                 $('#subject').text(acknoaccept.subject || 'N/A');
    //                 $('#receivedDate').text(formatDate(acknoaccept.recevied_data) || 'N/A');
    //                 $('#letteref').text(acknoaccept.letter_ref_no || 'N/A');
    //                 $('#comments').text(acknoaccept.comments || 'No Comments');
                    
    //                 var fileUploadPath = acknoaccept.file_upload;
    //                 if (fileUploadPath) {
    //                     var fileType = getFileType(fileUploadPath);
    //                     var fileUrl = '{{ asset('storage/') }}' + '/' + fileUploadPath;

    //                     // Display the actual file name as the link text and make it red
    //                     $('#fileLink').text(fileUploadPath.split('/').pop()).show().css('color', 'red');

    //                     $('#fileLink').off('click').on('click', function(e) {
    //                         e.preventDefault();

    //                         if (fileType.startsWith('image/')) {
    //                             $('#modalImage').attr('src', fileUrl);
    //                             var imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
    //                             imageModal.show();
    //                         } else if (fileType === 'application/pdf') {
    //                             $('#modalPdf').attr('src', fileUrl);
    //                             var pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
    //                             pdfModal.show();
    //                         } else {
    //                             alert('Unsupported file type');
    //                         }
    //                     });
    //                 } else {
    //                     $('#fileLink').text('No file available').hide();
    //                 }

    //                 var tbody = $('#trackingHistoryTable');
    //                 tbody.empty();

    //                 if (departments.length > 0) {
    //                     departments.forEach(function(department, index) {
    //                         var status = department.acknowledged === 1 ? 'Letter Sent' : 'Not Ack';
    //                         var row = `
    //                             <tr>
    //                                 <th scope="row">${index + 1}</th>
    //                                 <td>${acknoaccept.sendername_designation || ''}</td>
    //                                 <td>${department.departmentname || 'Unknown Department'}</td>
    //                                 <td>${formatDate(acknoaccept.created_at) || ''}</td>
    //                                 <td></td>
    //                                 <td>${acknoaccept.comments || ''}</td>
    //                                 <td></td>
    //                                 <td>${status}</td> 
    //                             </tr>`;
    //                         tbody.append(row);
    //                     });
    //                 } else {
    //                     var emptyRow = `
    //                         <tr>
    //                             <td colspan="8">No department data available.</td>
    //                         </tr>`;
    //                     tbody.append(emptyRow);
    //                 }

    //                 $('#inwardModal').modal('show');
    //             },
    //             error: function(xhr) {
    //                 console.error(xhr.responseText);
    //                 alert('Error fetching data.');
    //             }
    //         });
    //     });

    //     function getFileType(filePath) {
    //         var extension = filePath.split('.').pop().toLowerCase();
    //         var mimeTypes = {
    //             'jpg': 'image/jpeg',
    //             'jpeg': 'image/jpeg',
    //             'png': 'image/png',
    //             'gif': 'image/gif',
    //             'pdf': 'application/pdf'
    //         };
    //         return mimeTypes[extension] || 'application/octet-stream';
    //     }
    // });
    $(document).ready(function() {
    $(document).on('click', '.open-modal', function() {
        var inwardId = $(this).data('id');

        $.ajax({
            url: '/acknoacceptlist/' + inwardId,
            type: 'GET',
            success: function(response) {
                var acknoaccept = response.acknoaccept;
                var departments = response.departments;

                // Function to format date as dd-mm-yyyy
                function formatDate(dateString) {
                    if (!dateString) return 'N/A'; 
                    const date = new Date(dateString);
                    const day = ('0' + date.getDate()).slice(-2);
                    const month = ('0' + (date.getMonth() + 1)).slice(-2);
                    const year = date.getFullYear();
                    return `${day}-${month}-${year}`;
                }

                // Set text or default 'N/A' if no data is available
                $('#inwardId').text(acknoaccept.formatted_id || 'N/A');
                $('#subject').text(acknoaccept.subject || 'N/A');
                $('#receivedDate').text(formatDate(acknoaccept.recevied_data) || 'N/A');
                $('#letteref').text(acknoaccept.letter_ref_no || 'N/A');
                $('#comments').text(acknoaccept.comments || 'No Comments');

                // Handle file link
                var fileUploadPath = acknoaccept.file_upload;
                var fileLinkElement = $('#fileLink');
                if (fileUploadPath) {
                    var fileType = getFileType(fileUploadPath);
                    var fileUrl = '{{ asset('storage/') }}' + '/' + fileUploadPath;

                    // Display the actual file name as the link text and make it red
                    fileLinkElement.text(fileUploadPath.split('/').pop()).css('color', 'red').show();

                    // Add click event to open file based on type
                    fileLinkElement.off('click').on('click', function(e) {
                        e.preventDefault();

                        if (fileType.startsWith('image/')) {
                            $('#modalImage').attr('src', fileUrl);
                            var imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
                            imageModal.show();
                        } else if (fileType === 'application/pdf') {
                            $('#modalPdf').attr('src', fileUrl);
                            var pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
                            pdfModal.show();
                        } else {
                            alert('Unsupported file type');
                        }
                    });
                } else {
                    // Ensure the table structure stays consistent
                    fileLinkElement.text('No file available').css('color', 'black').show();
                }

                // Populate tracking history
                var tbody = $('#trackingHistoryTable');
                tbody.empty();

                if (departments.length > 0) {
                    departments.forEach(function(department, index) {
                        var status = department.acknowledged === 1 ? 'Letter Sent' : 'Not Ack';
                        var row = `
                            <tr>
                                <th scope="row">${index + 1}</th>
                                <td>${acknoaccept.sendername_designation || ''}</td>
                                <td>${department.departmentname || 'Unknown Department'}</td>
                                <td>${formatDate(acknoaccept.created_at) || ''}</td>
                                <td>${acknoaccept.file_upload ? fileLinkElement.text() : 'No file available'}</td>
                                <td>${acknoaccept.comments || 'No comments'}</td>
                                <td></td>
                                <td>${status}</td> 
                            </tr>`;
                        tbody.append(row);
                    });
                } else {
                    var emptyRow = `
                        <tr>
                            <td colspan="8">No department data available.</td>
                        </tr>`;
                    tbody.append(emptyRow);
                }

                $('#inwardModal').modal('show');
            },
            error: function(xhr) {
                console.error(xhr.responseText);
                alert('Error fetching data.');
            }
        });
    });

    // Helper function to get file type from the file extension
    function getFileType(filePath) {
        var extension = filePath.split('.').pop().toLowerCase();
        var mimeTypes = {
            'jpg': 'image/jpeg',
            'jpeg': 'image/jpeg',
            'png': 'image/png',
            'gif': 'image/gif',
            'pdf': 'application/pdf'
        };
        return mimeTypes[extension] || 'application/octet-stream';
    }
});

</script>






  <script>
$(document).ready(function() {
    $(document).on("click", ".btn-revoke", function(e) {
        e.preventDefault(); 

    
        var userId = $(this).data("id"); 
console.log(userId);
        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to revoke this Forward?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, revoke it!',
            cancelButtonText: 'No, cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("outward.revoke") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        user_Id: userId,
                        
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                'Revoked!',
                                'Department revoked successfully.',
                                'success'
                            ).then(() => {
                                location.reload(); 
                            });
                        } else {
                            Swal.fire(
                                'Failed!',
                                'Failed to revoke department.',
                                'error'
                            );
                        }
                    },
                    error: function(xhr) {
                        console.log("Error revoking department", xhr);
                        Swal.fire(
                            'Error!',
                            'An error occurred. Please try again.',
                            'error'
                        );
                    }
                });
            }
        });
    });
});
</script>