@extends('layouts/contentLayoutMaster')

@section('title', 'Edit Machine')

@section('content')
<style>
    /* File input styling */
.file-input-wrapper {
    margin-bottom: 1rem;
}

.current-file-display {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

#upload_status .alert {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
}

#upload_status .badge {
    font-weight: normal;
    padding: 0.35em 0.65em;
}
.upload-file .waves-float{
        justify-content: center;
    display: flex;
    align-items: center;
    background-color: #212a45 !important;
    border-color: #212a45 !important;
} 
.upload-file .file-input-wrapper{
    display: flex;
} 
</style>
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Edit Machine</h4>
                    </div>
                    <div class="card-body">
                        <form class="form" action="{{ route('machines.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{{ $data->id }}">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="company-name-column">Machine Name <b class="text-danger">*</b></label>
                                        <input type="text" class="form-control" name="machine_name"
                                            value="{{ old('machine_name', $data->machine_name) }}" placeholder="Machine Name">
                                        @error('machine_name')
                                            <b class="text-danger mt-1">{{ $message }}</b>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="company-name-column">Manufacture <b class="text-danger">*</b></label>
                                        <input type="text" class="form-control" name="manufacture" value="{{ old('manufacture', $data->manufacture) }}" placeholder="Manufacture">
                                        @error('manufacture')
                                            <b class="text-danger mt-1">{{ $message }}</b>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="company-name-column">Model <b class="text-danger">*</b></label>
                                        <input type="text" class="form-control" name="model" value="{{ old('model', $data->model) }}"
                                            placeholder="Model">
                                        @error('model')
                                            <b class="text-danger mt-1">{{ $message }}</b>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="company-name-column">Serial Number <b class="text-danger">*</b></label>
                                        <input type="text" class="form-control" name="serial_number"
                                            value="{{ old('serial_number', $data->serial_number) }}" placeholder="Serial Number">
                                        @error('serial_number')
                                            <b class="text-danger mt-1">{{ $message }}</b>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Operators Manual -->
                                <div class="col-md-6 col-12 upload-file">
                                    <div class="mb-1">
                                        <label class="form-label">Operators Manual (PDF)</label>
                                        
                                        <!-- File Input with Custom Button -->
                                        <div class="file-input-wrapper mb-2">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('operators_manual').click()">
                                                <i data-feather="upload" class="me-1"></i> Choose File
                                            </button>
                                            <input type="file" 
                                                class="d-none" 
                                                name="operators_manual" 
                                                id="operators_manual" 
                                                accept="application/pdf"
                                                onchange="handleFileSelection(this, 'operators')">
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger ms-2 d-none" 
                                                    id="cancel_operators_upload"
                                                    onclick="cancelFileUpload('operators')">
                                                <i data-feather="x" class="me-1"></i> Cancel
                                            </button>
                                        </div>
                                        
                                        <!-- Current File Display -->
                                        <div id="operators_file_container">
                                            @if($data->operators_manual)
                                            <div class="current-file-display bg-light p-2 rounded">
                                                <div class="d-flex align-items-center">
                                                    <i data-feather="file-text" class="me-2"></i>
                                                    <span>{{ basename($data->operators_manual) }}</span>
                                                    <div class="ms-auto btn-group btn-group-sm">
                                                        <a href="{{ Storage::url($data->operators_manual) }}" 
                                                        target="_blank" 
                                                        class="btn btn-outline-primary">
                                                            <i data-feather="eye"></i>
                                                        </a>
                                                        <button type="button" 
                                                                class="btn btn-outline-danger"
                                                                onclick="markFileForRemoval('operators_manual')">
                                                            <i data-feather="trash-2"></i>
                                                        </button>
                                                    </div>
                                                    <input type="hidden" name="existing_operators_manual" value="{{ $data->operators_manual }}">
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        
                                        <!-- Status Messages -->
                                        <div id="operators_status" class="mt-2 small">
                                            @if(session('operators_status'))
                                            <div class="alert alert-{{ session('operators_status.type') }} p-2">
                                                <i data-feather="{{ session('operators_status.icon') }}" class="me-1"></i>
                                                {{ session('operators_status.message') }}
                                            </div>
                                            @endif
                                        </div>
                                        
                                        @error('operators_manual')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                
                                <div class="col-md-6 col-12 upload-file">
                                    <div class="mb-1">
                                        <label class="form-label">Service Manual (PDF)</label>
                                        
                                        <!-- File Input with Custom Button -->
                                        <div class="file-input-wrapper mb-2">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('service_manual').click()">
                                                <i data-feather="upload" class="me-1"></i> Choose File
                                            </button>
                                            <input type="file" 
                                                class="d-none" 
                                                name="service_manual" 
                                                id="service_manual" 
                                                accept="application/pdf"
                                                onchange="handleFileSelection(this, 'service')">
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger ms-2 d-none" 
                                                    id="cancel_service_upload"
                                                    onclick="cancelFileUpload('service')">
                                                <i data-feather="x" class="me-1"></i> Cancel
                                            </button>
                                        </div>
                                        
                                        <!-- Current File Display -->
                                        <div id="service_manual_file_container">
                                            @if($data->service_manual)
                                            <div class="current-file-display bg-light p-2 rounded">
                                                <div class="d-flex align-items-center">
                                                    <i data-feather="file-text" class="me-2"></i>
                                                    <span>{{ basename($data->service_manual) }}</span>
                                                    <div class="ms-auto btn-group btn-group-sm">
                                                        <a href="{{ Storage::url($data->service_manual) }}" 
                                                        target="_blank" 
                                                        class="btn btn-outline-primary">
                                                            <i data-feather="eye"></i>
                                                        </a>
                                                        <button type="button" 
                                                                class="btn btn-outline-danger"
                                                                onclick="markFileForRemoval('service_manual')">
                                                            <i data-feather="trash-2"></i>
                                                        </button>
                                                    </div>
                                                    <input type="hidden" name="existing_service_manual" value="{{ $data->service_manual }}">
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        
                                        <!-- Status Messages -->
                                        <div id="service_status" class="mt-2 small">
                                            @if(session('service_status'))
                                            <div class="alert alert-{{ session('service_status.type') }} p-2">
                                                <i data-feather="{{ session('service_status.icon') }}" class="me-1"></i>
                                                {{ session('service_status.message') }}
                                            </div>
                                            @endif
                                        </div>
                                        
                                        @error('service_manual')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

    
                                <!-- Parts Manual -->
                                <div class="col-md-6 col-12 upload-file">
                                    <div class="mb-1">
                                        <label class="form-label">Parts Manual (PDF)</label>
                                        
                                        <!-- File Input with Custom Button -->
                                        <div class="file-input-wrapper mb-2">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('parts_manual').click()">
                                                <i data-feather="upload" class="me-1"></i> Choose File
                                            </button>
                                            <input type="file" 
                                                class="d-none" 
                                                name="parts_manual" 
                                                id="parts_manual" 
                                                accept="application/pdf"
                                                onchange="handleFileSelection(this, 'parts')">
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger ms-2 d-none" 
                                                    id="cancel_parts_upload"
                                                    onclick="cancelFileUpload('parts')">
                                                <i data-feather="x" class="me-1"></i> Cancel
                                            </button>
                                        </div>
                                        
                                        <!-- Current File Display -->
                                        <div id="parts_manual_file_container">
                                            @if($data->parts_manual)
                                            <div class="current-file-display bg-light p-2 rounded">
                                                <div class="d-flex align-items-center">
                                                    <i data-feather="file-text" class="me-2"></i>
                                                    <span>{{ basename($data->parts_manual) }}</span>
                                                    <div class="ms-auto btn-group btn-group-sm">
                                                        <a href="{{ Storage::url($data->parts_manual) }}" 
                                                        target="_blank" 
                                                        class="btn btn-outline-primary">
                                                            <i data-feather="eye"></i>
                                                        </a>
                                                        <button type="button" 
                                                                class="btn btn-outline-danger"
                                                                onclick="markFileForRemoval('parts_manual')">
                                                            <i data-feather="trash-2"></i>
                                                        </button>
                                                    </div>
                                                    <input type="hidden" name="existing_parts_manual" value="{{ $data->parts_manual }}">
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        
                                        <!-- Status Messages -->
                                        <div id="parts_status" class="mt-2 small">
                                            @if(session('parts_status'))
                                            <div class="alert alert-{{ session('parts_status.type') }} p-2">
                                                <i data-feather="{{ session('parts_status.icon') }}" class="me-1"></i>
                                                {{ session('parts_status.message') }}
                                            </div>
                                            @endif
                                        </div>
                                        
                                        @error('parts_manual')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Error Code List -->
                                <div class="col-md-6 col-12 upload-file">
                                    <div class="mb-1">
                                        <label class="form-label">Error Code List (PDF)</label>
                                        
                                        <!-- File Input with Custom Button -->
                                        <div class="file-input-wrapper mb-2">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('error_code_list').click()">
                                                <i data-feather="upload" class="me-1"></i> Choose File
                                            </button>
                                            <input type="file" 
                                                class="d-none" 
                                                name="error_code_list" 
                                                id="error_code_list" 
                                                accept="application/pdf"
                                                onchange="handleFileSelection(this, 'error_code')">
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger ms-2 d-none" 
                                                    id="cancel_error_code_upload"
                                                    onclick="cancelFileUpload('error_code')">
                                                <i data-feather="x" class="me-1"></i> Cancel
                                            </button>
                                        </div>
                                        
                                        <!-- Current File Display -->
                                        <div id="error_code_list_file_container">
                                            @if($data->error_code_list)
                                            <div class="current-file-display bg-light p-2 rounded">
                                                <div class="d-flex align-items-center">
                                                    <i data-feather="file-text" class="me-2"></i>
                                                    <span>{{ basename($data->error_code_list) }}</span>
                                                    <div class="ms-auto btn-group btn-group-sm">
                                                        <a href="{{ Storage::url($data->error_code_list) }}" 
                                                        target="_blank" 
                                                        class="btn btn-outline-primary">
                                                            <i data-feather="eye"></i>
                                                        </a>
                                                        <button type="button" 
                                                                class="btn btn-outline-danger"
                                                                onclick="markFileForRemoval('error_code_list')">
                                                            <i data-feather="trash-2"></i>
                                                        </button>
                                                    </div>
                                                    <input type="hidden" name="existing_error_code_list" value="{{ $data->error_code_list }}">
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        
                                        <!-- Status Messages -->
                                        <div id="error_code_status" class="mt-2 small">
                                            @if(session('error_code_status'))
                                            <div class="alert alert-{{ session('error_code_status.type') }} p-2">
                                                <i data-feather="{{ session('error_code_status.icon') }}" class="me-1"></i>
                                                {{ session('error_code_status.message') }}
                                            </div>
                                            @endif
                                        </div>
                                        
                                        @error('error_code_list')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary me-1">Update</button>
                                    <a href="{{ route('machines.index') }}" class="btn btn-dark">Cancel</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('page-script')
    <script>
