@extends('layout.master')

@push('plugin-styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@endpush

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">PPM Reports</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="input-group" style="width: 300px;">
                        <input type="text" id="searchInput" class="form-control" placeholder="Search reports...">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="reportsTable">
                        <thead class="text-primary">
                            <tr>
                                <th>No.</th>
                                <th>Crane Model</th>
                                <th>Crane Serial</th>
                                <th>Inspection Date</th>
                                <th>Technician</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($schedules as $index => $schedule)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $schedule->crane->model ?? 'N/A' }}</td>
                                <td>{{ $schedule->crane->serial_no ?? 'N/A' }}</td>
                                <td>{{ $schedule->date_inspection->format('d M Y') }}</td>
                                <td>{{ $schedule->site_technician ?? 'N/A' }}</td>
                                
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('ppm.report.view', ['id' => $schedule->id]) }}" 
                                           class="btn btn-sm btn-info" 
                                           title="View Report">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                       <a href="{{ route('ppm.pdf', ['ppm_id' => $schedule->id]) }}" 
                                            class="btn btn-sm btn-danger" 
                                            title="Download PDF">
                                            <i class="fas fa-file-pdf"></i>
                                        </a>
                                        <a href="{{ route('ppm.report.excel', ['id' => $schedule->id]) }}" 
                                           class="btn btn-sm btn-success" 
                                           title="Export Excel">
                                            <i class="fas fa-file-excel"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                @if($schedules->isEmpty())
                <div class="alert alert-warning">
                    No PPM reports found.
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Search functionality
    $('#searchInput').keyup(function() {
        const searchText = $(this).val().toLowerCase();
        $('#reportsTable tbody tr').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
        });
    });

    // Initialize tooltips
    $('[title]').tooltip({
        placement: 'top',
        trigger: 'hover'
    });

    // DataTable initialization (if you're using DataTables)
    // $('#reportsTable').DataTable({
    //     responsive: true,
    //     pageLength: 25
    // });
});
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/fontawesome/css/all.min.css') }}">
<style>
    .badge {
        font-size: 0.8rem;
        font-weight: 500;
        padding: 0.35em 0.65em;
    }
    .btn-group .btn {
        margin-right: 5px;
    }
    .btn-group .btn:last-child {
        margin-right: 0;
    }
    .table td, .table th {
        vertical-align: middle;
    }
</style>
@endpush