@extends('layout.master')
@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
<style>
    /* Custom badge styles */
    .badge {
        font-size: 0.875rem; /* Adjusting font size for better readability */
        font-weight: 500; /* Making text a bit bolder */
        padding: 0.25rem 0.6rem;
        border-radius: 0.375rem;
    }

    .badge-primary {
        background-color: #007bff; /* Blue background */
        color: white; /* White text */
    }

    .badge-secondary {
        background-color: #6c757d; /* Gray background */
        color: white; /* White text */
    }

    .badge-success {
        background-color: #28a745; /* Green background */
        color: white; /* White text */
    }

    .badge-danger {
        background-color: #dc3545; /* Red background */
        color: white; /* White text */
    }

    .badge-warning {
        background-color: #ffc107; /* Yellow background */
        color: black; /* Black text */
    }

    .badge-info {
        background-color: #17a2b8; /* Cyan background */
        color: white; /* White text */
    }

    .badge-light {
        background-color: #f8f9fa; /* Light gray background */
        color: black; /* Black text */
    }

    .badge-dark {
        background-color: #343a40; /* Dark background */
        color: white; /* White text */
    }
</style>

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Alert and Issue Tracking</a></li>
      <li class="breadcrumb-item active" aria-current="page">History</li>
    </ol>
</nav>
<div class="container my-1">
    <h1 class="display-6">Historical Alerts & Issue Tracking</h1>
    <p class="text-muted mb-3">Analyze past alerts and track system issues for insights and performance metrics.</p>
    <div class="row mb-4">
        <div class="col-md-4">
            <select class="form-control" id="failureType">
                <option value="all">All Failure Types</option>
                <option value="loadLimit">Load Limit Exceeded</option>
                <option value="oilLevel">Oil Levels Below Threshold</option>
                <option value="hydraulicFailure">Hydraulic System Failure</option>
            </select>
        </div>
        <div class="col-md-4">
            <select class="form-control" id="urgencyLevel">
                <option value="" disabled selected>Select Severity Level</option>
                <option value="high">P1 (3 Months)</option>
                <option value="medium">P2</option>
                <option value="low">P3</option>
                <option value="urgent">Super Doper(24 hours)</option>
            </select> 
        </div>
        <div class="col-md-4">
            <input type="date" class="form-control" id="dateRange">
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-3">Alert Severity Distribution</h5>
                    <canvas id="chartjsPie"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-3">Issue Status Overview</h5>
                    <canvas id="chartjsDoughnut"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-4">Alert and Issue Tracking Table</h5>
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Failure Type</th>
                                    <th>Severity</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Technician</th>
                                    <th>Actions Taken</th>
                                    <th>More Info</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Load Limit Exceeded</td>
                                    <td><span class="badge badge-danger">P1(3Months)</span></td>
                                    <td>2025-01-01 10:45:00</td>
                                    <td><span class="badge badge-warning">Escalated</span></td>
                                    <td>En. Ali</td>
                                    <td>Load limit exceeded, crane slowed down. Monitoring ongoing.</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#detailsModal" onclick="populateModal(1)">View Details</button>
                                    </td>

                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Oil Levels Below Threshold</td>
                                    <td><span class="badge badge-warning">P2(Medium)</span></td>
                                    <td>2025-01-02 12:30:00</td>
                                    <td><span class="badge badge-info">Resolved</span></td>
                                    <td>Puan Amina</td>
                                    <td>Oil levels replenished, issue resolved.</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#detailsModal" onclick="populateModal(1)">View Details</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Hydraulic System Failure</td>
                                    <td><span class="badge badge-danger">P1(3Months)</span></td>
                                    <td>2025-01-02 14:00:00</td>
                                    <td><span class="badge badge-danger">Escalated</span></td>
                                    <td>En. Faizal</td>
                                    <td>Hydraulic failure, immediate repair requested.</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#detailsModal" onclick="populateModal(1)">View Details</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="btn btn-sm btn-primary mt-3">Export Data</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Alert Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Failure Type:</strong> <span id="failureTypeDetail">N/A</span></p>
                        <p><strong>Severity:</strong> <span id="severityDetail" class="badge badge-danger">N/A</span></p>
                        <p><strong>Date:</strong> <span id="dateDetail">N/A</span></p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Status:</strong> <span id="statusDetail" class="badge badge-warning">N/A</span></p>
                        <p><strong>Technician:</strong> <span id="technicianDetail">N/A</span></p>
                        <p><strong>Actions Taken:</strong></p>
                        <p id="actionsTakenDetail">N/A</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection
@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/chartjs/chart.umd.js') }}"></script>
  <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/chartjs.js') }}"></script>
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush
<script>
    function populateModal(id) {
      const details = {
          1: {
              failureType: 'Load Limit Exceeded',
              severity: 'High',
              status: 'Escalated',
              technician: 'En. Ali',
              actions: 'Load limit exceeded, crane slowed down. Monitoring ongoing.',
              date: '2025-01-01 10:45:00',
          },
          2: {
              failureType: 'Oil Levels Below Threshold',
              severity: 'Medium',
              status: 'Resolved',
              technician: 'Puan Amina',
              actions: 'Oil levels replenished, issue resolved.',
              date: '2025-01-02 12:30:00',
          },
          3: {
              failureType: 'Hydraulic System Failure',
              severity: 'High',
              status: 'Escalated',
              technician: 'En. Faizal',
              actions: 'Hydraulic failure, immediate repair requested.',
              date: '2025-01-02 14:00:00',
          },
      };
    
      const detail = details[id];
      document.getElementById('failureTypeDetail').textContent = detail.failureType;
      document.getElementById('severityDetail').textContent = detail.severity;
      document.getElementById('severityDetail').className = `badge badge-${detail.severity === 'High' ? 'danger' : detail.severity === 'Medium' ? 'warning' : 'info'}`;
      document.getElementById('statusDetail').textContent = detail.status;
      document.getElementById('statusDetail').className = `badge badge-${detail.status === 'Escalated' ? 'danger' : 'info'}`;
      document.getElementById('technicianDetail').textContent = detail.technician;
      document.getElementById('actionsTakenDetail').textContent = detail.actions;
      document.getElementById('dateDetail').textContent = detail.date;
    }
    </script>