@extends('layouts.app')

@section('content')
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ breadcrumb ] start -->
                        <div class="page-header">
                            <div class="page-block">
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <div class="page-header-title">
                                            <h5 class="m-b-10">Maintenance Records</h5>
                                        </div>
                                        <ul class="breadcrumb">
                                            <li class="breadcrumb-item">
                                                <a href="{{ route('home') }}"><i class="feather icon-home"></i></a>
                                            </li>
                                            <li class="breadcrumb-item"><a href="#">Inventory</a></li>
                                            <li class="breadcrumb-item"><a href="#">Maintenance</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- [ breadcrumb ] end -->

                        <!-- Success/Error Messages -->
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>Success!</strong> {{ session('success') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <strong>Error!</strong> {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <strong>Please fix the following errors:</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        {{-- Item Information Card --}}
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Item Information</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-box"></i> Item Name:</strong><br>
                                            <span class="text-primary" >{{ $serial->inventory->name ?? 'N/A' }}</span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-barcode"></i> Serial Number:</strong><br>
                                            <span class="text-primary" >{{ $serial->serialNo ?? 'N/A' }}</span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-tag"></i> Tag Number:</strong><br>
                                            <span class="text-primary">{{ $serial->tagNumber ?? 'N/A' }}</span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-map-marker-alt"></i> Location:</strong><br>
                                            <span class="text-primary">{{ $serial->location->name ?? ($serial->inventory->location->name ?? 'N/A') }}</span>
                                        </div>
                                    </div>
                                    {{-- Replace the holder section in your blade template with this: --}}
                                    <div class="row mt-3">
                                        @if($serial->idHolder)
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-user"></i> Current Holder:</strong><br>
                                            <span class="text-primary">{{ $serial->idHolder->name }}</span>
                                        </div>
                                        @endif
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-info-circle"></i> Status:</strong><br>
                                            <span class="text-primary" >
                                                {{ $serial->status }}
                                            </span>
                                        </div>
                                        @if($serial->inventory->brand)
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-industry"></i> Brand:</strong><br>
                                            <span class="text-primary">{{ $serial->inventory->brand }}</span>
                                        </div>
                                        @endif
                                        @if($serial->inventory->category)
                                        <div class="col-md-3">
                                            <strong><i class="fas fa-tags"></i> Category:</strong><br>
                                            <span class="text-primary">{{ $serial->inventory->category->name }}</span>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Add New Maintenance Form --}}
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-tools"></i> Add New Maintenance Record</h5>
                                </div>
                                <div class="card-body">
                                    <form method="POST" action="{{ route('maintenance.store', [$inventoryId, $serial->id]) }}" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="maintenance_type">Maintenance Type <span class="text-danger">*</span></label>
                                                    <select class="form-control @error('maintenance_type') is-invalid @enderror" 
                                                            id="maintenance_type" name="maintenance_type" required>
                                                        <option value="" disabled selected>Select Maintenance Type</option>
                                                        <option value="corrective" {{ old('maintenance_type') === 'corrective' ? 'selected' : '' }}>
                                                            Corrective Maintenance
                                                        </option>
                                                        <option value="preventive" {{ old('maintenance_type') === 'preventive' ? 'selected' : '' }}>
                                                            Preventive Maintenance
                                                        </option>
                                                    </select>
                                                    @error('maintenance_type')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                    <small class="form-text text-muted">
                                                        Corrective: Repair after breakdown | Preventive: Scheduled maintenance
                                                    </small>
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="maintenance_date">Maintenance Date <span class="text-danger">*</span></label>
                                                    <input type="date" class="form-control @error('maintenance_date') is-invalid @enderror" 
                                                           id="maintenance_date" name="maintenance_date" 
                                                           value="{{ old('maintenance_date', date('Y-m-d')) }}" required>
                                                    @error('maintenance_date')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="description">Description <span class="text-danger">*</span></label>
                                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                                      id="description" name="description" rows="4" 
                                                      placeholder="Describe the maintenance work performed..." required>{{ old('description') }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="cost">Cost (RM)</label>
                                                    <input type="number" step="0.01" min="0" max="999999.99" 
                                                           class="form-control @error('cost') is-invalid @enderror" 
                                                           id="cost" name="cost" placeholder="0.00" 
                                                           value="{{ old('cost') }}">
                                                    @error('cost')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="performed_by">Performed By <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control @error('performed_by') is-invalid @enderror" 
                                                           id="performed_by" name="performed_by" 
                                                           placeholder="Name of person who performed maintenance" 
                                                           value="{{ old('performed_by') }}" required>
                                                    @error('performed_by')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="status">Status <span class="text-danger">*</span></label>
                                                    <select class="form-control @error('status') is-invalid @enderror" 
                                                            id="status" name="status" required>
                                                        <option value="pending" {{ old('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                                                        <option value="in_progress" {{ old('status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                                        <option value="completed" {{ old('status', 'completed') === 'completed' ? 'selected' : '' }}>Completed</option>
                                                        <option value="cancelled" {{ old('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                                    </select>
                                                    @error('status')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="attachment">Attachment (Image/PDF)</label>
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input @error('attachment') is-invalid @enderror" 
                                                               id="attachment" name="attachment" accept=".jpg,.jpeg,.png,.gif,.pdf">
                                                        <label class="custom-file-label" for="attachment">Choose file...</label>
                                                    </div>
                                                    @error('attachment')
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                    <small class="form-text text-muted">
                                                        <i class="fas fa-info-circle"></i> Supported formats: JPG, JPEG, PNG, GIF, PDF. Max size: 10MB
                                                    </small>
                                                    
                                                    {{-- File Preview --}}
                                                    <div id="file-preview" class="mt-2" style="display: none;">
                                                        <div class="alert alert-info py-2">
                                                            <i class="fas fa-file"></i> <span id="file-name"></span>
                                                            <small class="text-muted">(<span id="file-size"></span>)</small>
                                                            <button type="button" class="btn btn-sm btn-outline-danger float-right" onclick="clearFileInput()">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="feather icon-save"></i> Save Maintenance Record
                                            </button>
                                            <button type="button" class="btn btn-secondary" onclick="window.history.back()">
                                                <i class="feather icon-x"></i> Cancel
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        {{-- Maintenance History --}}
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-history"></i> Maintenance History</h5>
                                </div>
                                <div class="card-body">
                                    @if($maintenances->count() > 0)
                                        <div class="dt-responsive table-responsive">
                                            <table class="table table-striped table-bordered nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>Date</th>
                                                        <th>Type</th>
                                                        <th>Description</th>
                                                        <th>Cost (RM)</th>
                                                        <th>Performed By</th>
                                                        <th>Status</th>
                                                        <th>Attachment</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($maintenances as $index => $maintenance)
                                                    <tr>
                                                        <td class="text-center">{{ $index + 1 }}</td>
                                                        <td>{{ $maintenance->maintenance_date->format('d/m/Y') }}</td>
                                                        <td>
                                                            <span class="{{ $maintenance->maintenance_type === 'corrective' ? 'warning' : 'info' }}">
                                                                {{ $maintenance->formatted_type }}
                                                            </span>
                                                        </td>
                                                        <td>{{ $maintenance->description }}</td>
                                                        <td>
                                                            @if($maintenance->cost)
                                                                {{ number_format($maintenance->cost, 2) }}
                                                            @else
                                                                <span class="text-muted">-</span>
                                                            @endif
                                                        </td>
                                                        <td>{{ $maintenance->performed_by }}</td>
                                                        <td>
                                                            <span class="badge badge-{{ 
                                                                $maintenance->status === 'completed' ? 'success' : 
                                                                ($maintenance->status === 'in_progress' ? 'warning' : 
                                                                ($maintenance->status === 'cancelled' ? 'danger' : 'secondary')) 
                                                            }}">
                                                                {{ $maintenance->formatted_status }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                        @if($maintenance->attachment_path)
                                                            <div class="btn-group btn-group-sm" role="group">
                                                                {{-- Download Button --}}
                                                                <a href="{{ route('maintenance.download', [$inventoryId, $serial->id, $maintenance->id]) }}" 
                                                                class="btn btn-outline-primary btn-sm" 
                                                                title="Download {{ $maintenance->attachment_name }}">
                                                                    <i class="fas fa-download"></i>
                                                                </a>

                                                                {{-- View Button --}}
                                                                @php
                                                                    $extension = strtolower(pathinfo($maintenance->attachment_path, PATHINFO_EXTENSION));
                                                                @endphp

                                                                @if(in_array($extension, ['jpg','jpeg','png','gif','bmp','webp']))
                                                                    <button type="button" 
                                                                            class="btn btn-outline-info btn-sm" 
                                                                            onclick="showImageModal('{{ asset('storage/'.$maintenance->attachment_path) }}', '{{ $maintenance->attachment_name }}')" 
                                                                            title="View Image">
                                                                        <i class="fas fa-eye"></i>
                                                                    </button>
                                                                @elseif($extension === 'pdf')
                                                                    <button type="button" 
                                                                            class="btn btn-outline-info btn-sm" 
                                                                            onclick="showPdfModal('{{ asset('storage/'.$maintenance->attachment_path) }}', '{{ $maintenance->attachment_name }}')" 
                                                                            title="View PDF">
                                                                        <i class="fas fa-eye"></i>
                                                                    </button>
                                                                @endif

                                                                {{-- Delete Button --}}
                                                                <button type="button" 
                                                                        class="btn btn-outline-danger btn-sm" 
                                                                        onclick="deleteAttachment({{ $maintenance->id }})" 
                                                                        title="Delete Attachment">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </div>

                                                            {{-- File Info --}}
                                                            <div class="mt-1">
                                                                <small class="text-muted d-block text-truncate" style="max-width: 120px;" title="{{ $maintenance->attachment_name }}">
                                                                    @if(in_array($extension, ['jpg','jpeg','png','gif','bmp','webp']))
                                                                        <i class="fas fa-image text-primary"></i>
                                                                    @elseif($extension === 'pdf')
                                                                        <i class="fas fa-file-pdf text-danger"></i>
                                                                    @else
                                                                        <i class="fas fa-file text-muted"></i>
                                                                    @endif
                                                                    {{ $maintenance->attachment_name }}
                                                                </small>
                                                            </div>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>

                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="text-center py-5">
                                            <i class="fas fa-tools fa-3x text-muted mb-3"></i>
                                            <h5 class="text-muted">No maintenance records found</h5>
                                            <p class="text-muted">Add the first maintenance record using the form above.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Image Modal --}}
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalTitle">Attachment</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="Attachment" class="img-fluid">
            </div>
        </div>
    </div>
</div>

{{-- PDF Modal --}}
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfModalTitle">PDF Attachment</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <iframe id="modalPdf" src="" width="100%" height="600px"></iframe>
            </div>
        </div>
    </div>
</div>

<script>
    // File input handling
    document.getElementById('attachment').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const filePreview = document.getElementById('file-preview');
        const fileName = document.getElementById('file-name');
        const fileSize = document.getElementById('file-size');
        const label = document.querySelector('.custom-file-label');
        
        if (file) {
            // Update label
            label.textContent = file.name;
            
            // Show preview
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            filePreview.style.display = 'block';
            
            // Add appropriate icon based on file type
            const icon = fileName.parentElement.querySelector('i');
            if (file.type.startsWith('image/')) {
                icon.className = 'fas fa-image';
            } else if (file.type === 'application/pdf') {
                icon.className = 'fas fa-file-pdf';
            } else {
                icon.className = 'fas fa-file';
            }
        } else {
            clearFileInput();
        }
    });

    function clearFileInput() {
        const fileInput = document.getElementById('attachment');
        const filePreview = document.getElementById('file-preview');
        const label = document.querySelector('.custom-file-label');
        
        fileInput.value = '';
        filePreview.style.display = 'none';
        label.textContent = 'Choose file...';
    }

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

    // Modal functions for viewing attachments
    function showImageModal(url, name) {
        $('#imageModalTitle').text(name);
        $('#modalImage').attr('src', url);
        $('#imageModal').modal('show');
    }

    function showPdfModal(url, name) {
        $('#pdfModalTitle').text(name);
        $('#modalPdf').attr('src', url);
        $('#pdfModal').modal('show');
    }

    function deleteAttachment(maintenanceId) {
        if (confirm('Are you sure you want to delete this attachment?')) {
            // Create a form to send DELETE request
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `{{ url('maintenance/' . $inventoryId . '/' . $serial->id) }}/${maintenanceId}/attachment`;
            
            // Add CSRF token
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Add method override for DELETE
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = 'DELETE';
            form.appendChild(methodField);
            
            document.body.appendChild(form);
            form.submit();
        }
    }

    // Enhanced form interactivity
    document.getElementById('maintenance_type').addEventListener('change', function() {
        const type = this.value;
        const descriptionField = document.getElementById('description');
        
        if (type === 'corrective') {
            descriptionField.placeholder = 'Describe the problem and repair work performed...';
        } else if (type === 'preventive') {
            descriptionField.placeholder = 'Describe the scheduled maintenance activities performed...';
        } else {
            descriptionField.placeholder = 'Describe the maintenance work performed...';
        }
    });

    // Auto-dismiss alerts after 5 seconds
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 5000);

    // Form validation enhancement
    document.querySelector('form').addEventListener('submit', function(e) {
        // Add any client-side validation if needed
        const requiredFields = this.querySelectorAll('[required]');
        let isValid = true;
        
        requiredFields.forEach(function(field) {
            if (!field.value.trim()) {
                isValid = false;
                field.classList.add('is-invalid');
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('Please fill in all required fields.');
        }
    });
</script>
@endsection