@extends('layouts.dashboard')
@php
    $user = Auth::user();
    $isAdmin = $isNotAdmin;
    $typeOfEvaluation = ($isPanelChair || $isAdvisory) ? $panel_evaluation : $individual_evaluation;
    $templateFile = ($isPanelChair || $isAdvisory) && isset($callPanelEvaluationFiles)? $callPanelEvaluationFiles['panel_evaluation_template_file'] : $evaluation_files['evaluation_template_file'];
    $instructionsFile = ($isPanelChair || $isAdvisory) && isset($callPanelEvaluationFiles)? $callPanelEvaluationFiles['panel_evaluation_guidelines_file'] : $evaluation_files['evaluation_guidelines_file'];
    $isFinalized = !empty($typeOfEvaluation->is_finalized);
    $panelChairBlocked = ($isPanelChair || $isAdvisory) && !$panelChairCanEvaluate;
    $isLocked = $isFinalized || $panelChairBlocked;
    $uploadedFile = $typeOfEvaluation?->submission_files;
    $hasExistingFile = $uploadedFile && !empty($uploadedFile->originalFilename);
    $metrics = $proposal->call->evaluationMetrics->map(function ($metric) {
                return [
                    'name'      => \Str::slug($metric->name_en, '_'),  // machine key for form + scores_json
                    'label'     => $metric->view_name_el ?? $metric->name_el,                   // display (or use name_en)
                    'min'       => $metric->min_value,
                    'max'       => $metric->max_value,
                    'threshold' => $metric->pass_threshold ?: null,    // 0 -> null
                ];
    })->all();
      $formAction = ($isPanelChair || $isAdvisory)
                    ? route('panel.proposal.evaluate', ['call' => $proposal->call, 'panel' => $proposal->panel, 'proposal' => $proposal])
                    : route('proposal.evaluate', ['call' => $proposal->call, 'proposal' => $proposal]);
@endphp
@section('nav-top-left')
    @foreach($user->getActiveRolesForCall($proposal->call) as $role)
        <div class="pill-role">
            <i class="fa fa-user"></i> {{$role->view_name}}
        </div>
    @endforeach
    <div class="page-title">Proposal by {{ $proposal->applicant->firstname .' '. $proposal->applicant->lastname }}</div>
    <div class="page-subtitle">Review Proposal Data</div>
@endsection
@section('nav-bottom-left')
    <ul>
        <li class=""><a href="{{route('dashboard')}}"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
        <li class=""><a href="{{route('call.view', ['call' => $proposal->call->hash_id])}}"><i
                    class="fas fa-list-ul"></i> Call Proposals</a></li>
        <li class="active"><a href="#"><i class="fas fa-ranking-star"></i> Proposal Evaluation</a></li>
    </ul>
