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

@endphp

<x-admin.layout>
    <x-slot name="title">Acknowlege List </x-slot>
    <x-slot name="heading">Acknowlege List</x-slot>
    <style>
    .btn-custom {
        width: 100px;  /* Set a consistent width for all buttons */
        padding: 8px 12px;  /* Consistent padding */
        font-size: 14px;  /* Consistent font size */
        text-align: center; /* Ensure text is centered */
    }
</style>

   <meta name="csrf-token" content="{{ csrf_token() }}">
    <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>From Whom</th>
                                    <th>Sendername</th>
                                    <th>Subject</th>
                                    <th>Receive Date</th>
                                    <th>Created On</th>
                                    <th>Send On</th>
                                    @if (auth()->user()->subdepartment_id === null) 
                                        <th>Send</th>
                                    @endif
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($inward_datas as $index=>$inward)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $inward->formatted_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>
                        
                                        @if (auth()->user()->subdepartment_id === null) 
                                            <td>
                                                @if ($inward->subdepartment == 0)
                                                    <button class="btn btn-success rem-element px-2 py-1 send-button" 
                                                        title="Send" 
                                                        data-id="{{ $inward->id }}">
                                                        <i class="ri-mail-send-fill fs-16"></i> Send
                                                    </button>
                                                @else
                                                    <button class="btn btn-danger rem-element px-2 py-1 send-button" 
                                                        title="Send" 
                                                        data-id="{{ $inward->id }}" 
                                                        disabled>
                                                        <i class="ri-mail-send-fill fs-16"></i> Send
                                                    </button>
                                                @endif
                                            </td>
                                        @endif
                        
                                        <td>
                                            <button class="btn btn-primary btn-custom px-2 py-1" title="View" data-id="{{ $inward->id }}">View</button>    
                                            <button class="edit-element btn btn-custom" style="
                                                background-color: {{ $inward->acknowlege ? 'green' : 'red' }};
                                                border-color: {{ $inward->acknowlege ? 'green' : 'red' }};
                                                color: {{ $inward->acknowlege ? 'black' : 'white' }};" 
                                                data-id="{{ $inward->id }}" data-user-id="{{ Auth::user()->department_id }}"
                                                @if($inward->acknowlege && !is_array($inward->acknowlege)) disabled @endif>
                                                {{ $inward->acknowlege ? 'Accepted' : 'Accept' }}
                                            </button>
                        
                                            <button class="btn btn-primary btn-revoke btn-custom" title="Revoke Department" data-id="{{ $inward->id }}" data-user-id="{{ $user->department_id }}">Revoke</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

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



<div class="modal fade" id="rem-element-modal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Select Other Department or Department User</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="">
                
                <ul class="nav nav-tabs" id="departmentTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="department-tab" data-bs-toggle="tab" href="#department" role="tab" aria-controls="department" aria-selected="true">Other Department</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="subdepartment-tab" data-bs-toggle="tab" href="#subdepartment" role="tab" aria-controls="subdepartment" aria-selected="false">Department User</a>
                    </li>
                </ul>
                
                <div class="tab-content" id="departmentTabsContent">
                    <!-- Departments Tab -->
                    <div class="tab-pane fade show active" id="department" role="tabpanel" aria-labelledby="department-tab">
                        <div class="col-sm-12">
                            <div class="card">
                                <form class="theme-form" name="updateForm" id="updateForm" enctype="multipart/form-data">
                                    @csrf
                                    <div class="card-body">
                                        <div class="live-preview">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($department as $dep)
                                                        <tr>
                                                            <td>
                                                                <input type="checkbox" name="department_id[]" value="{{ $dep->id }}" id="department_{{ $dep->id }}">
                                                            </td>
                                                            <td>
                                                                <label for="department_{{ $dep->id }}">{{ $dep->departmentname }}</label>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <div class="invalid-feedback" style="display: none;">
                                                Please select at least one department.
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Submit Button inside the form -->
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary" id="addSubmit">Send</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Sub-Departments Tab -->
                    <div class="tab-pane fade" id="subdepartment" role="tabpanel" aria-labelledby="subdepartment-tab">
                        <div class="col-sm-12">
                            <div class="card">
                                <form class="theme-form" name="updateSubForm" id="updateSubForm" enctype="multipart/form-data">
                                    @csrf
                                    <div class="card-body">
                                        <div class="live-preview">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($subdepartments as $subdep)
                                                        <tr>
                                                            <td>
                                                                <input type="checkbox" name="subdepartment_id[]" value="{{ $subdep->id }}" id="subdepartment_{{ $subdep->id }}">
                                                            </td>
                                                            <td>
                                                                <label for="subdepartment_{{ $subdep->id }}">{{ $subdep->subdepartmentname }}</label>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <div class="invalid-feedback" style="display: none;">
                                                Please select at least one sub-department.
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Submit Button inside the form -->
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary" id="addSubSubmit">Send</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </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">Outward 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="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 class="col-xxl-3 col-md-6">
                                                    <div id="departmentDropdown" class="form-group" style="display:none;">
                                                        <label for="department">Select Department<span class="text-danger">*</span></label>
                                                         <input type="text" readonly class="form-control" id="department" name="department" value="">
                                                    </div>
                                                    
                                                    <div id="organisationTextbox" class="form-group" style="display:none;">
                                                        <label for="organisation">Enter Organisation<span class="text-danger">*</span></label>
                                                        <input type="text" id="organisation" name="organisation" class="form-control">
                                                    </div>
                                                
                                                    <div id="vipDropdown" class="form-group" style="display:none;">
                                                        <label for="vip">Select VIP<span class="text-danger">*</span></label>
                                                        <input type="text" id="vip" name="vip" class="form-control">
                                                    </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</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</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</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</label>
                                                        <textarea type="text" readonly class="form-control" id="comments" name="comments"  value=""></textarea>
                                                    </div>
                                                </div>

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

                                {{-- </form> --}}
                            </div>
                        </div>

                    </div>

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

  <script>
   


