@extends('layout.master')

<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    .video-preview img {
        width: 180px !important;
        height: 100px !important; 
        object-fit: cover !important; 
        border-radius: 8px !important; 
        display: block !important;
    }
    /* Make sure the preview column has a fixed width */
    th:nth-child(4), td:nth-child(4) {
        width: 180px; /* Adjust based on your thumbnail size */
        text-align: center;
    }
    td:nth-child(3) { /* Target the Description column (3rd column) */
        white-space: normal !important; /* Allow text to wrap */
        word-wrap: break-word !important; /* Break long words */
        max-width: 300px; /* Set a max-width to control wrapping */
    }
    .nav-tabs .nav-link {
        font-weight: 600;
        color: #6c757d;
    }
    .nav-tabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 2px solid #0d6efd;
    }
    .tab-content {
        padding: 20px 0;
    }
    .document-icon {
        font-size: 24px;
        margin-right: 10px;
        color: #6c757d;
    }
    .file-download-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .document-preview-container {
        width: 100%;
        height: 500px;
        margin-bottom: 20px;
    }
    .document-preview-container iframe {
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
    /* Drag and Drop Styles */
    .dropzone {
        border: 2px dashed #0d6efd;
        border-radius: 5px;
        padding: 30px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: #f8f9fa;
        margin-bottom: 15px;
    }
    
    .dropzone:hover {
        background-color: #e9ecef;
    }
    
    .dropzone.active {
        border-color: #198754;
        background-color: #e2f3e8;
    }
    
    .dropzone i {
        font-size: 48px;
        color: #0d6efd;
        margin-bottom: 10px;
    }
    
    .dropzone p {
        margin-bottom: 5px;
        color: #6c757d;
    }
    
    .file-info {
        margin-top: 15px;
        padding: 10px;
        background-color: #f1f1f1;
        border-radius: 5px;
        display: none;
    }
    
    .file-info.show {
        display: block;
    }
    
    .file-info .file-name {
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .file-info .file-size {
        color: #6c757d;
        font-size: 0.9em;
    }
    
    .file-input-label {
        display: none;
    }
</style>

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Training</a></li>
      <li class="breadcrumb-item active" aria-current="page">Manage Materials</li>
    </ol>
</nav>
  
<div class="container mt-1">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Manage Training Materials</h2>
        <div>
            <a href="{{ route('training.admin-video.create') }}" class="btn btn-primary"><i class="fas fa-video"></i> Add Video</a>
            <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                <i class="fas fa-file"></i> Add Document
            </a>
        </div>
    </div>
    
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    
    <div class="row mb-3">
        <div class="col-md-12 mx-auto">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos-tab-pane" type="button" role="tab" aria-controls="videos-tab-pane" aria-selected="true">
                                <i class="fas fa-video me-2"></i>Videos
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents-tab-pane" type="button" role="tab" aria-controls="documents-tab-pane" aria-selected="false">
                                <i class="fas fa-file me-2"></i>Documents
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <!-- Videos Tab -->
                        <div class="tab-pane fade show active" id="videos-tab-pane" role="tabpanel" aria-labelledby="videos-tab" tabindex="0">
                            <div class="table-responsive mt-3">
                                <table id="videosTable" class="table table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>Preview</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($videos as $index => $video)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $video->title }}</td>
                                                <td>{{ $video->description }}</td>
                                                <td>
                                                    @if($video->youtube_link)
                                                    <a href="{{ $video->youtube_link }}" target="_blank" class="video-preview">
                                                        <img src="https://img.youtube.com/vi/{{ getYoutubeVideoId($video->youtube_link) }}/hqdefault.jpg" alt="YouTube Thumbnail">
                                                    </a>
                                                    @else
                                                        <span class="text-muted">No preview available</span>
                                                    @endif
                                                </td>                                        
                                                <td>
                                                    <a href="{{ route('training.admin-video.edit', $video->id) }}" class="btn btn-warning btn-sm">
                                                        <i class="fas fa-edit"></i> Edit
                                                    </a>
                                                    <button class="btn btn-danger btn-sm delete-video-btn" data-id="{{ $video->id }}">
                                                        <i class="fas fa-trash"></i> Delete
                                                    </button>
                                                    <form id="delete-video-form-{{ $video->id }}" action="{{ route('training.admin-video.delete', $video->id) }}" method="POST" style="display: none;">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                </td>                                        
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Documents Tab -->
                        <div class="tab-pane fade" id="documents-tab-pane" role="tabpanel" aria-labelledby="documents-tab" tabindex="0">
                            <div class="table-responsive mt-3">
                                <table id="documentsTable" class="table table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>File</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($documents as $index => $document)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $document->title }}</td>
                                            <td>{{ $document->description }}</td>
                                            <td class="text-center">
                                                @if($document->document)
                                                    @php
                                                        $fileExtension = pathinfo($document->document, PATHINFO_EXTENSION);
                                                        $icon = '';
                                                        $color = '';
                                                        
                                                        switch(strtolower($fileExtension)) {
                                                            case 'pdf':
                                                                $icon = 'file-pdf';
                                                                $color = 'text-danger';
                                                                break;
                                                            case 'doc':
                                                            case 'docx':
                                                                $icon = 'file-word';
                                                                $color = 'text-primary';
                                                                break;
                                                            case 'xls':
                                                            case 'xlsx':
                                                                $icon = 'file-excel';
                                                                $color = 'text-success';
                                                                break;
                                                            case 'ppt':
                                                            case 'pptx':
                                                                $icon = 'file-powerpoint';
                                                                $color = 'text-warning';
                                                                break;
                                                            default:
                                                                $icon = 'file';
                                                                $color = 'text-secondary';
                                                        }
                                                    @endphp
                                                    <a href="#" class="file-download-link {{ $color }} view-document-btn" 
                                                       data-id="{{ $document->id }}" 
                                                       data-url="{{ asset('storage/'.$document->document) }}">
                                                        <i class="fas fa-{{ $icon }} document-icon"></i>
                                                        View
                                                    </a>
                                                @else
                                                    <span class="text-muted">No file attached</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button class="btn btn-warning btn-sm edit-document-btn" 
                                                        data-id="{{ $document->id }}"
                                                        data-title="{{ $document->title }}"
                                                        data-description="{{ $document->description }}">
                                                    <i class="fas fa-edit"></i> Edit
                                                </button>
                                                <button class="btn btn-danger btn-sm delete-document-btn" data-id="{{ $document->id }}">
                                                    <i class="fas fa-trash"></i> Delete
                                                </button>
                                                <form id="delete-document-form-{{ $document->id }}" action="{{ route('training.admin-document.delete', $document->id) }}" method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Document Modal -->
<div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('training.admin-document.store') }}" method="POST" enctype="multipart/form-data" id="addDocumentForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="addDocumentModalLabel">Add New Document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="documentTitle" class="form-label">Title *</label>
                        <input type="text" class="form-control" id="documentTitle" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="documentDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="documentDescription" name="description" rows="3"></textarea>
                    </div>
                    
                    <!-- Drag and Drop Area -->
                    <div class="mb-3">
                        <label class="form-label">Document File *</label>
                        <div class="dropzone" id="documentDropzone">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Drag & drop your file here or click to browse</p>
                            <p class="small text-muted">Supported formats: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT</p>
                            <p class="small text-muted">Max file size: 10MB</p>
                            <div class="file-info" id="fileInfo">
                                <div class="file-name"></div>
                                <div class="file-size"></div>
                            </div>
                            <input type="file" class="file-input-label" id="documentFile" name="document" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Document</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Document Modal -->
<div class="modal fade" id="editDocumentModal" tabindex="-1" aria-labelledby="editDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="editDocumentForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editDocumentModalLabel">Edit Document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editDocumentTitle" class="form-label">Title *</label>
                        <input type="text" class="form-control" id="editDocumentTitle" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="editDocumentDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="editDocumentDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editDocumentFile" class="form-label">Document File</label>
                        <input type="file" class="form-control" id="editDocumentFile" name="document" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt">
                        <div class="form-text">Leave blank to keep existing file. Allowed file types: PDF, Word, Excel, PowerPoint, Text (Max: 10MB)</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Document</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Document Modal -->
<div class="modal fade" id="viewDocumentModal" tabindex="-1" aria-labelledby="viewDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewDocumentModalLabel">Document Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="document-preview-container">
                    <iframe id="documentPreviewFrame" src="" frameborder="0"></iframe>
                </div>
                <div class="text-center mt-3">
                    <a href="#" id="downloadDocumentLink" class="btn btn-primary">
                        <i class="fas fa-download"></i> Download Document
                    </a>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
  $(document).ready(function () {
    // Initialize DataTables
    $('#videosTable, #documentsTable').DataTable({
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search...",
        }
    });
    
    // SweetAlert configuration
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    });

    @if(session('success'))
        Toast.fire({
            icon: 'success',
            title: '{{ session('success') }}'
        });
    @endif

    @if(session('error'))
        Toast.fire({
            icon: 'error',
            title: '{{ session('error') }}'
        });
    @endif

    // Delete video with SweetAlert confirmation
    $(document).on('click', '.delete-video-btn', function(e) {
        e.preventDefault();
        const id = $(this).data('id');
        const form = $('#delete-video-form-'+id);
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading indicator
                Swal.fire({
                    title: 'Deleting...',
                    html: 'Please wait while we delete the video.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                        // Submit the form via AJAX
                        $.ajax({
                            url: form.attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: 'Video has been deleted successfully.',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    // Reload the page after successful deletion
                                    window.location.reload();
                                });
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON.message || 'Failed to delete video',
                                });
                            }
                        });
                    }
                });
            }
        });
    });

    // Delete document with SweetAlert confirmation
    $(document).on('click', '.delete-document-btn', function(e) {
        e.preventDefault();
        const id = $(this).data('id');
        const form = $('#delete-document-form-'+id);
        
        Swal.fire({
            title: 'Are you sure?',
            text: "This document will be permanently deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Delete',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading indicator
                Swal.fire({
                    title: 'Deleting...',
                    html: 'Please wait while we delete the document.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                        // Submit the form via AJAX
                        $.ajax({
                            url: form.attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: 'Document has been deleted successfully.',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    // Reload the page after successful deletion
                                    window.location.reload();
                                });
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: xhr.responseJSON.message || 'Failed to delete document',
                                });
                            }
                        });
                    }
                });
            }
        });
    });

    // Drag and Drop Functionality
    const dropzone = document.getElementById('documentDropzone');
    const fileInput = document.getElementById('documentFile');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = fileInfo.querySelector('.file-name');
    const fileSize = fileInfo.querySelector('.file-size');

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropzone.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

    // Highlight drop zone when item is dragged over it
    ['dragenter', 'dragover'].forEach(eventName => {
        dropzone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropzone.addEventListener(eventName, unhighlight, false);
    });

    // Handle dropped files
    dropzone.addEventListener('drop', handleDrop, false);

    // Click on dropzone to trigger file input
    dropzone.addEventListener('click', () => {
        fileInput.click();
    });

    // Handle file selection via input
    fileInput.addEventListener('change', function(e) {
        if (this.files.length) {
            handleFiles(this.files);
        }
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function highlight() {
        dropzone.classList.add('active');
    }

    function unhighlight() {
        dropzone.classList.remove('active');
    }

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        
        if (files.length) {
            handleFiles(files);
            fileInput.files = files;
        }
    }

    function handleFiles(files) {
        const file = files[0];
        
        // Check file size (10MB max)
        const maxSize = 10 * 1024 * 1024; // 10MB
        if (file.size > maxSize) {
            Swal.fire({
                icon: 'error',
                title: 'File too large',
                text: 'Maximum file size is 10MB',
            });
            return;
        }
        
        // Check file type
        const allowedTypes = ['application/pdf', 
                             'application/msword', 
                             'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                             'application/vnd.ms-excel',
                             'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                             'application/vnd.ms-powerpoint',
                             'application/vnd.openxmlformats-officedocument.presentationml.presentation',
                             'text/plain'];
        
        if (!allowedTypes.includes(file.type)) {
            Swal.fire({
                icon: 'error',
                title: 'Invalid file type',
                text: 'Please upload only PDF, Word, Excel, PowerPoint, or Text files',
            });
            return;
        }
        
        // Update file info display
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        fileInfo.classList.add('show');
    }

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // Document form validation with SweetAlert
    $('#addDocumentForm').on('submit', function(e) {
        e.preventDefault();
        const form = this;
        
        // Check if a file is selected
        if (!fileInput.files.length) {
            Swal.fire({
                icon: 'error',
                title: 'No file selected',
                text: 'Please select a document file to upload',
            });
            return false;
        }
        
        // Check file size again (in case it was changed after selection)
        const file = fileInput.files[0];
        const maxSize = 10 * 1024 * 1024; // 10MB
        if (file.size > maxSize) {
            Swal.fire({
                icon: 'error',
                title: 'File too large',
                text: 'Maximum file size is 10MB',
            });
            return false;
        }

        Swal.fire({
            title: 'Uploading Document',
            text: 'Please wait while we save your document...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
                form.submit();
            }
        });
    });

    // Edit document modal handler
    $(document).on('click', '.edit-document-btn', function() {
        const id = $(this).data('id');
        const title = $(this).data('title');
        const description = $(this).data('description');
        
        $('#editDocumentTitle').val(title);
        $('#editDocumentDescription').val(description);
        
        // Use the named route with the ID parameter
        $('#editDocumentForm').attr('action', "{{ route('training.admin-document.update', '') }}/" + id);
        
        $('#editDocumentModal').modal('show');
    });

    // Edit document form submission
    $('#editDocumentForm').on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        const formData = new FormData(form[0]);
        
        Swal.fire({
            title: 'Updating Document',
            text: 'Please wait...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
                
                $.ajax({
                    url: form.attr('action'),
                    type: 'POST', // Main request method
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-HTTP-Method-Override': 'PUT' // Override to PUT
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: 'Document updated successfully',
                        }).then(() => {
                            window.location.reload();
                        });
                    },
                    error: function(xhr) {
                        let errorMsg = 'Update failed';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        } else if (xhr.responseText) {
                            errorMsg = xhr.responseText;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg,
                        });
                    }
                });
            }
        });
    });

    // View document modal handler
    $(document).on('click', '.view-document-btn', function(e) {
        e.preventDefault();
        const documentUrl = $(this).data('url');
        
        // Set the iframe source and download link
        $('#documentPreviewFrame').attr('src', documentUrl);
        $('#downloadDocumentLink').attr('href', documentUrl);
        
        // Show the modal
        $('#viewDocumentModal').modal('show');
    });

    // Success message for document upload
    @if(session('document_uploaded'))
        Swal.fire({
            icon: 'success',
            title: 'Document Uploaded!',
            text: '{{ session('document_uploaded') }}',
            confirmButtonText: 'OK'
        });
    @endif

    // Success message for document update
    @if(session('document_updated'))
        Swal.fire({
            icon: 'success',
            title: 'Document Updated!',
            text: '{{ session('document_updated') }}',
            confirmButtonText: 'OK'
        });
    @endif
  });
</script>
@endpush