@extends('layout.master')

@push('plugin-styles')
  <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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
@endpush

<style>
  .stat-card {
    border-left: 4px solid;
    transition: transform 0.3s ease;
  }
  
  .stat-card.total {
    border-left-color: #007bff;
  }
  
  #fileApiTable {
    font-size: 0.8rem;
  }
  
  #fileApiTable th,
  #fileApiTable td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
  }
  
  .btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  /* Drag and drop styles */
  .dropzone {
    border: 2px dashed #007bff;
    border-radius: 5px;
    padding: 25px;
    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: #28a745;
    background-color: #e2f3e8;
  }

  .dropzone p {
    margin-bottom: 0;
    color: #6c757d;
  }

  .dropzone i {
    font-size: 48px;
    color: #007bff;
    margin-bottom: 10px;
  }

  .file-info {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #495057;
  }

  /* Drag indicator styles */
  .drag-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  .drag-indicator-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 500px;
  }
  
  .drag-indicator i {
    font-size: 50px;
    color: #007bff;
    margin-bottom: 20px;
  }
</style>

@section('content')
<!-- Drag indicator (only for roles 7 and 8) -->
@if(in_array($userRole, [7, 8]))
<div class="drag-indicator" id="dragIndicator">
  <div class="drag-indicator-content">
    <i class="fas fa-cloud-upload-alt"></i>
    <h3>Drop file to upload</h3>
    <p>Release your file here to open the upload modal</p>
  </div>
</div>
@endif

<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">API Management</a></li>
    <li class="breadcrumb-item active" aria-current="page">File Upload API</li>
  </ol>
