@extends('layout.master')

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

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Reporting</a></li>
      <li class="breadcrumb-item active" aria-current="page">History Load Tests</li>
    </ol>
</nav>
<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card shadow-sm">
            <div class="card-body">
                <h5 class="card-title mb-0">Historical Load Tests</h5>
                <p class="text-muted mb-4">Filter and analyze crane performance with historical data.</p>
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="startDate" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="startDate" placeholder="Start Date">
                    </div>
                    <div class="col-md-3">
                        <label for="endDate" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="endDate" placeholder="End Date">
                    </div>
                    <div class="col-md-3">
                        <label for="craneSelect" class="form-label">Select Crane</label>
                        <select class="form-select" id="craneSelect">
                            <option selected>All Cranes</option>
                            <option value="CRN-001">CRN-001</option>
                            <option value="CRN-002">CRN-002</option>
                            <option value="CRN-003">CRN-003</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="loadTypeSelect" class="form-label">Load Type</label>
                        <select class="form-select" id="loadTypeSelect">
                            <option selected>All Types</option>
                            <option value="Static">Static</option>
                            <option value="Dynamic">Dynamic</option>
                        </select>
                    </div>
                </div>
                <div class="d-flex justify-content-end">
                    <button type="button" id="applyFilters" class="btn btn-primary mt-2 mb-3">Apply Filters</button>
                </div>
                <div class="table-responsive">
                    <table id="dataTableExample" class="table table-bordered">
                      <thead class="table-light">
                        <tr>
                          <th>Test Date</th>
                          <th>Crane ID</th>
                          <th>Load Type</th>
                          <th>Load Weight (kg)</th>
                          <th>Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>2024-12-01</td>
                          <td>CRN-001</td>
                          <td>Static</td>
                          <td>2500</td>
                          <td><span class="badge bg-success">Passed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-10</td>
                          <td>CRN-002</td>
                          <td>Dynamic</td>
                          <td>1800</td>
                          <td><span class="badge bg-warning">Pending</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-20</td>
                          <td>CRN-003</td>
                          <td>Static</td>
                          <td>3000</td>
                          <td><span class="badge bg-danger">Failed</span></td>
                        </tr>
                        <!-- Added 8 More Entries -->
                        <tr>
                          <td>2024-12-15</td>
                          <td>CRN-004</td>
                          <td>Static</td>
                          <td>2800</td>
                          <td><span class="badge bg-success">Passed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-18</td>
                          <td>CRN-005</td>
                          <td>Dynamic</td>
                          <td>2200</td>
                          <td><span class="badge bg-danger">Failed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-22</td>
                          <td>CRN-006</td>
                          <td>Static</td>
                          <td>3500</td>
                          <td><span class="badge bg-warning">Pending</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-25</td>
                          <td>CRN-007</td>
                          <td>Dynamic</td>
                          <td>2700</td>
                          <td><span class="badge bg-success">Passed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-27</td>
                          <td>CRN-008</td>
                          <td>Static</td>
                          <td>3200</td>
                          <td><span class="badge bg-warning">Pending</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-28</td>
                          <td>CRN-009</td>
                          <td>Dynamic</td>
                          <td>2600</td>
                          <td><span class="badge bg-danger">Failed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-29</td>
                          <td>CRN-010</td>
                          <td>Static</td>
                          <td>2800</td>
                          <td><span class="badge bg-success">Passed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-30</td>
                          <td>CRN-011</td>
                          <td>Dynamic</td>
                          <td>2400</td>
                          <td><span class="badge bg-success">Passed</span></td>
                        </tr>
                        <tr>
                          <td>2024-12-31</td>
                          <td>CRN-012</td>
                          <td>Static</td>
                          <td>3300</td>
                          <td><span class="badge bg-warning">Pending</span></td>
                        </tr>
                        <tr>
                          <td>2025-01-02</td>
                          <td>CRN-013</td>
                          <td>Dynamic</td>
                          <td>2800</td>
                          <td><span class="badge bg-success">Passed</span></td>
                        </tr>
                      </tbody>

                    </table>
                </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>
$(document).ready(function() {
    const table = $('#dataTableExample').DataTable({
        order: [[0, 'desc']]
    });

    $('#applyFilters').on('click', function() {
        const startDate = $('#startDate').val();
        const endDate = $('#endDate').val();
        const crane = $('#craneSelect').val();
        const loadType = $('#loadTypeSelect').val();

        table.rows().every(function(rowIdx, tableLoop, rowLoop) {
            const data = this.data();
            const date = data[0]; // Test Date
            const craneID = data[1]; // Crane ID
            const type = data[2]; // Load Type

            let isValid = true;

            if (startDate && date < startDate) isValid = false;
            if (endDate && date > endDate) isValid = false;
            if (crane !== 'All Cranes' && crane !== craneID) isValid = false;
            if (loadType !== 'All Types' && loadType !== type) isValid = false;

            this.visible(isValid);
        });

        table.draw();
    });
});
</script>
@endpush