@extends('layouts.app')

@section('title', report_index_list_page_title())

@push('stylesheets')
@include('reports.partials.mec-listing-table-styles')
@include('partials.filter-card-styles')
@include('partials.collapsible-filter-styles')
@include('partials.index-datatable-styles')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4-custom.css') }}">
<style>
    .report-filter-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    .report-filter-card .card-body {
        padding: 1rem 1.25rem;
    }
    .report-filter-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.5rem;
    }
    .report-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .report-filter-field label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #212529;
        margin-bottom: 0.35rem;
    }
    .report-filter-field .form-control {
        border-radius: 6px;
        min-height: 38px;
        background: #fff;
    }
    .report-filter-field select.form-control {
        min-width: 150px;
    }
    .report-filter-field .select2-container {
        min-width: 150px;
    }
    .report-filter-field .select2-container--bootstrap4 .select2-selection--single {
        min-height: 38px;
        height: auto !important;
        border-radius: 6px;
        display: flex;
        align-items: center;
    }
    .report-filter-field .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        padding: 0.375rem 1.75rem 0.375rem 0.5rem;
        margin-top: 0;
    }
    .report-filter-field input.form-control {
        min-width: 120px;
    }
    .report-filter-field input[name="scheme_name"] {
        min-width: 160px;
    }
    .report-filter-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    .report-filter-actions .btn-filter {
        border-radius: 6px;
        padding: 0.4rem 1rem;
        font-weight: 600;
        min-height: 38px;
    }
    .report-filter-actions .btn-reset {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #dee2e6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #212529;
    }
    .report-filter-actions .btn-reset:hover {
        background: #f8f9fa;
        border-color: #adb5bd;
        color: #212529;
    }
    #reportsHubCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #reportsHubCard .table-responsive { overflow-x: auto; }
    }
    #reportsHubCard tbody tr.report-mec-listing-row { cursor: pointer; }
    #reportsHubCard tbody tr.report-mec-listing-row--view-only { opacity: 0.92; }
    #reportsHubCard .card-header .card-title { min-width: 0; }
    .mec-listing-assessment-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem 1.25rem;
        margin-left: auto;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #212529;
        white-space: nowrap;
    }
    .mec-listing-assessment-summary__item strong {
        font-weight: 700;
    }
    .mec-listing-assessment-summary__item--sat strong { color: #198754; }
    .mec-listing-assessment-summary__item--unsat strong { color: #dc3545; }
    .pms-dt-toolbar .mec-listing-assessment-summary { margin-bottom: 0; }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        @php
            $reportListTabStatus = report_index_status();
            $reportListResetUrl = $reportListTabStatus !== ''
                ? route('reports.index', ['status' => $reportListTabStatus])
                : route('reports.index');
            $reportFiltersOpen = ($reportTypeFilter ?? '') !== ''
                || ($initiatorFilter ?? '') !== ''
                || ($schemeUidFilter ?? '') !== ''
                || ($adpNumberFilter ?? '') !== ''
                || ($schemeNameFilter ?? '') !== ''
                || ($locationFilter ?? '') !== ''
                || ($departmentFilter ?? '') !== ''
                || ($reportRegionFilter ?? '') !== ''
                || ($reportAssessmentFilter ?? '') !== ''
                || ($reportStatusFilter ?? '') !== ''
                || ($dateFromFilter ?? '') !== ''
                || ($dateToFilter ?? '') !== ''
                || (($dateFieldFilter ?? '') === \App\Support\MecReportDateFieldFilter::PUBLISHED_DATE);
        @endphp
        <x-collapsible-filter-card
            :title="__('FIND REPORTS')"
            collapse-id="reportsIndexFiltersCollapse"
            form-id="reportsIndexFilterForm"
            :reset-url="$reportListResetUrl"
            :open="$reportFiltersOpen"
        >
            <div class="card-body">
                <form method="GET" action="{{ route('reports.index') }}" class="report-filter-form" id="reportsIndexFilterForm">
                    @if ($reportListTabStatus !== '')
                        <input type="hidden" name="status" value="{{ $reportListTabStatus }}">
                    @endif
                    @if (! empty($perPage))
                        <input type="hidden" name="per_page" value="{{ (int) $perPage }}">
                    @endif
                    <div class="report-filter-field">
                        <label for="report_filter_type">{{ __('Report Type') }}</label>
                        <select name="report_type" id="report_filter_type" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Types') }}</option>
                            @foreach (mec_report_type_filter_options() as $typeOption)
                                <option value="{{ $typeOption['value'] }}" {{ ($reportTypeFilter ?? '') === $typeOption['value'] ? 'selected' : '' }}>{{ $typeOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_initiator">{{ __('Initiator') }}</label>
                        <select name="initiator_id" id="report_filter_initiator" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Initiators') }}</option>
                            @foreach (mec_report_initiator_filter_options() as $initiatorOption)
                                <option value="{{ $initiatorOption['value'] }}" {{ (string) ($initiatorFilter ?? '') === $initiatorOption['value'] ? 'selected' : '' }}>{{ $initiatorOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_uid">{{ __('UID') }}</label>
                        <input type="text" name="scheme_uid" id="report_filter_uid" class="form-control form-control-sm" value="{{ $schemeUidFilter ?? '' }}" placeholder="{{ __('Search UID') }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_adp">{{ __('ADP') }}</label>
                        <input type="text" name="adp_number" id="report_filter_adp" class="form-control form-control-sm" value="{{ $adpNumberFilter ?? '' }}" placeholder="{{ __('Search ADP') }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_scheme_name">{{ __('Scheme Name') }}</label>
                        <input type="text" name="scheme_name" id="report_filter_scheme_name" class="form-control form-control-sm" value="{{ $schemeNameFilter ?? '' }}" placeholder="{{ __('Search scheme') }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_location">{{ __('Location') }}</label>
                        <select name="location" id="report_filter_location" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Locations') }}</option>
                            @foreach (mec_report_location_filter_options() as $locationOption)
                                <option value="{{ e($locationOption['value']) }}" {{ ($locationFilter ?? '') === $locationOption['value'] ? 'selected' : '' }}>{{ $locationOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_department">{{ __('Department') }}</label>
                        <select name="department_id" id="report_filter_department" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Departments') }}</option>
                            @foreach (mec_report_department_filter_options() as $departmentOption)
                                <option value="{{ $departmentOption['value'] }}" {{ (string) ($departmentFilter ?? '') === $departmentOption['value'] ? 'selected' : '' }}>{{ $departmentOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if(mec_report_list_shows_region_filter())
                    <div class="report-filter-field">
                        <label for="report_filter_region">{{ __('Region') }}</label>
                        <select name="mec_region_id" id="report_filter_region" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Regions') }}</option>
                            @foreach (mec_region_list_filter_options() as $regionOption)
                                <option value="{{ $regionOption['value'] }}" {{ (string) ($reportRegionFilter ?? '') === $regionOption['value'] ? 'selected' : '' }}>{{ $regionOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    @if(mec_report_list_shows_assessment_status_filter($listingMode ?? 'hub'))
                    <div class="report-filter-field">
                        <label for="report_filter_assessment">{{ __('Report Status') }}</label>
                        <select name="report_assessment_status" id="report_filter_assessment" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Report Statuses') }}</option>
                            @foreach (mec_report_assessment_status_filter_options() as $assessmentOption)
                                <option value="{{ $assessmentOption['value'] }}" {{ ($reportAssessmentFilter ?? '') === $assessmentOption['value'] ? 'selected' : '' }}>{{ $assessmentOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    @if (($listingMode ?? '') === 'published')
                    <div class="report-filter-field">
                        <label for="report_filter_date_field">{{ __('Date') }}</label>
                        <select name="date_field" id="report_filter_date_field" class="form-control form-control-sm report-filter-select">
                            @foreach (\App\Support\MecReportDateFieldFilter::options() as $dateFieldOption)
                                <option value="{{ $dateFieldOption['value'] }}" {{ ($dateFieldFilter ?? \App\Support\MecReportDateFieldFilter::VISIT_DATE) === $dateFieldOption['value'] ? 'selected' : '' }}>{{ $dateFieldOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div class="report-filter-field">
                        <label for="report_filter_date_from">{{ __('From date') }}</label>
                        <input type="date" name="date_from" id="report_filter_date_from" class="form-control form-control-sm" value="{{ $dateFromFilter ?? '' }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_date_to">{{ __('To date') }}</label>
                        <input type="date" name="date_to" id="report_filter_date_to" class="form-control form-control-sm" value="{{ $dateToFilter ?? '' }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="report_filter_status">{{ __('Status') }}</label>
                        <select name="report_status" id="report_filter_status" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Statuses') }}</option>
                            @foreach (mec_report_status_filter_options($listingMode ?? 'hub') as $statusOption)
                                <option value="{{ $statusOption['value'] }}" {{ ($reportStatusFilter ?? '') === $statusOption['value'] ? 'selected' : '' }}>{{ $statusOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="report-filter-actions">
                        <button type="submit" class="btn btn-primary btn-filter pms-btn-gradient">{{ __('Filter') }}</button>
                        <a href="{{ $reportListResetUrl }}" class="btn-reset" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="fas fa-sync-alt"></i></a>
                    </div>
                </form>
            </div>
        </x-collapsible-filter-card>

        <div class="card pms-mec-reports-listing-card pms-index-card" id="reportsHubCard">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between w-100 gap-2">
                <div class="d-flex flex-wrap align-items-center flex-fill min-width-0 gap-3">
                    <h3 class="card-title mb-0 text-truncate">{{ report_index_list_page_title() }}</h3>
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
                @include('reports.partials.new-monitoring-report-button')
            </div>
            <div class="card-body p-3">
                @php
                    $listingSummary = $listingSummary ?? ['total' => 0, 'satisfactory' => 0, 'unsatisfactory' => 0];
                @endphp
                <div id="mec-listing-assessment-summary" class="mec-listing-assessment-summary d-none" aria-label="{{ __('Report assessment summary') }}">
                    <span class="mec-listing-assessment-summary__item">
                        {{ __('Total Reports') }}: <strong>{{ number_format((int) ($listingSummary['total'] ?? 0)) }}</strong>
                    </span>
                    <span class="mec-listing-assessment-summary__item mec-listing-assessment-summary__item--sat">
                        {{ __('Satisfactory') }}: <strong>{{ number_format((int) ($listingSummary['satisfactory'] ?? 0)) }}</strong>
                    </span>
                    <span class="mec-listing-assessment-summary__item mec-listing-assessment-summary__item--unsat">
                        {{ __('Un-Satisfactory') }}: <strong>{{ number_format((int) ($listingSummary['unsatisfactory'] ?? 0)) }}</strong>
                    </span>
                </div>
                <div class="table-responsive">
                    @include('reports.partials.mec-listing-table', [
                        'tableId' => 'tblReportsHub',
                        'reportRows' => $reportRows,
                        'listingMode' => $listingMode ?? 'hub',
                    ])
                </div>
                @include('partials.listing-pagination', [
                    'paginator' => $paginator ?? null,
                    'perPage' => $perPage ?? 25,
                    'baseUrl' => request()->url(),
                ])
            </div>
        </div>
    </div>

    <div class="modal fade" id="report-in-processing-detail-modal" tabindex="-1" role="dialog" aria-labelledby="report-in-processing-detail-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="report-in-processing-detail-modal-title">
                        <i class="fas fa-file-alt mr-2"></i>{{ __('Submitted Report') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="report-in-processing-modal-body" style="min-height: 120px;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="report-published-detail-modal" tabindex="-1" role="dialog" aria-labelledby="report-published-detail-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="report-published-detail-modal-title">
                        <i class="fas fa-file-alt mr-2"></i>{{ __('Published Report') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="report-published-modal-body" style="min-height: 120px;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('partials.collapsible-filter-scripts')
@include('reports.partials.mec-listing-filter-form-scripts')
@include('reports.partials.mec-listing-datatable', [
    'tableId' => 'tblReportsHub',
    'listingMode' => $listingMode ?? 'hub',
    'emptyTableMessage' => __('No reports yet.'),
])
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
@endpush