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

@endphp
<x-admin.layout>
    <x-slot name="title"> Accept List</x-slot>
    <x-slot name="heading"> Accept List</x-slot>
    {{-- <x-slot name="subheading">Test</x-slot> --}}
    <style>
         .form-check-label {
            color: black;
        }

        /* Ensure labels stay black when the radio button is disabled */
        .form-check-input:disabled + .form-check-label {
            color: black; /* Label color */
            opacity: 1; /* Ensure label is fully opaque */
        }

        /* Optional: Style for disabled radio buttons */
        .form-check-input:disabled {
            cursor: not-allowed; /* Indicate disabled state */
        }
         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>
<form method="GET" action="{{ route('outwardfile.index') }}">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="filter_date" class="form-label">Select Date:</label>
                    <input type="date" class="form-control" id="filter_date" name="filter_date" value="{{ request('filter_date') }}">
                </div>
                        
            
            <div class="col-md-3 align-self-end">
                <button type="submit" class="btn btn-primary">Filter</button>
            </div>
        </div>
    </form>

    <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>Inward No.</th>
                                    <th>Department Name</th>
                                    <th>From Whom</th>
                                    <th>Sendername</th>
                                    <th>Subject</th>
                                    <th>Receive Date</th>
                                    <th>Created On</th>
                                    <th>Send On</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($acknowlege_list_datas as $index => $inward)
                                    @php
                                        // Decode the department_ids from the Inward record
                                        $departmentIds = json_decode($inward->department_id, true);
                                    @endphp
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $inward->formatted_id }}</td>
                                        <td>
                                            @foreach ($departmentIds as $index => $id)
                                                @if (isset($departments[$id]))
                                                    {{ $departments[$id]->departmentname }}
                                                @else
                                                    Unknown Department
                                                @endif
                                        
                                                @if (!$loop->last)
                                                    @if ($index % 2 == 1)
                                                        <br>
                                                    @else
                                                        ,
                                                    @endif
                                                @endif
                                            @endforeach
                                        </td>

                                        

                                        <td>{{ $inward->fromwhom }}</td>
                                        <td>{{ $inward->sendername_designation }}</td>
                                        <!--<td>{{ $inward->subject }}</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 btn-primary change-password px-2 py-1" title="View" data-id="{{ $inward->id }}">
                                                <i class="ri-eye-fill fs-16"></i> View
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>

                            <!--<tbody>-->
                            <!--    @foreach ($acknowlege_list_datas as $index=>$inward)-->
                            <!--        <tr>-->
                            <!--              <td>{{ $index + 1 }}</td>-->
                            <!--            <td>{{ $inward->formatted_id }}</td>-->
                            <!--            <td>{{$inward->department_id}}</td>-->
                            <!--            <td>{{ $inward->fromwhom }}</td>-->
                                        
                            <!--            <td>{{ $inward->sendername_designation }}</td>-->
                            <!--            <td>{{ $inward->subject }}</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 btn-primary change-password px-2 py-1" title="View" data-id="{{ $inward->id }}">-->
                            <!--                        <i class="ri-eye-fill fs-16"></i> View-->
                            <!--                </button>-->
                            <!--            </td>-->
                            <!--        </tr>-->
                            <!--    @endforeach-->
                            <!--</tbody>-->
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade " id="change-password-modal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form action="" id="changePasswordForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Inward Details</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <input type="hidden" id="inward_id" name="inward_id" value="">

                        <div class="col-sm-12">
                            <div class="card">
                                {{-- <form class="theme-form" name="addForm" id="addForm" enctype="multipart/form-data">
                                    @csrf --}}

                                    <div class="card-body">
                                        <div class="live-preview">
                                            <div class="row gy-4">
                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="basiInput" class="form-label">Delivery Mode<span class="text-danger">*</span></label>

                                                        <select  class="form-select" id="delivery_id" name="delivery_id" aria-label="Delivery Mode" disabled>
                                                            <option disabled>--- Select Delivery Mode ---</option>
                                                            @foreach ($deliverymode_data as $deliverymode)
                                                                <option value="{{ $deliverymode->id }}">{{ $deliverymode->modename }}</option>
                                                            @endforeach
                                                        </select>

                                                    </div>
                                                </div>

                                                <!--<div class="col-xxl-3 col-md-6">-->
                                                <!--    <div>-->
                                                <!--        <label for="basiInput" class="form-label">Letter Type<span class="text-danger">*</span></label>-->
                                                <!--        <select class="form-select" id="letter_id" name="letter_id" aria-label="Delivery Mode" disabled>-->
                                                <!--            <option disabled selected>--- Select Letter Type ---</option>-->
                                                <!--            @foreach ($lettertypes as $lettertype)-->
                                                <!--                <option value="{{ $lettertype->id }}">{{ $lettertype->lettertype }}</option>-->
                                                <!--            @endforeach-->
                                                <!--        </select>-->
                                                <!--    </div>-->
                                                <!--</div>-->
                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="usertype" class="form-label">User Type<span class="text-danger">*</span></label>
                                                        <input type="text" readonly id="usertype" name="usertype" class="form-control" id="exampleInputpassword" value="">
                                                    </div>
                                                </div>
                                                <div class="col-xxl-3 col-md-6">
                                                   
                                                     <div>
                                                        <label for="fromwhom" class="form-label">From Whom<span class="text-danger">*</span></label>
                                                        <br>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox1" value="General" disabled>
                                                            <label class="form-check-label" for="inlineCheckbox1">General</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox2" value="Department" disabled>
                                                            <label class="form-check-label" for="inlineCheckbox2">Department</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox3" value="Organisation" disabled>
                                                            <label class="form-check-label" for="inlineCheckbox3">Organisation</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="fromwhom" type="radio" id="inlineCheckbox4" value="VIP" disabled>
                                                            <label class="form-check-label" for="inlineCheckbox4">VIP</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                    <div class="card-body">
                                        <div class="live-preview">
                                            <div class="row gy-4">
                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="ward_id" class="form-label">Ward<span class="text-danger">*</span></label>
                                                        <select class="form-select" id="ward_id" name="ward_id" aria-label="ward" disabled>
                                                            <option disabled selected>--- Select ward ---</option>
                                                            @foreach ($wards as $ward)
                                                                <option value="{{ $ward->id }}">{{ $ward->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="subject" class="form-label">Subject<span class="text-danger">*</span></label>
                                                        <input type="text" readonly class="form-control" id="subject" name="subject" value="">
                                                    </div>
                                                </div>

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="sendername_designation" class="form-label">Sender Name/Designation<span class="text-danger">*</span></label>
                                                        <input type="text" readonly class="form-control" id="sendername_designation" name="sendername_designation" value="">
                                                    </div>
                                                </div>

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="letter_ref_no" class="form-label">Letter Ref. Number</label>
                                                        <input type="text" readonly class="form-control" id="letter_ref_no" name="letter_ref_no" value="">
                                                    </div>
                                                </div>

                                            </div>
                                            <!--end row-->
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <div class="live-preview">
                                            <div class="row gy-4">
                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="recevied_data" class="form-label">Recevied Date<span class="text-danger">*</span></label>
                                                        <input type="date" readonly class="form-control" id="recevied_data" name="recevied_data">
                                                    </div>
                                                </div>


                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="letter_date" class="form-label">Letter Date<span class="text-danger">*</span></label>
                                                        <input type="date" readonly class="form-control" id="letter_date" name="letter_date">
                                                    </div>
                                                </div>

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="daily_date" class="form-label">Daily Date<span class="text-danger">*</span></label>
                                                        <input type="date" readonly class="form-control" id="daily_date" name="daily_date">
                                                    </div>
                                                </div>


                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="file_upload" class="form-label">File Upload</label>

                                                        <button type="button" class="btn btn-secondary mt-2" id="viewFileButton" >
                                                            <i class="ri-eye-fill fs-16"></i> View
                                                        </button>
                                                    </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>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="card-body">
                                        <div class="live-preview">
                                            <div class="row gy-4">

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="mobile" class="form-label">Mobile<span class="text-danger">*</span></label>
                                                        <input type="text" readonly class="form-control" id="mobile" name="mobile" value="">
                                                    </div>
                                                </div>

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="email" class="form-label">Email<span class="text-danger">*</span></label>
                                                        <input type="text" readonly class="form-control" id="email" name="email" value="">
                                                    </div>
                                                </div>

                                                <div class="col-xxl-3 col-md-6">
                                                    <div>
                                                        <label for="comments" class="form-label">Comments<span class="text-danger">*</span></label>
                                                        <textarea type="text" readonly class="form-control" id="comments" name="comments"  value=""></textarea>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <br>


                                    </div>



                            </div>
                        </div>

                    </div>

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

</x-admin.layout>

<script>

$("#buttons-datatables").on("click", ".change-password", function(e) {
    e.preventDefault();

    var inward_id = $(this).attr("data-id");

    $('#inward_id').val(inward_id);
    $('#change-password-modal').modal('show');

    $.ajax({
        url: '{{ route("outwardfile.edit", ":id") }}'.replace(':id', inward_id),
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log(response.data);

            // Populate form fields with response data
            $('#usertype').val(response.data.usertype);
            $('#delivery_id').val(response.data.delivery_id).trigger('change');
            $('#letter_id').val(response.data.letter_id).trigger('change');
            $('#ward_id').val(response.data.ward_id).trigger('change');
            $('#subject').val(response.data.subject);
            $('#sendername_designation').val(response.data.sendername_designation);
            $('#letter_ref_no').val(response.data.letter_ref_no);
            $('#recevied_data').val(response.data.recevied_data);
            $('#letter_date').val(response.data.letter_date);
            $('#daily_date').val(response.data.daily_date);
            $('#mobile').val(response.data.mobile);
            $('#email').val(response.data.email);
            $('#comments').val(response.data.comments);
            $('input[name="fromwhom"][value="' + response.data.fromwhom + '"]').prop('checked', true);

            // Function to get MIME type from 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'
                    // Add more mappings as needed
                };
                return mimeTypes[extension] || 'application/octet-stream'; // Default to octet-stream for unknown types
            }

            // Handle file display
            var fileUploadPath = response.data.file_upload;
            if (fileUploadPath) {
                var fileType = getFileType(fileUploadPath); // Determine the MIME type from file path
                var fileUrl = '{{ asset('storage/') }}' + '/' + fileUploadPath;

                if (fileType.startsWith('image/')) {
                    $('#modalImage').attr('src', fileUrl);
                    $('#viewFileButton').text('View Image').show();
                    $('#viewFileButton').off('click').on('click', function() {
                        var imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
                        imageModal.show();
                    });
                } else if (fileType === 'application/pdf') {
                    $('#modalPdf').attr('src', fileUrl);
                    $('#viewFileButton').text('View PDF').show();
                    $('#viewFileButton').off('click').on('click', function() {
                        var pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
                        pdfModal.show();
                    });
                } else {
                    $('#viewFileButton').hide();
                }
            } else {
                $('#viewFileButton').hide();
            }
        },
        error: function(xhr) {
            console.log("Error fetching data");
        }
    });
});

</script>