@endsection
@section('content')
    @include('proposal.proposal-parts.proposal-subviews.nav_tabs')

    <div class="proposal-section-content evaluation-content active" data-type="evaluation">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if($isFinalized)
            <div class="alert alert-info">
                <i class="fas fa-lock"></i> This evaluation <b>has been finalized</b> and can no longer be edited.
            </div>
        @elseif($panelChairBlocked)
            <div class="alert alert-warning">
                <i class="fas fa-lock"></i> This proposal cannot be evaluated yet, as <b>both individual evaluators</b>
                must finalize their evaluations <b>first</b>.
            </div>
        @endif

        {{-- Instructions & template download --}}
        <div class="row mb-3">
            <div class="main-card col-12">
                <div class="main-card--inner">
                    <div class="main-card--top">
                        <h4>Evaluation Resources</h4>
                    </div>
                    <div class="main-card--bottom row ">
                        <div class="card-text col-sm-6 template-download-container">
                            <div class="card-text--inner">
                                <p class="download-template"><i class="fas fa-book-bookmark"></i> <strong>Evaluation
                                        Instructions</strong></p>
                                @if ($instructionsFile)
                                <a target="_blank" class="file-download"
                                    href="{{ route('download.file.' . (($isPanelChair || $isAdvisory) ? 'panel' : 'evaluator'), ['call' => $proposal->call->hash_id, 'file_hash_id' => $instructionsFile->hash_id]) }}">
                                    <i class="fas fa-download"></i> <strong>Download Instructions</strong>
                                </a>
                                    @else
                                    <a target="_blank" class="file-download"
                                       href="#">
                                        <i class="fas fa-download"></i> <strong>Download Instructions</strong>
                                    </a>
                                @endif
                            </div>
                        </div>
                        <div class="card-text col-sm-6 template-download-container">
                            <div class="card-text--inner">
                                <p class="download-template"><i class="fas fa-book-bookmark"></i> <strong>Individual
                                        Evaluation Template</strong></p>
                                @if ($instructionsFile)
                                <a target="_blank" class="file-download"
                                   href="{{ route('download.file.' . (($isPanelChair || $isAdvisory) ? 'panel' : 'evaluator'), ['call' => $proposal->call->hash_id, 'file_hash_id' => $templateFile->hash_id]) }}">
                                    <i class="fas fa-download"></i> <strong>Download template</strong>
                                </a>
                                @else
                                    <a target="_blank" class="file-download"
                                       href="#">
                                        <i class="fas fa-download"></i> <strong>Download template</strong>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Scores form --}}
        <div class="proposals-evaluation evaluator-evaluation-form row form-container">
            <form action="{{ $formAction }}" enctype="multipart/form-data" method="POST">
                @csrf
                @if($typeOfEvaluation && !empty($typeOfEvaluation->hash_id))
                    <input type="hidden" name="evaluation_hash_id" value="{{ $typeOfEvaluation->hash_id }}">
                @endif
                <fieldset {{ ($isLocked ||!$isAdmin) ? 'disabled' : '' }} style="border:0; padding:0; margin:0;"
                          class="row">
                    <div class="main-card col-sm-12 col-md-6">
                        <div class="row">
                            {{-- Scores --}}
                            <div class="main-card--inner scores row">
                                <h4 class="form-inner-title">Set Evaluation Score</h4>

                                @foreach($metrics as $metric)
                                    @php
                                        $score = data_get($typeOfEvaluation, "scores_json.{$metric['name']}");
                                    @endphp
                                    <div class="card-text {{ $metric['name'] }}">
                                        <div
                                            class="card-text--inner {{($isFinalized ||$isLocked || !$isAdmin) ? 'disabled':''}} row">
                                            <label for="metric_{{ $metric['name'] }}"
                                                   class="form-check-label range-label col-4">
                                                {{ $metric['label'] }} ({{ $metric['min'] }}–{{ $metric['max'] }})
                                                @if(!is_null($metric['threshold']))
                                                    <br><small class="text-muted">Minimum Required Score: {{ $metric['threshold'] }}</small>
                                                @endif
                                            </label>
                                            <div class="radios-container range col-8 row">
                                                <input type="range"
                                                       class="form-range metric-score"
                                                       name="{{ $metric['name'] }}"
                                                       min="{{ $metric['min'] }}"
                                                       max="{{ $metric['max'] }}"
                                                       step="1"
                                                       id="metric_{{ $metric['name'] }}"
                                                       data-threshold="{{ $metric['threshold'] ?? '' }}"
                                                       value="{{ $score ?? $metric['min'] }}">
                                                <div class="show-score">{{ $score ?? $metric['min'] }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <h4 class="form-inner-title total">Total Evaluation Score: <span id="totalScore"></span>
                                    / 100</h4>

                            </div>
                        </div>
                            {{-- Buttons --}}
                            <div class="form-buttons-container col-12 my-2 d-flex align-items-center justify-content-end">

                                {{-- Submitted only when Finalize is confirmed in the modal (enabled via JS) --}}
                                <input type="hidden" id="finalize_flag" name="is_finalized" value="1" disabled>

                                <div class="form-buttons inline">
                                    @if (!$isFinalized)
                                    <button @if($isFinalized) disabled="disabled" @endif
                                    class="{{ $isFinalized ? 'disabled' : '' }}" type="submit"
                                            formaction="{{ $formAction }}">
                                        <i class="fas fa-save"></i> SAVE
                                    </button>

                                        @php $isDisabled = !$hasExistingFile || $isLocked; @endphp
                                        <a style="border: none;border-radius: 5px;font-size: 14px;line-height: 18px;width: 160px;text-align: center;text-decoration:none; padding:15px 30px; cursor:{{$isDisabled ? 'not-allowed':'pointer'}}; background: {{ $isDisabled ? '#F3F4F6' : '#5EE2AE' }}; color: {{ $isDisabled ? '#9CA3AF' : '#136746' }}; height: 50px;"
                                           href="#" id="finalize_link"
                                           class="finalize {{ $isDisabled ? 'disabled' : '' }}"
                                           data-bs-toggle="modal"
                                           data-bs-target="#finalize_evaluation_modal">
                                            <i class="fas fa-lock" style="color: {{ $isDisabled ? '#6B7280' : '#136746' }};"></i> FINALIZE
                                        </a>
                                 @endif
                                </div>
                            </div>
                            {{-- Finalize confirmation modal --}}
                            <div class="modal fade" id="finalize_evaluation_modal" tabindex="-1" role="dialog"
                                 aria-labelledby="finalizeEvaluationLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header bg-red">
                                            <h3 class="modal-title" id="finalizeEvaluationLabel">Finalize Evaluation</h3>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body delete">
                                            <h6 class="text-center text-bold mt-3">Are you sure you want to finalize this evaluation?</h6>
                                            <p class="text-center">
                                                Finalizing confirms your evaluation is complete. No further changes can be made afterward.
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="col-xs-6">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="padding-left: 20px; padding-right: 20px;">Cancel</button>
                                            </div>
                                            <div class="col-xs-6">
                                                <button type="button" id="finalize_confirm" class="btn btn-primary" style="padding-left: 10px;padding-right: 20px;">
                                                    <i class="fas fa-lock"></i> Finalize
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    {{-- File upload --}}
                    <div class="main-card col-sm-12 col-md-6">
                        <div class="main-card--inner">
                            <div class="upload-box col-sm-12">
                                <div class="inner">
                                    @if ($isAdmin)
                                        <h4 class="form-inner-title">
                                            Upload {{($isPanelChair || $isAdvisory) ? 'Panel' : 'Individual'}}
                                            Evaluation File</h4>
                                    @endif
                                    @if($uploadedFile && !empty($uploadedFile->originalFilename))

                                        <div class="already-uploaded mb-2">
                                            <a class="file-download"
                                               href="{{ route('download.file.' . (($isPanelChair || $isAdvisory) ? 'panel' : 'evaluator'), ['call' => $proposal->call->hash_id, 'file_hash_id' => $uploadedFile->hash_id]) }}">
                                                <i class="fas fa-download"></i> {{ $uploadedFile->originalFilename }}
                                            </a>
                                        </div>
                                    @endif
                                    @if ($isAdmin && !$isFinalized)
                                        <div class="form-field upload-box">
                                            <input id="evaluators" type="file" name="file" class="form-control">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
@endsection
@section('javascripts')
    <script>
        (function () {
            const form = document.querySelector('.evaluator-evaluation-form');
            if (!form) return;

            const totalEl = document.getElementById('totalScore');
            const ranges = form.querySelectorAll('input[type="range"]');

            function updateTotal() {
                let total = 0;
                ranges.forEach(r => total += parseInt(r.value) || 0);
                if (totalEl) totalEl.textContent = total.toFixed(0);
            }

            ranges.forEach(range => {
                range.addEventListener('input', function () {
                    const score = this.parentElement.querySelector('.show-score');
                    if (score) score.textContent = this.value;
                    updateTotal();
                });
            });

            updateTotal();

            // --- Finalize gating: only allow finalizing when a file exists ---
            // --- Finalize via modal: only allow when a file exists -------------------
            const fileInput       = document.getElementById('evaluators');
            const finalizeLink    = document.getElementById('finalize_link');
            const finalizeFlag    = document.getElementById('finalize_flag');
            const finalizeConfirm = document.getElementById('finalize_confirm');
            const finalizeModal   = document.getElementById('finalize_evaluation_modal');
            const hasExistingFile = @json($hasExistingFile ?? false);

            const formEl     = form.querySelector('form');   // the actual <form> inside the wrapper
            const fieldset   = form.querySelector('fieldset');
            const formLocked = fieldset && fieldset.disabled;

            const openModal  = el => { if (el) el.classList.add('show'); };
            const closeModal = el => { if (el) el.classList.remove('show'); };

            if (finalizeLink && !formLocked) {
                // Keep the link enabled only while a file (existing or newly chosen) is present
                const syncFinalizeState = () => {
                    const fileChosen = fileInput && fileInput.files && fileInput.files.length > 0;
                    finalizeLink.classList.toggle('disabled', !(hasExistingFile || fileChosen));
                };
                if (fileInput) fileInput.addEventListener('change', syncFinalizeState);
                syncFinalizeState();

                // Open the confirmation modal
                finalizeLink.addEventListener('click', function (e) {
                    e.preventDefault();
                    if (finalizeLink.classList.contains('disabled')) return;
                    openModal(finalizeModal);
                });

                // Confirm -> set is_finalized=1 and submit the main form
                if (finalizeConfirm) {
                    finalizeConfirm.addEventListener('click', function () {
                        if (finalizeFlag) finalizeFlag.disabled = false;
                        closeModal(finalizeModal);
                        // requestSubmit() keeps the "only submit changed fields" handler below working
                        if (formEl && formEl.requestSubmit) formEl.requestSubmit();
                        else if (formEl) formEl.submit();
                    });
                }
            }

// Close handlers (mirrors the dashboard anchor/modal logic)
            document.querySelectorAll('[data-bs-dismiss="modal"], .btn-close').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    closeModal(btn.closest('.modal'));
                });
            });

            form.addEventListener('submit', function () {
                tracked.forEach(el => {
                    let changed;
                    if (el.type === 'file') changed = el.files && el.files.length > 0;
                    else                    changed = el.value !== initial.get(el);

                    // Disabled inputs are excluded from the submitted payload.
                    if (!changed) el.disabled = true;
                });
            });
        })();
    </script>
@endsection