@extends('layouts.master')

@section('content')

<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            <div class="page-title-icon">
                <i class="pe-7s-check icon-gradient bg-mean-fruit"></i>
            </div>
            <div>
                {{ $title ?? 'Upload Results' }}
                <div class="page-title-subheading">Results from your uploaded Excel file</div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success mt-3">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger mt-3">
            {{ session('error') }}
        </div>
    @endif
</div>

<div class="main-card mb-3 card">
    <div class="card-body">
        <h5 class="card-title">Processed Results</h5>

        @if(!empty($responses) && count($responses) > 0)
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="resultsTable">
                    <thead class="thead-dark">
                        <tr>
                            <th>#</th>
                            <th>Man Number</th>
                            <th>Status</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($responses as $index => $response)
                            <tr class="{{ $response['status'] === 'error' ? 'table-danger' : 'table-success' }}">
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $response['man_number'] ?? 'N/A' }}</td>
                                <td>{{ ucfirst($response['status']) }}</td>
                                <td>{{ $response['message'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="alert alert-info">
                No results to display.
            </div>
        @endif
    </div>
</div>

@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $('#resultsTable').DataTable();
    });
</script>
@endsection