$(document).ready(function() {

    // Event delegation to handle dynamic elements
    $(document).on("click", ".rem-element", function(e) {
        e.preventDefault();

        // Fetch the inward_id from the button's data-id attribute
        var inward_id = $(this).attr("data-id");

        // Set the hidden input value with the inward_id
        $('#inward_id').val(inward_id);

        // Show the modal
        $('#rem-element-modal').modal('show');
    });

    // Form submission logic for the update form
    $('#updateForm, #updateSubForm').on('submit', function(e) {
        e.preventDefault(); 

        // Hide any existing error message and remove invalid styles
        $('.invalid-feedback').hide();
        $('input[type="checkbox"]').removeClass('is-invalid');

        // Determine which tab is active (Other Department or Department User)
        var activeTab = $('#departmentTabs .nav-link.active').attr('id');

        // Variables to hold selected department or sub-department IDs
        var departmentIds = [];
        var subDepartmentIds = [];

        // If "Other Department" tab is active
        if (activeTab === 'department-tab') {
            // Collect selected department IDs from checkboxes
            $('input[name="department_id[]"]:checked').each(function() {
                departmentIds.push($(this).val());
            });
        }

        // If "Department User" tab is active
        if (activeTab === 'subdepartment-tab') {
            // Collect selected sub-department IDs from checkboxes
            $('input[name="subdepartment_id[]"]:checked').each(function() {
                subDepartmentIds.push($(this).val());
            });
        }

        // Fetch the inward_id from the hidden input
        var inwardId = $('#inward_id').val();

        // Check if at least one department or sub-department is selected
        if (departmentIds.length === 0 && subDepartmentIds.length === 0) {
            // Show an error if no departments or sub-departments are selected
            $('input[type="checkbox"]').addClass('is-invalid');
            $('.invalid-feedback').show();
        } else {
            // SweetAlert2 Confirmation dialog before submitting the form
            Swal.fire({
                title: 'Are you sure?',
                text: 'Do you want to update the inward status and selected departments or sub-departments?',
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                dangerMode: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    // AJAX request to update the inward status
                    var url = '{{ url("inwardfile") }}/' + inwardId;

                    var dataToSend = {
                        _token: $('input[name="_token"]').val(),
                        department_id: departmentIds.length > 0 ? departmentIds : null,
                        subdepartment_id: subDepartmentIds.length > 0 ? subDepartmentIds : null,
                    };

                    $.ajax({
                        url: url, 
                        type: 'PUT', 
                        data: dataToSend,  // Send selected department or sub-department IDs
                        success: function(response) {
                            // Hide the modal upon successful submission
                            $('#rem-element-modal').modal('hide');

                            // Show success message using SweetAlert2
                            Swal.fire('Success!', 'Inward status and departments or sub-departments updated successfully!', 'success')
                            .then(() => {
                                // Reload the page after success
                                location.reload();  
                            });
                        },
                        error: function(xhr, status, error) {
                            // Show error message in case of failure
                            Swal.fire('Error!', 'Failed to update inward status. Please try again.', 'error');
                        }
                    });
                }
            });
        }
    });

});


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

        var departmentId = $(this).data("id"); 
        var userId = $(this).data("user-id");
// console.log(departmentId);
        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to revoke this department?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, revoke it!',
            cancelButtonText: 'No, cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("department.revoke") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        user_Id: departmentId,
                        department_Id:userId
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                'Revoked!',
                                'Department revoked successfully.',
                                'success'
                            ).then(() => {
                                location.reload(); // Reload the page on success
                            });
                        } 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>
<script>

$(document).ready(function() {
    $(document).on("click", ".edit-element", function(e) {
        e.preventDefault();

        var inwardId = $(this).data("id");
        var userId = $(this).data("user-id");
        var button = $(this);

        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to acknowledge this item?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, acknowledge it!',
            cancelButtonText: 'No, cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("update.acknowledge") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: inwardId,
                        user_id: userId
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                'Acknowledged!',
                                'Item acknowledged successfully.',
                                'success'
                            ).then(() => {
                                button.text('Accepted');
                                button.prop('disabled', true);

                                // Refresh the page after the Swal alert is closed
                                window.location.reload(); // Page will reload here
                            });
                        } else {
                            Swal.fire(
                                'Failed!',
                                'Failed to acknowledge item.',
                                'error'
                            );
                        }
                    },
                    error: function(xhr) {
                        console.log("Error acknowledging item", xhr);
                        Swal.fire(
                            'Error!',
                            'An error occurred. Please try again.',
                            'error'
                        );
                    }
                });
            }
        });
    });
});

