@extends('layouts.app')
@section('title', 'Scheme plan changes')

@push('stylesheets')
@include('partials.filter-card-styles')
@include('partials.collapsible-filter-styles')
@include('partials.index-datatable-styles')
<style>
    #schemePlanChangesIndexCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #schemePlanChangesIndexCard .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-plan-trigger {
        cursor: pointer;
        text-align: left;
    }
    .spc-index-plan-trigger:hover .spc-index-plan-trigger__title {
        text-decoration: underline;
    }
    .spc-index-plan-trigger:focus {
        outline: 2px solid rgba(0, 123, 255, 0.45);
        outline-offset: 2px;
    }
    tr.spc-row-needs-review {
        background-color: #fff8e6;
    }
    tr.spc-row-needs-review td {
        border-top-color: #ffe08a;
        border-bottom-color: #ffe08a;
    }
    tr.spc-row-needs-review .spc-review-badge {
        background-color: #ffc107;
        color: #212529;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" id="schemePlanChangesIndexCard">
                @php
                    $spcFiltersOpen = trim((string) ($search ?? '')) !== ''
                        || ($planTypeFilter ?? '') !== ''
                        || ($requestTypeFilter ?? '') !== ''
                        || (($statusFilter ?? 'all') !== 'all' && ($statusFilter ?? '') !== '')
                        || (int) ($initiatedByFilter ?? 0) > 0;
                @endphp
                <x-collapsible-filter-card
                    :title="__('FIND REQUESTS')"
                    collapse-id="schemePlanChangesFiltersCollapse"
                    form-id="schemePlanChangesFilterForm"
                    :reset-url="route('scheme-plan-changes.index')"
                    :open="$spcFiltersOpen"
                >
                    <div class="card-body">
                        <form method="get" action="{{ route('scheme-plan-changes.index') }}" class="plan-filter-form" id="schemePlanChangesFilterForm">
                            <div class="pms-filter-field">
                                <label for="filter-search">Search</label>
                                <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                       placeholder="Search…" value="{{ $search ?? '' }}">
                            </div>
                            <div class="plan-filter-field">
                                <label for="spc_plan_type">Plan Type</label>
                                <select name="plan_type" id="spc_plan_type" class="form-control form-control-sm">
                                    <option value="">All Types</option>
                                    @foreach (['RVP', 'CVP', 'SVP', 'DRP', 'ERP', 'PMP'] as $planTypeOption)
                                        <option value="{{ $planTypeOption }}" {{ ($planTypeFilter ?? '') === $planTypeOption ? 'selected' : '' }}>{{ $planTypeOption }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="plan-filter-field">
                                <label for="spc_request_type">Request Type</label>
                                <select name="request_type" id="spc_request_type" class="form-control form-control-sm">
                                    <option value="">All Types</option>
                                    <option value="replacement" {{ ($requestTypeFilter ?? '') === 'replacement' ? 'selected' : '' }}>Replacement</option>
                                    <option value="cancellation" {{ ($requestTypeFilter ?? '') === 'cancellation' ? 'selected' : '' }}>Cancellation</option>
                                </select>
                            </div>
                            <div class="plan-filter-field">
                                <label for="spc_status">Status</label>
                                <select name="status" id="spc_status" class="form-control form-control-sm">
                                    <option value="all" {{ ($statusFilter ?? 'all') === 'all' ? 'selected' : '' }}>All</option>
                                    <option value="meo_review" {{ ($statusFilter ?? '') === 'meo_review' ? 'selected' : '' }}>MEO review</option>
                                    <option value="rd_review" {{ ($statusFilter ?? '') === 'rd_review' ? 'selected' : '' }}>RD review</option>
                                    <option value="sdm_review" {{ ($statusFilter ?? '') === 'sdm_review' ? 'selected' : '' }}>SDM review</option>
                                    <option value="dg_review" {{ ($statusFilter ?? '') === 'dg_review' ? 'selected' : '' }}>DG review</option>
                                    <option value="returned" {{ ($statusFilter ?? '') === 'returned' ? 'selected' : '' }}>Returned</option>
                                    <option value="approved" {{ ($statusFilter ?? '') === 'approved' ? 'selected' : '' }}>Approved</option>
                                    <option value="rejected" {{ ($statusFilter ?? '') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>
                            @if ($showInitiatedByFilter ?? false)
                            <div class="plan-filter-field">
                                <label for="spc_initiated_by">Initiated By</label>
                                <select name="initiated_by" id="spc_initiated_by" class="form-control form-control-sm">
                                    <option value="">All</option>
                                    @foreach ($initiatorFilterOptions ?? [] as $initiatorOption)
                                        <option value="{{ $initiatorOption->id }}" {{ (int) ($initiatedByFilter ?? 0) === (int) $initiatorOption->id ? 'selected' : '' }}>{{ $initiatorOption->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            <div class="plan-filter-actions">
                                <button type="submit" class="btn btn-primary btn-filter">Filter</button>
                                <a href="{{ route('scheme-plan-changes.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
                    :createRoute="can('scheme_plan_changes', 'add') ? route('scheme-plan-changes.create') : null"
                    tableHeading=""
                    createLabel="New request"
                    :headers="['ID', 'Plan', 'Type', 'Number of Schemes', 'Status', 'Initiated by', 'Submitted']"
                    :sortColumns="['id', null, 'request_type', null, 'status', null, 'created_at']"
                    :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => request()->url()])"
                    :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 SDM',
                                'dg_review' => 'Forwarded to DG',
                                'returned' => 'Returned for revision',
                                'approved' => 'Approved',
                                'rejected' => 'Rejected',
                                default => $r->status,
                            };
                            $typeLabel = $r->request_type === 'replacement' ? 'Replacement' : 'Cancellation';
                            $hidePlanDetails = (bool) ($r->initiated_via_mec_sims_modification ?? false);
                            $canOpenDetail = can('scheme_plan_changes', 'view') || can('scheme_plan_changes', 'list')
                                || user_can_review_mec_sims_modification_requests()
                                || ((int) $r->initiated_by === (int) login_user_id() && $hidePlanDetails && user_can_request_mec_sims_modification_cancellation());
                            $detailUrl = route('scheme-plan-changes.show', $r);
                            $needsReview = ! empty($reviewQueueIds[(int) $r->id]);
                        @endphp
                        <tr class="{{ $needsReview ? 'spc-row-needs-review' : '' }}">
                            <td>
                                @if ($hidePlanDetails && $canOpenDetail)
                                    <div
                                        class="spc-index-plan-trigger px-2 py-2"
                                        role="button"
                                        tabindex="0"
                                        data-detail-url="{{ $detailUrl }}"
                                        aria-label="View request details #{{ $r->id }}"
                                    >
                                        <span class="font-weight-bold spc-index-plan-trigger__title">#{{ $r->id }}</span>
                                    </div>
                                @else
                                    {{ $r->id }}
                                @endif
                            </td>
                            <td class="text-left p-0">
                                @if ($hidePlanDetails)
                                    <div class="px-2 py-2 text-muted">—</div>
                                @elseif ($canOpenDetail)
                                    <div
                                        class="spc-index-plan-trigger px-2 py-2"
                                        role="button"
                                        tabindex="0"
                                        data-detail-url="{{ $detailUrl }}"
                                        aria-label="View request details for plan #{{ $r->plan_id }}"
                                    >
                                        <span class="d-block font-weight-bold spc-index-plan-trigger__title">{{$r->plan->plan_type . '-' . \Carbon\Carbon::create()->month((int) $r->plan->month)->format('F') . '-' . $r->plan->year . ' ' }}</span>
                                    </div>
                                @else
                                    <div class="px-2 py-2">
                                        <span class="d-block font-weight-bold">#{{ $r->plan_id }}</span>
                                        <span class="small text-muted">
                                            {{ $r->plan?->draft_name ?: 'Visit plan' }}
                                            @if ($r->plan)
                                                · {{ strtoupper((string) $r->plan->plan_type) }}
                                                · {{ $r->plan->month }}/{{ $r->plan->year }}
                                            @endif
                                        </span>
                                    </div>
                                @endif
                            </td>
                            <td>{{ $typeLabel }}</td>
                            <td>{{ (int) ($r->lines_count ?? 0) > 0 ? (int) $r->lines_count : '—' }}</td>
                            <td>
                                @if ($needsReview)
                                    <span class="badge spc-review-badge badge-pill d-inline-block mb-1">{{ __('Action required') }}</span>
                                @endif
                                <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="7" 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,
            });
            PmsIndexDataTable.attachServerSort('#example1', {
                baseUrl: '{{ request()->url() }}',
                currentQuery: @json(request()->except(['page'])),
                currentSortCol: '{{ request('sort_col', 'id') }}',
                currentSortDir: '{{ request('sort_dir', 'desc') }}'
            });
        }

        $(document).on('click', '.spc-index-plan-trigger', function () {
            openSchemePlanChangeDetailModal($(this).data('detail-url'));
        });
        $(document).on('keydown', '.spc-index-plan-trigger', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                openSchemePlanChangeDetailModal($(this).data('detail-url'));
            }
        });

        var params = new URLSearchParams(window.location.search);
        var openId = params.get('open');
        if (openId) {
            openSchemePlanChangeDetailModal(@json(url('scheme-plan-changes')) + '/' + encodeURIComponent(openId));
            params.delete('open');
            var next = window.location.pathname + (params.toString() ? '?' + params.toString() : '') + window.location.hash;
            if (window.history && window.history.replaceState) {
                window.history.replaceState({}, '', next);
            }
        }
    });
</script>
@endpush