</nav>

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@elseif (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">File Upload API</h6>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div>
            <div class="input-group">
              <span class="input-group-text"><i class="fas fa-search"></i></span>
              <input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Search files...">
            </div>
          </div>

          @if(in_array($userRole, [7, 8]))
          <div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadFileModal">
              <i class="fas fa-plus me-2"></i> Upload New File
            </button>
          </div>
          @endif
        </div>
        <div class="table-responsive">
          <table id="fileApiTable" class="table table-sm">
            <thead>  
              <tr>
                <th>#</th>
                <th>File Name</th>
                <th>Revision</th>
                <th>Type</th>
                <th>Upload Date</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <!-- Data will be loaded via AJAX -->
            </tbody>
          </table>
          
          <div class="mt-3">
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-sm justify-content-center" id="paginationLinks">
                <!-- Pagination will be loaded via AJAX -->
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Upload File Modal -->
<div class="modal fade" id="uploadFileModal" tabindex="-1" aria-labelledby="uploadFileModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadFileModalLabel">Upload New File</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="uploadFileForm" method="POST" action="/simple-file-specs" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label for="file_name" class="form-label">File Name *</label>
            <input type="text" class="form-control" id="file_name" name="file_name" required>
          </div>
          <div class="mb-3">
            <label for="revision" class="form-label">Revision *</label>
            <input type="text" class="form-control" id="revision" name="revision" required>
            <small class="text-muted">Example: v1.0, 2023-07, etc.</small>
          </div>
          
          <!-- Drag and drop area -->
          <div class="dropzone" id="fileDropzone">
            <i class="fas fa-cloud-upload-alt"></i>
            <p>Drag & drop your file here or click to browse</p>
            <div class="file-info" id="fileInfo"></div>
            <input type="file" class="d-none" id="upload_file" name="file" required>
          </div>
          <small class="text-muted">Max file size: 100MB</small>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Upload File</button>
        </div>
      </form>
    </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() {
    let currentPage = 1;
    const perPage = 10;

    // Initialize the table
    function loadFiles(page = 1, search = '') {
        currentPage = page;
        const url = search ? 
            `/simple-file-specs?search=${search}&page=${page}` : 
            `/simple-file-specs?page=${page}`;
        
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                const files = response.data || [];
                
                // Render table rows
                renderTableRows(files, response);
                
                // Render pagination using API's pagination data
                renderPagination(response);
            },
            error: function(xhr) {
                Swal.fire('Error!', 'Failed to load files', 'error');
            }
        });
    }

    // Render table rows with revision
    function renderTableRows(files, response) {
        const tbody = $('#fileApiTable tbody');
        tbody.empty();
        
        if (files.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h5>No Files Found</h5>
                    </td>
                </tr>
            `);
            return;
        }
        
        files.forEach((file, index) => {
            const fileExt = file.file_path.split('.').pop().toLowerCase();
            const rowNumber = (response.current_page - 1) * response.per_page + index + 1;
            const uploadDate = new Date(file.created_at);
            const formattedDate = uploadDate.toLocaleDateString() + ' ' + uploadDate.toLocaleTimeString();
            
            tbody.append(`
                <tr>
                    <td>${rowNumber}</td>
                    <td>${file.name}</td>
                    <td>${file.revision || 'N/A'}</td>
                    <td>${fileExt.toUpperCase()}</td>
                    <td>${formattedDate}</td>
                    <td>
                        <div class="d-flex align-items-center" style="gap: 0.35rem;">
                            <button class="btn btn-info btn-action view-file" title="View" data-id="${file.id}" data-type="${fileExt}">
                                <i class="fas fa-eye"></i>
                            </button>
                              @if(in_array($userRole, [7, 8]))
                            <a href="/${file.file_path}" download class="btn btn-success btn-action" title="Download">
                                <i class="fas fa-download"></i>
                            </a>
                        
                            <button class="btn btn-danger btn-action delete-file" title="Delete" data-id="${file.id}">
                                <i class="fas fa-trash"></i>
                            </button>
                            @endif
                        </div>
                    </td>
                </tr>
            `);
        });
    }

    // Render pagination using API's pagination data
    function renderPagination(response) {
        const pagination = $('#paginationLinks');
        pagination.empty();
        
        // Don't show pagination if only one page
        if (response.last_page <= 1) return;
        
        // Previous button
        const prevDisabled = !response.prev_page_url ? 'disabled' : '';
        pagination.append(`
            <li class="page-item ${prevDisabled}">
                <a class="page-link" href="#" data-page="${response.current_page - 1}">
                    &laquo; Previous
                </a>
            </li>
        `);
        
        // Page numbers
        for (let i = 1; i <= response.last_page; i++) {
            const active = i === response.current_page ? 'active' : '';
            pagination.append(`
                <li class="page-item ${active}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>
            `);
        }
        
        // Next button
        const nextDisabled = !response.next_page_url ? 'disabled' : '';
        pagination.append(`
            <li class="page-item ${nextDisabled}">
                <a class="page-link" href="#" data-page="${response.current_page + 1}">
                    Next &raquo;
                </a>
            </li>
        `);
    }

    // Search functionality
    $('#searchInput').on('input', function() {
        const searchTerm = $(this).val().trim();
        if (searchTerm.length > 2 || searchTerm.length === 0) {
            loadFiles(1, searchTerm);
        }
    });

    // Pagination click handler
    $(document).on('click', '.page-link', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page) {
            loadFiles(page, $('#searchInput').val().trim());
        }
    });

    // Delete file handler
    $(document).on('click', '.delete-file', function() {
        const fileId = $(this).data('id');
        const fileName = $(this).closest('tr').find('td:eq(1)').text();
        
        Swal.fire({
            title: 'Are you sure?',
            text: `You are about to delete "${fileName}".`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/simple-file-specs/${fileId}`,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function() {
                        Swal.fire('Deleted!', 'The file has been deleted.', 'success');
                        loadFiles(currentPage, $('#searchInput').val().trim());
                    },
                    error: function() {
                        Swal.fire('Error!', 'Failed to delete the file.', 'error');
                    }
                });
            }
        });
    });

    // Drag and drop functionality for modal
    const dropzone = document.getElementById('fileDropzone');
    const fileInput = document.getElementById('upload_file');
    const fileInfo = document.getElementById('fileInfo');

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

    // Handle file selection
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length) {
            updateFileInfo(e.target.files[0]);
        }
    });

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropzone.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);

    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) {
            fileInput.files = files;
            updateFileInfo(files[0]);
        }
    }

    function updateFileInfo(file) {
        // Check file size (100MB max)
        const maxSize = 100 * 1024 * 1024; // 100MB
        if (file.size > maxSize) {
            fileInfo.innerHTML = `<div class="text-danger">File too large (max 100MB)</div>`;
            fileInput.value = ''; // Clear the input
            return;
        }

        fileInfo.innerHTML = `
            <div>
                <strong>${file.name}</strong><br>
                Size: ${formatFileSize(file.size)}<br>
                Type: ${file.type || 'Unknown'}
            </div>
        `;
    }

    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];
    }

    // File upload form
    $('#uploadFileForm').submit(function(e) {
        e.preventDefault();
        const form = $(this);
        const submitBtn = form.find('button[type="submit"]');
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Uploading...');
        
        // Check if a file is selected
        if (!fileInput.files.length) {
            Swal.fire('Error!', 'Please select a file to upload', 'error');
            submitBtn.prop('disabled', false).html('Upload File');
            return;
        }
        
        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(response) {
                $('#uploadFileModal').modal('hide');
                form.trigger('reset');
                fileInfo.innerHTML = '';
                Swal.fire('Success!', 'File uploaded successfully', 'success');
                loadFiles(currentPage);
            },
            error: function(xhr) {
                let errorMessage = 'Failed to upload file';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire('Error!', errorMessage, 'error');
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('Upload File');
            }
        });
    });

    // Drag-to-upload functionality (only for roles 7 and 8)
    @if(in_array($userRole, [7, 8]))
    const dragIndicator = document.getElementById('dragIndicator');
    const uploadModal = new bootstrap.Modal(document.getElementById('uploadFileModal'));
    
    // Prevent default drag behaviors on entire window
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        document.addEventListener(eventName, preventDefaults, false);
    });
    
    // Show drag indicator when dragging files over window
    ['dragenter', 'dragover'].forEach(eventName => {
        document.addEventListener(eventName, function(e) {
            // Only show if dragging files (not text or other elements)
            if (e.dataTransfer.types.indexOf('Files') >= 0) {
                dragIndicator.style.display = 'flex';
            }
        }, false);
    });
    
    // Hide drag indicator when leaving window
    ['dragleave', 'drop'].forEach(eventName => {
        document.addEventListener(eventName, function() {
            dragIndicator.style.display = 'none';
        }, false);
    });
    
    // Handle file drop on window
    document.addEventListener('drop', function(e) {
        if (e.dataTransfer.files.length) {
            // Show the upload modal
            uploadModal.show();
            
            // Set the dropped file to the file input
            fileInput.files = e.dataTransfer.files;
            
            // Update file info display
            updateFileInfo(e.dataTransfer.files[0]);
        }
    }, false);
    @endif

    // Initialize the table on page load
    loadFiles();
});
</script>
@endpush