@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

<style>

.alert-body {
    padding: 20px;
    background-color: #f8f9fa;
    color: #333;
}

.alert-body .list-group-item {
    border: 0;
    padding: 15px;
}

.blinking-row {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% {
        background-color: #f9e5e5;
    }
    50% {
        background-color: #f8d7da;
    }
}

/* Modern table styles */
.table th, .table td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}

.table thead {
    background-color: #f1f1f1;
    color: #333;
}

.table tbody tr {
    border-bottom: 1px solid #ddd;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

.table .badge {
    font-size: 0.9rem;
    padding: 5px 10px;
}
</style>

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Real-Time Monitoring</a></li>
      <li class="breadcrumb-item active" aria-current="page">Technician</li>
    </ol>
</nav>
<div class="container my-1">
    <div class="row mb-4">
        <div class="col-md-12">
            <h1 class="display-6">Technician Dashboard</h1>
            <p class="text-muted">Monitor tasks, tools, and real-time updates for crane maintenance and repair.</p>
        </div>
    </div>

    <!-- Tasks Assigned -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <i class="feather icon-list"></i> <strong>Assigned Tasks</strong>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="feather icon-tool text-primary me-2"></i>
                            <strong>Task #1023:</strong> Replace hydraulic pump on CRN-003. <span class="text-info">Due: Tomorrow</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-wrench text-success me-2"></i>
                            <strong>Task #1045:</strong> Perform load test for CRN-001.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-alert-circle text-warning me-2"></i>
                            <strong>Task #1078:</strong> Diagnose swing mechanism on CRN-002.
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Tools and Parts -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-warning text-white">
                    <i class="feather icon-box"></i> <strong>Tools & Parts Inventory</strong>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <i class="feather icon-settings text-primary me-2"></i>
                            <strong>Hydraulic Pump:</strong> Available - <span class="text-success">5 units</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-wrench text-warning me-2"></i>
                            <strong>Torque Wrench:</strong> Low stock - <span class="text-danger">2 units</span>.
                        </li>
                        <li class="list-group-item">
                            <i class="feather icon-tool text-primary me-2"></i>
                            <strong>Hoist Assembly:</strong> Available - <span class="text-success">10 units</span>.
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Maintenance History -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <i class="feather icon-clipboard"></i> <strong>Maintenance History</strong>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-bordered table-hover">
                            <thead class="table-light">
                              <tr>
                                <th>#</th>
                                <th>Task ID</th>
                                <th>Crane ID</th>
                                <th>Technician</th>
                                <th>Status</th>
                                <th>Completion Date</th>
                                <th>Notes</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>1</td>
                                <td>#1020</td>
                                <td>CRN-004</td>
                                <td>Ali Zain</td>
                                <td><span class="badge bg-success">Completed</span></td>
                                <td>2024-12-31</td>
                                <td>Replaced load sensors successfully.</td>
                              </tr>
                              <tr>
                                <td>2</td>
                                <td>#1015</td>
                                <td>CRN-001</td>
                                <td>Siti Hawa</td>
                                <td><span class="badge bg-warning">Pending Approval</span></td>
                                <td>-</td>
                                <td>Waiting for manager's review.</td>
                              </tr>
                              <tr>
                                <td>3</td>
                                <td>#1032</td>
                                <td>CRN-003</td>
                                <td>Azlan Hamid</td>
                                <td><span class="badge bg-danger">Failed</span></td>
                                <td>2025-01-01</td>
                                <td>Hydraulic leak; needs further inspection.</td>
                              </tr>
                              <!-- Additional Data -->
                              <tr>
                                <td>4</td>
                                <td>#1045</td>
                                <td>CRN-002</td>
                                <td>Rizal Iskandar</td>
                                <td><span class="badge bg-success">Completed</span></td>
                                <td>2024-12-28</td>
                                <td>Replaced faulty electrical components.</td>
                              </tr>
                              <tr>
                                <td>5</td>
                                <td>#1048</td>
                                <td>CRN-005</td>
                                <td>Nur Aisyah</td>
                                <td><span class="badge bg-warning">Pending Approval</span></td>
                                <td>-</td>
                                <td>Awaiting approval for spare part order.</td>
                              </tr>
                              <tr>
                                <td>6</td>
                                <td>#1055</td>
                                <td>CRN-006</td>
                                <td>Fauzi Omar</td>
                                <td><span class="badge bg-danger">Failed</span></td>
                                <td>2025-01-02</td>
                                <td>Severe rusting on arm; needs parts replacement.</td>
                              </tr>
                              <tr>
                                <td>7</td>
                                <td>#1061</td>
                                <td>CRN-007</td>
                                <td>Ali Zain</td>
                                <td><span class="badge bg-success">Completed</span></td>
                                <td>2024-12-30</td>
                                <td>Routine maintenance and inspection completed.</td>
                              </tr>
                              <tr>
                                <td>8</td>
                                <td>#1067</td>
                                <td>CRN-008</td>
                                <td>Hafiz Ahmad</td>
                                <td><span class="badge bg-warning">Pending Approval</span></td>
                                <td>-</td>
                                <td>Parts requested; awaiting approval for purchase.</td>
                              </tr>
                              <tr>
                                <td>9</td>
                                <td>#1073</td>
                                <td>CRN-009</td>
                                <td>Raja Muhammad</td>
                                <td><span class="badge bg-danger">Failed</span></td>
                                <td>2025-01-03</td>
                                <td>Engine failure; needs urgent attention.</td>
                              </tr>
                              <tr>
                                <td>10</td>
                                <td>#1082</td>
                                <td>CRN-010</td>
                                <td>Siti Hawa</td>
                                <td><span class="badge bg-success">Completed</span></td>
                                <td>2024-12-29</td>
                                <td>Replaced crane cables and tested successfully.</td>
                              </tr>
                            </tbody>
                          </table>
                          
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush