@extends('layouts.app')
@section('title', 'Machines')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <i class="bi bi-cpu"></i> Machines
    </h1>
</section>

<section class="content">
    <div class="row">
        <!-- Machine Stats -->
        <div class="col-md-3">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ $stats['operational'] ?? 0 }}</h3>
                    <p>Operational</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ $stats['maintenance'] ?? 0 }}</h3>
                    <p>In Maintenance</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ $stats['breakdown'] ?? 0 }}</h3>
                    <p>Breakdown</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $stats['total'] ?? 0 }}</h3>
                    <p>Total Machines</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="mb-0">Machine Management</h5>
                    <small class="text-muted">Manage production equipment</small>
                </div>
                <div>
                    <a href="{{ route('manufacturing.maintenance.machines.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Add Machine
                    </a>
                    <button class="btn btn-danger" data-toggle="modal" data-target="#reportBreakdownModal">
                        <i class="bi bi-exclamation-triangle"></i> Report Breakdown
                    </button>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Model</th>
                            <th>Status</th>
                            <th>Availability</th>
                            <th>OEE</th>
                            <th>Next Maintenance</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $machine)
                        <tr>
                            <td><strong>{{ $machine->machine_code }}</strong></td>
                            <td>{{ $machine->name }}</td>
                            <td>{{ $machine->type }}</td>
                            <td>{{ $machine->model }}</td>
                            <td>@include('manufacturing.partials.status-badge', ['status' => $machine->status])</td>
                            <td>{{ round($machine->getAvailability()) }}%</td>
                            <td>{{ round($machine->getOEE()) }}%</td>
                            <td>
                                @if($machine->next_maintenance_date)
                                    @if($machine->next_maintenance_date < now())
                                        <span class="text-danger">
                                            <i class="bi bi-exclamation-circle"></i> Overdue
                                        </span>
                                    @elseif($machine->next_maintenance_date <= now()->addDays(7))
                                        <span class="text-warning">Soon</span>
                                    @else
                                        {{ $machine->next_maintenance_date->format('Y-m-d') }}
                                    @endif
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('manufacturing.maintenance.machines.show', $machine->id) }}" class="btn btn-sm btn-info">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('manufacturing.maintenance.machines.edit', $machine->id) }}" class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button class="btn btn-sm btn-success scheduleBtn" data-id="{{ $machine->id }}" data-name="{{ $machine->name }}">
                                        <i class="bi bi-calendar-plus"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger breakdownBtn" data-id="{{ $machine->id }}" data-name="{{ $machine->name }}">
                                        <i class="bi bi-exclamation-triangle"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="text-center py-4">No machines found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{ $data->appends(request()->query())->links() }}
        </div>
    </div>
</section>

<!-- Schedule Maintenance Modal -->
<div class="modal fade" id="scheduleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="bi bi-calendar-plus"></i> Schedule Maintenance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="scheduleForm" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Machine: <strong id="scheduleMachineName"></strong></p>
                    <div class="form-group">
                        <label>Maintenance Type <span class="text-danger">*</span></label>
                        <select name="maintenance_type" class="form-control" required>
                            <option value="preventive">Preventive</option>
                            <option value="corrective">Corrective</option>
                            <option value="predictive">Predictive</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Scheduled Date <span class="text-danger">*</span></label>
                        <input type="date" name="scheduled_date" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Description <span class="text-danger">*</span></label>
                        <textarea name="description" class="form-control" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Notes</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Schedule</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Report Breakdown Modal -->
<div class="modal fade" id="breakdownModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Report Breakdown</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="breakdownForm" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Machine: <strong id="breakdownMachineName"></strong></p>
                    <div class="form-group">
                        <label>Issue Description <span class="text-danger">*</span></label>
                        <textarea name="issue_description" class="form-control" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Downtime Estimate (hours)</label>
                        <input type="number" name="downtime_estimate" class="form-control" step="0.5" min="0">
                    </div>
                    <div class="form-group">
                        <label>Priority</label>
                        <select name="priority" class="form-control">
                            <option value="high">High</option>
                            <option value="medium" selected>Medium</option>
                            <option value="low">Low</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Report Breakdown</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Schedule Maintenance
    document.querySelectorAll('.scheduleBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('scheduleMachineName').textContent = name;
            document.getElementById('scheduleForm').action = '/manufacturing/maintenance/machines/' + id + '/schedule';
            new bootstrap.Modal(document.getElementById('scheduleModal')).show();
        });
    });
    
    // Report Breakdown
    document.querySelectorAll('.breakdownBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('breakdownMachineName').textContent = name;
            document.getElementById('breakdownForm').action = '/manufacturing/maintenance/machines/' + id + '/report-breakdown';
            new bootstrap.Modal(document.getElementById('breakdownModal')).show();
        });
    });
</script>
@endpush
@endsection