@extends('layouts.app')

@section('title', __('MEC users practice status'))

@push('stylesheets')
<style>
    .mec-practice-status-card .card-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .mec-practice-status-card .card-title {
        font-weight: 600;
    }
    .mec-practice-status-card .mec-practice-direct-link {
        font-size: 0.8125rem;
        word-break: break-all;
    }
    .mec-practice-table-wrap {
        overflow-x: auto;
    }
    .mec-practice-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
        background: #fff;
    }
    .mec-practice-table th,
    .mec-practice-table td {
        border: 1px solid #212529;
        padding: 0.35rem 0.5rem;
        vertical-align: middle;
    }
    .mec-practice-table thead th {
        font-weight: 700;
        text-align: center;
    }
    .mec-practice-table .col-sno { width: 3rem; text-align: center; }
    .mec-practice-table .col-name { min-width: 10rem; text-align: left; }
    .mec-practice-table .col-region { min-width: 6.5rem; text-align: center; }
    .mec-practice-table .col-status { width: 2.75rem; text-align: center; font-size: 0.8125rem; }
    .mec-practice-hdr-monitoring {
        background: #ffeb3b;
        color: #212529;
    }
    .mec-practice-hdr-visit {
        background: #4caf50;
        color: #fff;
    }
    .mec-practice-sub-monitoring {
        background: #ffe0b2;
        color: #212529;
    }
    .mec-practice-sub-visit {
        background: #c8e6c9;
        color: #212529;
    }
    .mec-practice-status-draft {
        font-style: italic;
    }
    .mec-practice-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
        font-size: 0.8125rem;
        color: #495057;
        margin-bottom: 0.75rem;
    }
    .mec-practice-legend span {
        white-space: nowrap;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="card mec-practice-status-card shadow-sm">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                <h3 class="card-title mb-0">{{ __('MEC users — practice status') }}</h3>
                <div class="d-flex flex-wrap align-items-center gap-2 flex-shrink-0">
                    <a href="{{ route('mec.users.practice-status.export') }}" class="btn btn-sm btn-success">
                        <i class="fas fa-file-excel mr-1" aria-hidden="true"></i>{{ __('Export Excel') }}
                    </a>
                </div>
            </div>
            <div class="card-body">
                <p class="mec-practice-direct-link text-muted mb-3">
                    <strong>{{ __('Link') }}:</strong>
                    <a href="{{ $pageUrl }}">{{ $pageUrl }}</a>
                </p>

                <div class="mec-practice-legend">
                    <span><strong>Y</strong> — {{ __('Submitted or published') }}</span>
                    <span><strong>N</strong> — {{ __('Not started') }}</span>
                    <span><strong>Draft</strong> — {{ __('Draft only') }}</span>
                </div>

                @if (count($rows) === 0)
                    <p class="text-muted mb-0">{{ __('No active MEC users found.') }}</p>
                @else
                    <div class="mec-practice-table-wrap">
                        <table class="mec-practice-table table-bordered mb-0" role="grid">
                            <thead>
                                <tr>
                                    <th rowspan="2" class="col-sno">{{ __('S.No.') }}</th>
                                    <th rowspan="2" class="col-name">{{ __('Name') }}</th>
                                    <th rowspan="2" class="col-region">{{ __('Region') }}</th>
                                    <th colspan="{{ count($reportTypeCodes) }}" class="mec-practice-hdr-monitoring">
                                        {{ __('M&E Reports Practice Status') }}
                                    </th>
                                    <th colspan="{{ count($visitPlanCodes) }}" class="mec-practice-hdr-visit">
                                        {{ __("Visit Plan's Practice Status") }}
                                    </th>
                                </tr>
                                <tr>
                                    @foreach ($reportTypeCodes as $code)
                                        <th class="mec-practice-sub-monitoring col-status" title="{{ $reportTypeLabels[$code] ?? $code }}">{{ $code }}</th>
                                    @endforeach
                                    @foreach ($visitPlanCodes as $code)
                                        <th class="mec-practice-sub-visit col-status">{{ $code }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rows as $row)
                                    <tr>
                                        <td class="col-sno">{{ $row['serial'] }}</td>
                                        <td class="col-name">{{ $row['name'] }}</td>
                                        <td class="col-region">{{ $row['region'] }}</td>
                                        @foreach ($reportTypeCodes as $code)
                                            @php $val = $row['monitoring'][$code] ?? 'N'; @endphp
                                            <td class="col-status{{ $val === 'Draft' ? ' mec-practice-status-draft' : '' }}">{{ $val }}</td>
                                        @endforeach
                                        @foreach ($visitPlanCodes as $code)
                                            @php $val = $row['visit_plans'][$code] ?? 'N'; @endphp
                                            <td class="col-status{{ $val === 'Draft' ? ' mec-practice-status-draft' : '' }}">{{ $val }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection