@extends('layout.master')

@push('plugin-styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endpush

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="page-header bg-gradient-danger text-white mb-4">
        <div class="container-fluid">
            <div class="d-flex align-items-center py-4">
                <div class="header-icon mr-4">
                    <i class="fas fa-cloud-upload-alt fa-3x text-white"></i>
                </div>
                <div>
                    <h2 class="mb-2 font-weight-bold text-white">Upload PPM Files</h2>
                    <p class="mb-0 opacity-90 h5 text-white">Upload PDF, Word, and Excel files</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0 border-danger" style="border: 2px solid #dc3545 !important;">
                <div class="card-header bg-danger text-white">
                    <h4 class="mb-0"><i class="fas fa-file-upload mr-2"></i>PPM File Upload Form</h4>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('ppm_files.store') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                        @csrf

                        <!-- File Information Section -->
                        <div class="mb-4 p-3" style="border-radius: 10px; border: 2px solid #dc3545;">
                            <h5 class="text-danger mb-3 font-weight-bold">
                                <i class="fas fa-info-circle mr-2"></i>File Information
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="file_name" class="text-danger font-weight-bold">File Name <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               class="form-control border-danger @error('file_name') is-invalid @enderror" 
                                               id="file_name" 
                                               name="file_name" 
                                               placeholder="Enter file name"
                                               value="{{ old('file_name') }}"
                                               required
                                               style="border-color: #dc3545 !important;">
                                        @error('file_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="upload_date" class="text-danger font-weight-bold">Upload Date <span class="text-danger">*</span></label>
                                        <input type="date" 
                                               class="form-control border-danger @error('upload_date') is-invalid @enderror" 
                                               id="upload_date" 
                                               name="upload_date" 
                                               value="{{ old('upload_date', date('Y-m-d')) }}"
                                               required
                                               style="border-color: #dc3545 !important;">
                                        @error('upload_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ppmtype" class="text-danger font-weight-bold">PPM Type <span class="text-danger">*</span></label>
                                        <select class="form-control border-danger @error('ppmtype') is-invalid @enderror" 
                                                id="ppmtype" 
                                                name="ppmtype" 
                                                required
                                                style="border-color: #dc3545 !important;">
                                            <option value="">Select PPM Type</option>
                                            <option value="1-month" {{ old('ppmtype') == '1-month' ? 'selected' : '' }}>1 Month PPM</option>
                                            <option value="3-month" {{ old('ppmtype') == '3-month' ? 'selected' : '' }}>3 Month PPM</option>
                                            <option value="6-month" {{ old('ppmtype') == '6-month' ? 'selected' : '' }}>6 Month PPM</option>
                                            <option value="YPM" {{ old('ppmtype') == 'YPM' ? 'selected' : '' }}>Yearly PPM (YPM)</option>
                                        </select>
                                        @error('ppmtype')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status" class="text-danger font-weight-bold">Status <span class="text-danger">*</span></label>
                                        <select class="form-control border-danger @error('status') is-invalid @enderror" 
                                                id="status" 
                                                name="status" 
                                                required
                                                style="border-color: #dc3545 !important;">
                                            <option value="">Select Status</option>
                                            <option value="completed" {{ old('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                            <option value="outstanding" {{ old('status') == 'outstanding' ? 'selected' : '' }}>Outstanding</option>
                                            <option value="in_plan" {{ old('status') == 'in_plan' ? 'selected' : '' }}>In Plan</option>
                                            <option value="in_progress" {{ old('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="crane_name" class="text-danger font-weight-bold">Select Crane <span class="text-danger">*</span></label>
                                        <select name="crane_id" id="crane_id" class="form-control border-danger @error('crane_id') is-invalid @enderror" required style="border-color: #dc3545 !important;">
                                            <option value="">-- Select Crane --</option>
                                            @isset($cranes)
                                                @foreach($cranes as $crane)
                                                    <option value="{{ $crane->id }}" {{ old('crane_id') == $crane->id ? 'selected' : '' }}>
                                                        {{ $crane->company_name ?? 'N/A' }}{{ $crane->serial_no ?? 'No Serial' }}
                                                    </option>
                                                @endforeach
                                            @endisset
                                        </select>
                                        @error('crane_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="work_order" class="text-danger font-weight-bold">Work Order <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               class="form-control border-danger @error('work_order') is-invalid @enderror" 
                                               id="work_order" 
                                               name="work_order" 
                                               placeholder="Enter work order number"
                                               value="{{ old('work_order') }}"
                                               required
                                               style="border-color: #dc3545 !important;">
                                        @error('work_order')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="description" class="text-danger font-weight-bold">Description</label>
                                        <textarea class="form-control border-danger @error('description') is-invalid @enderror" 
                                                  id="description" 
                                                  name="description" 
                                                  rows="3" 
                                                  placeholder="Enter file description (optional)"
                                                  style="border-color: #dc3545 !important;">{{ old('description') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- File Upload Section -->
                        <div class="mb-4 p-3" style="border-radius: 10px; border: 2px solid #dc3545;">
                            <h5 class="text-danger mb-3 font-weight-bold">
                                <i class="fas fa-upload mr-2"></i>File Upload
                            </h5>

                            <div class="upload-zone border-danger" id="uploadZone" style="border-color: #dc3545 !important;">
                                <div class="text-center">
                                    <i class="fas fa-file-upload fa-4x text-danger mb-3"></i>
                                    <h5 class="text-danger">Drop file here or click to browse</h5>
                                    <p class="text-danger">PDF, Word, and Excel files only (Max: 10MB)</p>
                                    
                                    <input type="file" 
                                           class="d-none @error('file') is-invalid @enderror" 
                                           id="file_upload" 
                                           name="file"
                                           accept=".pdf,.doc,.docx,.xls,.xlsx"
                                           required>
                                    <button type="button" class="btn btn-danger" onclick="document.getElementById('file_upload').click()">
                                        <i class="fas fa-folder-open mr-2"></i>Choose File
                                    </button>
                                </div>
                            </div>
                            @error('file')
                                <div class="text-danger mt-2">{{ $message }}</div>
                            @enderror

                            <!-- Selected File Display -->
                            <div class="selected-file mt-3" id="selectedFile" style="display: none;">
                                <h6 class="mb-2">Selected File</h6>
                                <div id="fileDisplay"></div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="text-center">
                            <button type="submit" class="btn btn-danger btn-lg px-5" id="submitBtn">
                                <i class="fas fa-upload mr-2"></i>
                                <span>Upload File</span>
                                <div class="spinner-border spinner-border-sm ml-2 d-none" id="loadingSpinner"></div>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- File Type Info -->
            <div class="supported-files mt-4">
                <h6 class="text-primary mb-3 text-center"><i class="fas fa-info-circle mr-2"></i>Supported File Types</h6>
                <div class="row text-center">
                    <div class="col-md-4 mb-3">
                        <div class="file-type-card p-3">
                            <i class="fas fa-file-pdf fa-3x text-danger mb-3"></i>
                            <h6 class="font-weight-bold">PDF Files</h6>
                            <p class="text-muted mb-0">.pdf</p>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="file-type-card p-3">
                            <i class="fas fa-file-word fa-3x text-primary mb-3"></i>
                            <h6 class="font-weight-bold">Word Files</h6>
                            <p class="text-muted mb-0">.doc, .docx</p>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="file-type-card p-3">
                            <i class="fas fa-file-excel fa-3x text-success mb-3"></i>
                            <h6 class="font-weight-bold">Excel Files</h6>
                            <p class="text-muted mb-0">.xls, .xlsx</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
body {
    background-color: #f8f9fa;
}

.page-header {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.upload-zone {
    border: 2px dashed #dc3545;
    border-radius: 10px;
    padding: 40px 20px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: #c82333;
    background: #fff5f5;
    transform: translateY(-2px);
}

.upload-zone.dragover {
    border-color: #c82333;
    background: #fff5f5;
    border-style: solid;
}

.file-item {
    background: white;
    border: 1px solid #dc3545;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.file-info {
    display: flex;
    align-items: center;
}

.file-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 16px;
}

.remove-file {
    background: #dc3545;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.remove-file:hover {
    background: #c82333;
    transform: scale(1.1);
}

.form-control:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-control.border-danger:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.card {
    border-radius: 15px;
    overflow: hidden;
}

.btn-danger {
    transition: all 0.3s ease;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.header-icon {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.supported-files {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    padding: 20px;
}

.file-type-card {
    transition: all 0.3s ease;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.file-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
</style>
@endsection

@push('plugin-scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('file_upload');
    const selectedFile = document.getElementById('selectedFile');
    const fileDisplay = document.getElementById('fileDisplay');
    const uploadForm = document.getElementById('uploadForm');
    const submitBtn = document.getElementById('submitBtn');
    const loadingSpinner = document.getElementById('loadingSpinner');

    // Allowed file types
    const allowedTypes = {
        'application/pdf': { name: 'PDF', icon: 'fas fa-file-pdf', color: '#dc3545' },
        'application/msword': { name: 'Word', icon: 'fas fa-file-word', color: '#007bff' },
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { name: 'Word', icon: 'fas fa-file-word', color: '#007bff' },
        'application/vnd.ms-excel': { name: 'Excel', icon: 'fas fa-file-excel', color: '#28a745' },
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': { name: 'Excel', icon: 'fas fa-file-excel', color: '#28a745' }
    };

    // Check file extension as fallback
    function getFileTypeByExtension(filename) {
        const ext = filename.split('.').pop().toLowerCase();
        const extTypes = {
            'pdf': { name: 'PDF', icon: 'fas fa-file-pdf', color: '#dc3545' },
            'doc': { name: 'Word', icon: 'fas fa-file-word', color: '#007bff' },
            'docx': { name: 'Word', icon: 'fas fa-file-word', color: '#007bff' },
            'xls': { name: 'Excel', icon: 'fas fa-file-excel', color: '#28a745' },
            'xlsx': { name: 'Excel', icon: 'fas fa-file-excel', color: '#28a745' }
        };
        return extTypes[ext] || null;
    }

    // File validation
    function validateFile(file) {
        // Check file type
        const fileType = allowedTypes[file.type] || getFileTypeByExtension(file.name);
        if (!fileType) {
            Swal.fire({
                icon: 'error',
                title: 'Invalid File Type',
                text: `File "${file.name}" is not supported. Only PDF, Word, and Excel files are allowed.`,
                confirmButtonColor: '#dc3545'
            });
            return false;
        }

        // Check file size (10MB)
        if (file.size > 10 * 1024 * 1024) {
            Swal.fire({
                icon: 'error',
                title: 'File Too Large',
                text: `File "${file.name}" exceeds the 10MB size limit.`,
                confirmButtonColor: '#dc3545'
            });
            return false;
        }

        return true;
    }

    // Display selected file
    function displayFile(file) {
        if (file && validateFile(file)) {
            selectedFile.style.display = 'block';
            const fileType = allowedTypes[file.type] || getFileTypeByExtension(file.name);
            const fileSize = (file.size / 1024 / 1024).toFixed(2);
            
            fileDisplay.innerHTML = `
                <div class="file-item">
                    <div class="file-info">
                        <div class="file-icon" style="background-color: ${fileType.color}">
                            <i class="${fileType.icon}"></i>
                        </div>
                        <div>
                            <div class="font-weight-bold">${file.name}</div>
                            <small class="text-muted">${fileSize}MB • ${fileType.name}</small>
                        </div>
                    </div>
                    <button type="button" class="remove-file" id="removeFile">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;

            // Add remove event listener
            document.getElementById('removeFile').addEventListener('click', function() {
                fileInput.value = '';
                selectedFile.style.display = 'none';
                
                // Show removal notification
                Swal.fire({
                    icon: 'info',
                    title: 'File Removed',
                    text: 'The selected file has been removed.',
                    timer: 2000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            });
        } else {
            selectedFile.style.display = 'none';
        }
    }

    // Drag and drop events
    uploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadZone.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadZone.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadZone.classList.remove('dragover');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            const file = files[0]; // Only take the first file
            if (validateFile(file)) {
                // Create a new FileList with just this file
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                fileInput.files = dataTransfer.files;
                displayFile(file);
            }
        }
    });

    // File input change
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            displayFile(this.files[0]);
        } else {
            selectedFile.style.display = 'none';
        }
    });

    // Click to upload
    uploadZone.addEventListener('click', function(e) {
        if (e.target.type !== 'button') {
            fileInput.click();
        } 
    });

    // Form submission with loading state
    uploadForm.addEventListener('submit', function(e) {
        // Show loading
        submitBtn.disabled = true;
        loadingSpinner.classList.remove('d-none');
        
        // Show processing notification
        Swal.fire({
            icon: 'info',
            title: 'Processing...',
            text: 'Your file is being uploaded. Please wait.',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
    });

    // Remove validation errors on input
    uploadForm.addEventListener('input', function(e) {
        if (e.target.classList.contains('is-invalid')) {
            e.target.classList.remove('is-invalid');
        }
    });

    // Laravel session-based SweetAlert messages
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: '{{ session('success') }}',
            confirmButtonColor: '#28a745',
            timer: 3000,
            showConfirmButton: false
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: '{{ session('error') }}',
            confirmButtonColor: '#dc3545'
        });
    @endif

    @if($errors->any())
        let errorMessages = [];
        @foreach($errors->all() as $error)
            errorMessages.push('{{ addslashes($error) }}');
        @endforeach
        
        Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            html: errorMessages.join('<br>'),
            confirmButtonColor: '#dc3545'
        });
    @endif

    // Show welcome message only on first visit (no errors)
    @if(!$errors->any() && !session('success') && !session('error'))
        Swal.fire({
            icon: 'info',
            title: 'Welcome!',
            text: 'Please fill in the required information and select a file to upload.',
            confirmButtonColor: '#dc3545',
            timer: 3000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
    @endif
});
</script>
@endsection