@extends('layouts.app')

@section('title', 'Evaluation Report Plan — PC-IV / PC-V')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('schemes.partials.plan-scheme-selection-surface-styles')
<style>
    .pms-evaluation-pc-toggles {
        --pms-scheme-accent: #3E53A4;
        --pms-scheme-accent-deep: #2e3570;
        --pms-scheme-soft: #c5cff5;
        --pms-scheme-surface: #f7f8fd;
        --pms-scheme-border: rgba(62, 83, 164, 0.14);
    }
    .pms-evaluation-pc-toggles.card {
        border: 1px solid var(--pms-scheme-border) !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 16px rgba(62, 83, 164, 0.08) !important;
        overflow: hidden;
        background: #fff !important;
    }
    .pms-evaluation-pc-toggles.card::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, var(--pms-scheme-accent-deep) 0%, var(--pms-scheme-accent) 45%, var(--pms-scheme-soft) 100%);
        opacity: 0.95;
    }
    .pms-evaluation-pc-toggles .card-body {
        background: var(--pms-scheme-surface) !important;
    }
    .pms-evaluation-pc-toggles .custom-switch .custom-control-label {
        font-weight: 600;
        font-size: 0.9rem;
        color: #334155;
        padding-top: 0.15rem;
        cursor: pointer;
    }
    .pms-evaluation-pc-toggles .custom-switch .custom-control-input:checked ~ .custom-control-label {
        color: var(--pms-scheme-accent);
    }
    body.dark-mode .pms-evaluation-pc-toggles.card {
        background: #252b31 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    body.dark-mode .pms-evaluation-pc-toggles .card-body {
        background: #252b31 !important;
    }
    body.dark-mode .pms-evaluation-pc-toggles .custom-switch .custom-control-label {
        color: #e2e8f0;
    }
</style>
@endpush

@section('contents')
<section class="content pms-schemes-page">
    <div class="container-fluid">
        @if (session('warning'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                {{ session('warning') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="{{ __('Close') }}"><span aria-hidden="true">&times;</span></button>
            </div>
        @endif

        @if (! empty($planSelectionMeta))
            <div class="alert alert-info d-flex flex-wrap align-items-center justify-content-between mb-3">
                <span>
                    <strong>{{ __('New visit plan') }}</strong>
                    — {{ $planSelectionMeta['plan_type'] }}
                    · {{ \Carbon\Carbon::createFromDate((int) $planSelectionMeta['year'], (int) $planSelectionMeta['month'], 1)->format('F Y') }}
                    @if (! empty($mecRegionName))
                        <span class="mx-1">·</span> {{ __('Region') }}: <strong>{{ $mecRegionName }}</strong>
                    @endif
                </span>
            </div>
        @endif

        <form method="get" action="{{ route('plan.create.evaluation-pc') }}" id="evaluationPcToggleForm" class="mb-3">
            <div class="card pms-evaluation-pc-toggles shadow-sm border-0">
                <div class="card-body py-3 px-4">
                    <h6 class="text-uppercase small font-weight-bold mb-3 d-flex align-items-center" style="letter-spacing: 0.08em; color: var(--pms-scheme-accent, #3E53A4);">
                        <i class="fas fa-sliders-h mr-2" aria-hidden="true"></i>
                        {{ __('Listing scope') }}
                    </h6>
                    <div class="d-flex flex-wrap space-between column-gap-4 row-gap-3">
                        <div class="custom-control custom-switch">
                            <input type="checkbox"
                                   class="custom-control-input"
                                   id="toggle_pc_iv"
                                   name="pc_iv"
                                   value="with"
                                   @checked(($pcIvFilter ?? 'all') === 'with')
                                   onchange="this.form.submit()">
                            <label class="custom-control-label" for="toggle_pc_iv">{{ __('Only PC-IV') }}</label>
                        </div>
                        &nbsp;
                        &nbsp;
                        <div class="custom-control custom-switch">
                            <input type="checkbox"
                                   class="custom-control-input"
                                   id="toggle_pc_v"
                                   name="pc_v"
                                   value="with"
                                   @checked(($pcVFilter ?? 'all') === 'with')
                                   onchange="this.form.submit()">
                            <label class="custom-control-label" for="toggle_pc_v">{{ __('Only PC-V') }}</label>
                        </div>
                        <a href="{{ route('plan.create.evaluation-pc') }}" class="btn btn-sm btn-outline-secondary rounded ml-md-auto">{{ __('Reset') }}</a>
                    </div>
                </div>
            </div>
        </form>

        <div class="row mt-3">
            <div class="col-12" id="schemesTableCard">
                <x-layouts.index-card
                    :createRoute="null"
                    :tableHeading="__('Schemes')"
                    :showCreateButton="false"
                    :headers="$evaluationPcTableHeaders"
                    :pagination="''"
                >
                    <tr>
                        @foreach ($evaluationPcTableHeaders as $_h)
                            <td class="text-muted">—</td>
                        @endforeach
                    </tr>
                </x-layouts.index-card>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
    $(function () {
        if ($('#example1').length && typeof window.PmsIndexDataTable !== 'undefined') {
            PmsIndexDataTable.init('#example1', {
                paging: false,
                searching: false,
                info: false,
                order: [[0, 'asc']],
                columnDefs: [{ orderable: false, targets: '_all' }],
            });
        }
    });
</script>
@endpush