@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @php
        $getPhotoUrl = function ($path) {
            if (empty($path)) {
                return asset('storage/noimage.png');
            }

            if (str_starts_with($path, 'http://') || str_starts_with($path, 'https://')) {
                return $path;
            }

            return asset('storage/' . ltrim($path, '/'));
        };
    @endphp

    <style>
        .permit-page {
            min-height: calc(100vh - 120px);
        }

        .permit-toolbar-card,
        .permit-assessment-card {
            border: 0;
            border-radius: 18px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
            overflow: hidden;
        }

        .permit-card-header {
            background: linear-gradient(135deg, #028284, #1c8c90);
            color: #fff;
            padding: 14px 18px;
        }

        .permit-card-header h5 {
            margin: 0;
            color: #fff;
            font-weight: 700;
        }

        .permit-card-header small {
            color: rgba(255, 255, 255, .85);
        }

        .assessment-section-title {
            color: #1c8c90;
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #1c8c90;
        }

        .criteria-row {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            background: #fff;
        }

        .criteria-row:hover {
            background: #f8ffff;
            border-color: #1c8c90;
        }

        .result-box {
            background: #f8ffff;
            border: 1px solid #1c8c90;
            border-radius: 12px;
            padding: 14px;
        }

        .form-control:disabled,
        .form-select:disabled,
        .form-control[readonly] {
            background-color: #f8f9fa;
            color: #344767;
            opacity: 1;
        }

        .readonly-note {
            background: #f8ffff;
            border-left: 4px solid #028284;
            border-radius: 10px;
            padding: 10px 14px;
            color: #344767;
            font-size: .875rem;
        }

        .foto-show-card {
            position: relative;
            height: 100%;
            overflow: hidden;
            border: 1px solid #e9ecef;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 5px 14px rgba(0, 0, 0, .08);
            transition: all .2s ease;
        }

        .foto-show-card:hover {
            transform: translateY(-3px);
            border-color: #028284;
            box-shadow: 0 9px 20px rgba(0, 0, 0, .12);
        }

        .foto-show-image {
            width: 100%;
            height: 190px;
            object-fit: cover;
            background: #f8f9fa;
            cursor: zoom-in;
        }

        .foto-show-info {
            padding: 12px;
        }

        .foto-show-title {
            display: block;
            color: #344767;
            font-size: 13px;
            font-weight: 700;
        }

        .foto-show-hint {
            display: block;
            margin-top: 4px;
            color: #8392ab;
            font-size: 11px;
        }

        .foto-show-number {
            position: absolute;
            top: 9px;
            left: 9px;
            z-index: 2;
            display: flex;
            width: 30px;
            height: 30px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(2, 130, 132, .92);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

        .empty-photo-box {
            padding: 35px 20px;
            border: 2px dashed #cbd5e1;
            border-radius: 14px;
            background: #f8fafc;
            color: #67748e;
            text-align: center;
        }

        #photoPreviewModalImage {
            max-width: 100%;
            object-fit: contain;
        }
    </style>

    <div class="card shadow-lg mx-4 permit-toolbar-card">
        <div class="card-body p-3 d-flex justify-content-between align-items-center">
            <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                <i class="fas fa-circle-left me-1"></i>
                <span class="font-weight-bold">Kembali</span>
            </button>

            <span class="badge bg-success">
                <i class="fas fa-check-circle me-1"></i>
                Detail Penilaian
            </span>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger mx-4 mt-3">
            <strong>Validasi gagal:</strong>

            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('message'))
        <div class="alert alert-{{ session('class') === 'success' ? 'success' : 'danger' }} mx-4 mt-3">
            {{ session('message') }}
        </div>
    @endif

    <div class="container-fluid py-4 permit-page">
        <div id="permitAssessmentShow">
            <input type="hidden" id="total_value" value="0">

            <div class="row g-4">
                <div class="col-lg-12 col-xl-12">
                    <div class="card permit-assessment-card">
                        <div class="permit-card-header">
                            <h5>
                                <i class="fas fa-clipboard-check me-2"></i>
                                Detail Penilaian Permit
                            </h5>

                            <small>
                                Permit #{{ $list->id_permit }}
                                - {{ $list->uraian_pekerjaan }}
                            </small>
                        </div>

                        <div class="card-body">
                            <div class="readonly-note mb-4">
                                <i class="fas fa-info-circle me-1"></i>
                                Halaman ini hanya untuk melihat detail penilaian. Data yang sudah selesai tidak dapat diubah
                                dari halaman ini.
                            </div>

                            <div class="assessment-section-title">
                                1. Kualifikasi Penilaian
                            </div>

                            <div class="row">
                                @foreach ($mst_feedback_criteria as $index => $criteria)
                                    @php
                                        $isWajib = (int) ($criteria->wajib ?? 1) === 1;

                                        $selectedScore = old(
                                            'score_' . $criteria->id,
                                            $selectedScores[$criteria->id] ?? null,
                                        );
                                    @endphp

                                    <div class="col-md-6">
                                        <div class="criteria-row">
                                            <label
                                                class="form-label fw-bold mb-2 d-flex justify-content-between align-items-start gap-2">
                                                <span>
                                                    {{ $index + 1 }}.
                                                    {{ $criteria->nama_kualifikasi }}
                                                </span>

                                                @if ($isWajib)
                                                    <span class="badge bg-danger">Wajib</span>
                                                @else
                                                    <span class="badge bg-secondary">Opsional</span>
                                                @endif
                                            </label>

                                            <select class="form-select score-select" data-criteria-id="{{ $criteria->id }}"
                                                data-wajib="{{ $isWajib ? '1' : '0' }}" disabled>

                                                @if ($isWajib)
                                                    <option value="" data-score="0" data-description=""
                                                        @selected(empty($selectedScore))>
                                                        [Belum ada score penilaian]
                                                    </option>
                                                @else
                                                    <option value="" data-score="0"
                                                        data-description="NA - Kriteria ini tidak wajib dan tidak masuk perhitungan."
                                                        @selected(empty($selectedScore))>
                                                        NA - Tidak Dinilai
                                                    </option>
                                                @endif

                                                @foreach ($mst_feedback_scores[$criteria->id] ?? collect() as $score)
                                                    <option value="{{ $score->id }}" data-score="{{ $score->score }}"
                                                        data-description="{{ $score->desc }}"
                                                        @selected((string) $selectedScore === (string) $score->id)>
                                                        ({{ $score->score }})
                                                        - {{ $score->desc }}
                                                    </option>
                                                @endforeach
                                            </select>

                                            <small class="text-muted score-description d-block mt-2"></small>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <input type="hidden" id="average" value="{{ old('average', $list->average ?? 0) }}">
                            <input type="hidden" id="akreditasi" value="{{ old('akreditasi', $list->akreditasi ?? '') }}">

                            <div class="result-box mt-4 mb-4">
                                <label class="form-label fw-bold" style="color:#1c8c90;">
                                    Hasil Penilaian
                                </label>

                                <input type="text" id="total_penilaian" class="form-control text-center fw-bold"
                                    readonly>
                            </div>

                            <hr>

                            <div class="assessment-section-title">
                                2. Sanksi Kontraktor
                            </div>

                            <div class="mb-4">
                                <label for="sanksi_kontraktor" class="form-label">
                                    Sanksi Kontraktor
                                </label>

                                <select id="sanksi_kontraktor" class="form-select" disabled>
                                    <option value="">
                                        [Tidak Ada Sanksi]
                                    </option>

                                    @foreach ($sanksiOptions as $sanksi)
                                        <option value="{{ $sanksi->value }}" @selected((string) old('sanksi_kontraktor', $list->sanksi_kontraktor ?? '') === (string) $sanksi->value)>
                                            {{ $sanksi->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <hr>

                            <div class="assessment-section-title">
                                3. Insiden Kerja
                            </div>

                            <div class="mb-4">
                                <label for="ada_kecelakaan" class="form-label">
                                    Apakah ada Insiden Kerja di Permit ini?
                                </label>

                                <select id="ada_kecelakaan" class="form-select" disabled>
                                    <option value="">
                                        [Pilih Opsi]
                                    </option>

                                    <option value="1" @selected((string) old('ada_kecelakaan', $list->ada_kecelakaan ?? '') === '1')>
                                        Iya
                                    </option>

                                    <option value="0" @selected((string) old('ada_kecelakaan', $list->ada_kecelakaan ?? '') === '0')>
                                        Tidak ada
                                    </option>
                                </select>
                            </div>

                            <div class="row mb-4" id="additionalFields" style="display:none;">
                                <div class="col-md-4 mb-3">
                                    <label for="total_pekerja_terdampak" class="form-label">
                                        Total Pekerja Terdampak
                                    </label>

                                    <input type="number" id="total_pekerja_terdampak" class="form-control" min="0"
                                        readonly
                                        value="{{ old('total_pekerja_terdampak', $list->total_pekerja_terdampak ?? 0) }}">
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="pekerja_luka_ringan" class="form-label">
                                        Pekerja Luka Ringan
                                    </label>

                                    <input type="number" id="pekerja_luka_ringan" class="form-control" min="0"
                                        readonly value="{{ old('pekerja_luka_ringan', $list->pekerja_luka_ringan ?? 0) }}">
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="pekerja_luka_serius" class="form-label">
                                        Pekerja Luka Berat
                                    </label>

                                    <input type="number" id="pekerja_luka_serius" class="form-control" min="0"
                                        readonly
                                        value="{{ old('pekerja_luka_serius', $list->pekerja_luka_serius ?? 0) }}">
                                </div>
                            </div>

                            <hr>

                            {{-- FOTO PENDUKUNG --}}
                            <div class="assessment-section-title">
                                4. Foto Pendukung
                            </div>

                            @if ($fotoPenilaian->isNotEmpty())
                                <div class="row g-3">
                                    @foreach ($fotoPenilaian as $index => $foto)
                                        @php
                                            $fotoUrl = $getPhotoUrl($foto->file_path);
                                        @endphp

                                        <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6">
                                            <div class="foto-show-card">
                                                <div class="foto-show-number">
                                                    {{ $index + 1 }}
                                                </div>

                                                <img src="{{ $fotoUrl }}" alt="Foto Pendukung {{ $index + 1 }}"
                                                    class="foto-show-image"
                                                    onclick="openPhotoModal(
                                                        @js($fotoUrl),
                                                        @js('Foto Pendukung ' . ($index + 1))
                                                    )">

                                                <div class="foto-show-info">
                                                    <span class="foto-show-title">
                                                        Foto Pendukung {{ $index + 1 }}
                                                    </span>

                                                    <span class="foto-show-hint">
                                                        <i class="fas fa-magnifying-glass-plus me-1"></i>
                                                        Klik untuk melihat gambar
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="empty-photo-box">
                                    <i class="fas fa-image fa-2x mb-2"></i>

                                    <div class="fw-bold">
                                        Tidak ada foto pendukung
                                    </div>

                                    <small>
                                        Tidak ada foto yang disimpan pada penilaian ini.
                                    </small>
                                </div>
                            @endif
                        </div>

                        <div class="modal fade" id="photoPreviewModal" tabindex="-1"
                            aria-labelledby="photoPreviewModalLabel" aria-hidden="true">

                            <div class="modal-dialog modal-xl modal-dialog-centered">
                                <div class="modal-content border-0">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="photoPreviewModalLabel">
                                            Preview Foto Pendukung
                                        </h5>

                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Tutup">
                                        </button>
                                    </div>

                                    <div class="modal-body text-center p-3">
                                        <img id="photoPreviewModalImage" src="" alt="Preview Foto Pendukung"
                                            class="img-fluid border-radius-lg" style="max-height: 78vh;">
                                    </div>

                                    <div class="modal-footer">
                                        <a id="photoPreviewOpenNewTab" href="#" target="_blank"
                                            rel="noopener noreferrer" class="btn btn-primary">

                                            <i class="fas fa-up-right-from-square me-1"></i>
                                            Buka Gambar
                                        </a>

                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

                                            Tutup
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initScoreCalculation();
            initIncidentFields();
        });

        function initScoreCalculation() {
            const selects = document.querySelectorAll('.score-select');
            const resultInput = document.getElementById('total_penilaian');
            const totalInput = document.getElementById('total_value');
            const averageInput = document.getElementById('average');
            const indikatorInput = document.getElementById('akreditasi');

            if (
                !selects.length ||
                !resultInput ||
                !totalInput ||
                !averageInput ||
                !indikatorInput
            ) {
                return;
            }

            function showScoreDescription(select) {
                const selectedOption = select.options[select.selectedIndex];

                const description = selectedOption ?
                    selectedOption.dataset.description || '' :
                    '';

                const wrapper = select.closest('.criteria-row');

                const descriptionElement = wrapper ?
                    wrapper.querySelector('.score-description') :
                    null;

                if (descriptionElement) {
                    descriptionElement.textContent = description;
                }
            }

            function calculateTotalAndAverage() {
                let total = 0;
                let count = 0;

                selects.forEach(function(select) {
                    const selectedOption = select.options[select.selectedIndex];

                    const score = selectedOption ?
                        parseFloat(selectedOption.dataset.score || 0) :
                        0;

                    // score 0 = NA, tidak masuk perhitungan
                    if (score > 0) {
                        total += score;
                        count++;
                    }
                });

                const nilaiPersen = count > 0 ?
                    ((total / (count * 10)) * 100).toFixed(2) :
                    '0.00';

                const nilaiPersenNumber = parseFloat(nilaiPersen);

                let indikator = '-';
                let color = '#67748e';

                if (nilaiPersenNumber > 0 && nilaiPersenNumber < 50) {
                    indikator = 'KURANG';
                    color = 'red';
                } else if (nilaiPersenNumber >= 50 && nilaiPersenNumber < 80) {
                    indikator = 'SEDANG';
                    color = '#344767';
                } else if (nilaiPersenNumber >= 80) {
                    indikator = 'BAIK';
                    color = 'green';
                }

                resultInput.value =
                    `Total: ${total}, ` +
                    `Dinilai: ${count}, ` +
                    `Nilai: ${nilaiPersen}%, ` +
                    `Kualifikasi: ${indikator}`;

                resultInput.style.color = color;

                totalInput.value = total;
                averageInput.value = nilaiPersen;
                indikatorInput.value = indikator;
            }

            selects.forEach(function(select) {
                showScoreDescription(select);
            });

            calculateTotalAndAverage();
        }

        function initIncidentFields() {
            const incidentSelect = document.getElementById('ada_kecelakaan');
            const additionalFields = document.getElementById('additionalFields');

            if (!incidentSelect || !additionalFields) {
                return;
            }

            function toggleIncidentFields() {
                const hasIncident = incidentSelect.value === '1';

                additionalFields.style.display = hasIncident ?
                    'flex' :
                    'none';
            }

            toggleIncidentFields();
        }

        function openPhotoModal(imageUrl, imageTitle) {
            const modalElement =
                document.getElementById('photoPreviewModal');

            const modalImage =
                document.getElementById('photoPreviewModalImage');

            const modalTitle =
                document.getElementById('photoPreviewModalLabel');

            const openNewTabButton =
                document.getElementById('photoPreviewOpenNewTab');

            if (!modalElement || !modalImage) {
                return;
            }

            modalImage.src = imageUrl;

            if (modalTitle) {
                modalTitle.textContent =
                    imageTitle || 'Preview Foto Pendukung';
            }

            if (openNewTabButton) {
                openNewTabButton.href = imageUrl;
            }

            bootstrap.Modal
                .getOrCreateInstance(modalElement)
                .show();
        }
    </script>
@endpush