@extends('layouts.app')
@section('title', __('Modification'))

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
@include('partials.collapsible-filter-styles')
<style>
    #mecSimsModificationIndexCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #mecSimsModificationIndexCard .table-responsive { overflow-x: auto; }
    }
    .plan-filter-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    .plan-filter-card .card-body {
        padding: 1rem 1.25rem;
    }
    .plan-filter-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.5rem;
    }
    .plan-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .plan-filter-field label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #212529;
        margin-bottom: 0.35rem;
    }
    .plan-filter-field .form-control {
        border-radius: 6px;
        min-height: 38px;
        background: #fff;
    }
    .plan-filter-field select.form-control {
        min-width: 160px;
        appearance: auto;
    }
    .plan-filter-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    .plan-filter-actions .btn-filter {
        border-radius: 6px;
        padding: 0.4rem 1rem;
        font-weight: 600;
        min-height: 38px;
    }
    .plan-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;
    }
    .plan-filter-actions .btn-reset:hover {
        background: #f8f9fa;
        border-color: #adb5bd;
        color: #212529;
    }
    .spc-index-id-trigger {
        cursor: pointer;
        text-align: left;
    }
    .spc-index-id-trigger:hover .spc-index-id-trigger__label {
        text-decoration: underline;
    }
    .spc-index-id-trigger:focus {
        outline: 2px solid rgba(0, 123, 255, 0.45);
        outline-offset: 2px;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" id="mecSimsModificationIndexCard">
                @php
                    $msmFiltersOpen = trim((string) request('search', '')) !== ''
                        || (($statusFilter ?? 'all') !== 'all' && ($statusFilter ?? '') !== '');
                @endphp
                <x-collapsible-filter-card
                    :title="__('FIND REQUESTS')"
                    collapse-id="mecSimsModificationFiltersCollapse"
                    form-id="mecSimsModificationFilterForm"
                    :reset-url="route('mec-sims.modification.index')"
                    :open="$msmFiltersOpen"
                >
                    <div class="card-body">
                        <form method="get" action="{{ route('mec-sims.modification.index') }}" class="plan-filter-form" id="mecSimsModificationFilterForm">
                            <div class="plan-filter-field">
                                <label for="msm_search">{{ __('Search') }}</label>
                                <input type="text" name="search" id="msm_search" class="form-control form-control-sm"
                                       placeholder="{{ __('Search by ID, type…') }}" value="{{ request('search', '') }}">
                            </div>
                            <div class="plan-filter-field">
                                <label for="msm_status">{{ __('Status') }}</label>
                                <select name="status" id="msm_status" class="form-control form-control-sm">
                                    <option value="all" {{ ($statusFilter ?? 'all') === 'all' ? 'selected' : '' }}>{{ __('All') }}</option>
                                    <option value="meo_review" {{ ($statusFilter ?? '') === 'meo_review' ? 'selected' : '' }}>{{ __('Pending MEO review') }}</option>
                                    <option value="rd_review" {{ ($statusFilter ?? '') === 'rd_review' ? 'selected' : '' }}>{{ __('Forwarded to RD') }}</option>
                                    <option value="sdm_review" {{ ($statusFilter ?? '') === 'sdm_review' ? 'selected' : '' }}>{{ __('Verifier review') }}</option>
                                    <option value="dg_review" {{ ($statusFilter ?? '') === 'dg_review' ? 'selected' : '' }}>{{ __('DG review') }}</option>
                                    <option value="approved" {{ ($statusFilter ?? '') === 'approved' ? 'selected' : '' }}>{{ __('Approved') }}</option>
                                    <option value="rejected" {{ ($statusFilter ?? '') === 'rejected' ? 'selected' : '' }}>{{ __('Rejected') }}</option>
                                </select>
                            </div>
                            <div class="plan-filter-actions">
                                <button type="submit" class="btn btn-primary btn-filter">{{ __('Filter') }}</button>
                                <a href="{{ route('mec-sims.modification.index') }}" 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>

                <x-active-filter-chips :chips="$activeChips ?? []" />

                <x-layouts.index-card
                    tableId="example1"
                    :createRoute="($canRequestCancellation ?? false) ? route('mec-sims.modification.cancellation.create') : null"
                    tableHeading=""
                    :createLabel="__('New request')"
                    :headers="[__('ID'), __('Type'), __('Number of Schemes'), __('Status'), __('Initiated by'), __('Submitted')]"
                    :sortColumns="['plan_scheme_change_requests.id', '', '', 'plan_scheme_change_requests.status', '', 'plan_scheme_change_requests.created_at']"
                    :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('mec-sims.modification.index')])"
                    :pagination="$requests->withQueryString()->links('vendor.pagination.bootstrap-4')"
                >
                    @forelse ($requests as $r)
                        @php
                            $statusLabel = match ($r->status) {
                                'meo_review' => __('Pending MEO review'),
                                'rd_review' => __('Forwarded to RD'),
                                'sdm_review' => __('Forwarded to verifier'),
                                'dg_review' => __('Forwarded to DG'),
                                'approved' => __('Approved'),
                                'rejected' => __('Rejected'),
                                default => $r->status,
                            };
                            $typeLabel = $r->request_type === 'replacement' ? __('Replacement') : __('Cancellation');
                            $detailUrl = route('scheme-plan-changes.show', $r);
                        @endphp
                        <tr>
                            <td>
                                <div
                                    class="spc-index-id-trigger px-2 py-2"
                                    role="button"
                                    tabindex="0"
                                    data-detail-url="{{ $detailUrl }}"
                                    aria-label="{{ __('View request #:id', ['id' => $r->id]) }}"
                                >
                                    <span class="font-weight-bold spc-index-id-trigger__label">#{{ $r->id }}</span>
                                </div>
                            </td>
                            <td>{{ $typeLabel }}</td>
                            <td>{{ (int) ($r->lines_count ?? 0) > 0 ? (int) $r->lines_count : '—' }}</td>
                            <td><span class="badge badge-secondary">{{ $statusLabel }}</span></td>
                            <td>{{ $r->initiator?->name ?? '—' }}</td>
                            <td>{{ $r->created_at?->format('d M Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">{{ __('No requests found.') }}</td>
                        </tr>
                    @endforelse
                </x-layouts.index-card>
            </div>
        </div>
    </div>

    <div class="modal fade" id="schemePlanChangeDetailModal" tabindex="-1" role="dialog" aria-labelledby="schemePlanChangeDetailModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="schemePlanChangeDetailModalTitle">
                        <i class="fas fa-clipboard-list mr-2"></i>{{ __('Modification request details') }}
                    </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="schemePlanChangeDetailModalBody" style="min-height: 120px;">
                    <div class="text-center py-4 text-muted">
                        <div class="spinner-border" role="status"><span class="sr-only">{{ __('Loading…') }}</span></div>
                        <p class="mt-2 mb-0">{{ __('Loading…') }}</p>
                    </div>
                </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')
<script>
    function openSchemePlanChangeDetailModal(url) {
        if (!url) return;
        var $modal = $('#schemePlanChangeDetailModal');
        var $body = $('#schemePlanChangeDetailModalBody');
        $body.html('<div class="text-center py-4 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __('Loading…') }}</p></div>');
        $modal.modal('show');
        $.ajax({
            url: url,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).done(function (html) {
            $body.html(html);
        }).fail(function (xhr) {
            $body.html('<p class="text-muted text-center py-4 mb-0">{{ __('Failed to load request details.') }} (HTTP ' + (xhr.status || '?') + ').</p>');
        });
    }

    $(function () {
        if ($('#example1').length && typeof window.PmsIndexDataTable !== 'undefined') {
            PmsIndexDataTable.initLaravelPaginated('#example1', {
                scrollX: true,
                ordering: false,
            });

            PmsIndexDataTable.attachServerSort('#example1', {
                baseUrl: '{{ request()->url() }}',
                currentQuery: @json(request()->except(['page'])),
                currentSortCol: '{{ request('sort_column', 'plan_scheme_change_requests.id') }}',
                currentSortDir: '{{ request('sort_direction', 'desc') }}'
            });
        }

        $(document).on('click', '.spc-index-id-trigger', function () {
            openSchemePlanChangeDetailModal($(this).data('detail-url'));
        });
        $(document).on('keydown', '.spc-index-id-trigger', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                openSchemePlanChangeDetailModal($(this).data('detail-url'));
            }
        });
    });
</script>
@endpush