</script>
<script>
function handleFieldDisplay(fromwhom) {
        // Hide all fields by default
        $('#departmentDropdown').hide();
        $('#organisationTextbox').hide();
        $('#vipDropdown').hide();

        // Show the relevant field based on `fromwhom` value
        switch (fromwhom) {
            case 'Department':
                $('#departmentDropdown').show();
                break;
            case 'Organisation':
                $('#organisationTextbox').show();
                break;
            case 'VIP':
                $('#vipDropdown').show();
                break;
            case 'General':
                // No additional fields to show for 'General'
                break;
        }
    }
$("#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);
             $('#department').val(response.data.extname);
            $('#email').val(response.data.email);
            $('#comments').val(response.data.comments);
            $('input[name="fromwhom"][value="' + response.data.fromwhom + '"]').prop('checked', true);

            handleFieldDisplay(response.data.fromwhom);
            // 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>
<script>
$(document).ready(function() {
    // Listen for changes in the department checkboxes
    $('input[name="department_id[]"]').change(function() {
        // Get the selected department ID
        var selectedDepartmentId = $(this).val();

        if (this.checked) {
            // Fetch subdepartments when a department is selected
            $.ajax({
                url: '/get-subdepartments', // URL to the backend function
                type: 'GET',
                data: {
                    department_id: selectedDepartmentId
                },
                success: function(response) {
                    // Clear the existing subdepartment checkboxes
                    $('#subdepartment tbody').empty();

                    // Access the subdepartments array from the response
                    var subdepartments = response.subdepartments;

                    // Check if there are any subdepartments
                    if (subdepartments.length > 0) { // Check if there are any records
                        // Loop through each subdepartment and append to the table
                        $.each(subdepartments, function(index, subdepartment) {
                            console.log(subdepartment); // Log each subdepartment object for debugging

                            // Create a new checkbox row for each subdepartment
                            var checkbox = `
                                <tr>
                                    <td>
                                        <input type="checkbox" name="subdepartment_id[]" value="${subdepartment.id}" id="subdepartment_${subdepartment.id}">
                                    </td>
                                    <td>
                                        <label for="subdepartment_${subdepartment.id}">${subdepartment.subdepartmentname}</label>
                                    </td>
                                </tr>
                            `;
                            $('#subdepartment tbody').append(checkbox); // Append the checkbox row to the table
                        });
                    } else {
                        // If no subdepartments are available
                        $('#subdepartment tbody').append('<tr><td colspan="2">No sub-departments available for this department.</td></tr>');
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert('Error fetching subdepartments.');
                }
            });
        } else {
            // If the department is deselected, clear the subdepartments
            $('#subdepartment tbody').empty();
        }
    });
});





//   $(document).ready(function() {
//     // Listen for changes in the department checkboxes
//     $('input[name="department_id[]"]').change(function() {
//         // Get the selected department ID
//         var selectedDepartmentId = $(this).val();

//         if (this.checked) {
//             // Fetch subdepartments when a department is selected
//             $.ajax({
//                 url: '/get-subdepartments', // URL to the backend function
//                 type: 'GET',
//                 data: {
//                     department_id: selectedDepartmentId
//                 },
//                 success: function(response) {
//                   // Check if data is received correctly
//                     // Clear the existing subdepartment checkboxes
//                     $('#subdepartment tbody').empty();

//                     // Check if there are any subdepartments
//                     // if (response.length = 0) {
                        
//                         // Loop through each subdepartment and append to the table
//                         $.each(response, function(index, subdepartment) {
//                               console.log(subdepartment[0].subdepartmentname);
//                             var checkbox = `
//                                 <tr>
//                                     <td>
//                                         <input type="checkbox" name="subdepartment_id[]" value="${subdepartment[0].id}" id="subdepartment_${subdepartment[0].id}">
//                                     </td>
//                                     <td>
//                                         <label for="subdepartment_${subdepartment[0].id}">${subdepartment[0].subdepartmentname}</label>
//                                     </td>
//                                 </tr>
//                             `;
//                             $('#subdepartment tbody').append(checkbox);
//                         });
//                     // } else {
//                     //     // If no subdepartments are available
//                     //     $('#subdepartment tbody').append('<tr><td colspan="2">No sub-departments available for this department.</td></tr>');
//                     // }
//                 },
//                 error: function(xhr) {
//                     console.error(xhr.responseText);
//                     alert('Error fetching subdepartments.');
//                 }
//             });
//         } else {
//             // If the department is deselected, clear the subdepartments
//             $('#subdepartment tbody').empty();
//         }
//     });
// });


</script>