// Handle file selection for all fields
// Handle file selection
function handleFileSelection(input, fieldType) {
    const cancelBtn = document.getElementById(`cancel_${fieldType}_upload`);
    const statusDiv = document.getElementById(`${fieldType}_status`);
    const currentDisplay = document.getElementById(`${fieldType}_manual_file_container`);
    
    if (input.files.length > 0) {
        cancelBtn.classList.remove('d-none');
        statusDiv.innerHTML = `
            <div class="alert alert-info p-2">
                <i data-feather="upload" class="me-1"></i>
                Ready to upload: ${input.files[0].name}
            </div>
        `;
        
        // Hide current file display if exists
        if (currentDisplay) {
            currentDisplay.style.display = 'none';
        }
    }
    
    feather.replace();
}

// Cancel file upload for any field
function cancelFileUpload(fieldType) {
    const fileInput = document.getElementById(`${fieldType}_manual`);
    const cancelBtn = document.getElementById(`cancel_${fieldType}_upload`);
    const statusDiv = document.getElementById(`${fieldType}_status`);
    const currentDisplay = document.getElementById(`${fieldType}_manual_file_container`);
    
    fileInput.value = '';
    cancelBtn.classList.add('d-none');
    statusDiv.innerHTML = `
        <div class="alert alert-warning p-2">
            <i data-feather="alert-circle" class="me-1"></i>
            Upload cancelled
        </div>
    `;
    
    // Show current file again if exists
    if (currentDisplay) {
        currentDisplay.style.display = 'block';
    }
    
    feather.replace();
}

// Mark existing file for removal
function markFileForRemoval(fieldName) {
    const container = document.getElementById(`${fieldName}_file_container`);
    
    // Create removal flag
    const removeInput = document.createElement('input');
    removeInput.type = 'hidden';
    removeInput.name = `remove_${fieldName.replace('_manual', '')}_manual`;
    removeInput.value = '1';
    document.querySelector('form').appendChild(removeInput);
    
    // Update UI
    container.innerHTML = `
        <div class="alert alert-warning p-2">
            <i data-feather="alert-triangle" class="me-1"></i>
            Current file will be removed when you save
        </div>
    `;
    
    feather.replace();
}

// Initialize Feather Icons
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
    </script>
@endsection