@extends('layouts.app')

@section('title', 'Field Analysis — ' . $application->applicant_name)

@push('styles')
<style>
    /* ── FA Tab Bar ───────────────────────────────────────────────── */
    .fa-tab-bar {
        position: sticky;
        top: 56px; /* topbar height */
        z-index: 100;
        background: #fff;
        border-bottom: 2px solid #dee2e6;
    }

    .fa-tab-bar .nav-tabs {
        border-bottom: none;
        flex-nowrap: nowrap;
    }

    .fa-tab-bar .nav-link {
        white-space: nowrap;
        font-size: .85rem;
        font-weight: 500;
        color: #6c757d;
        border: none;
        border-bottom: 2px solid transparent;
        padding: .65rem 1rem;
        border-radius: 0;
        transition: color .15s, border-color .15s;
    }

    .fa-tab-bar .nav-link:hover {
        color: var(--bpdlh-green);
        border-bottom-color: #dee2e6;
    }

    .fa-tab-bar .nav-link.active {
        color: var(--bpdlh-green);
        border-bottom: 2px solid var(--bpdlh-green);
        background: transparent;
        font-weight: 700;
    }

    /* Status icon next to tab label */
    .tab-status-icon { font-size: .8rem; }

    /* Floating submit button */
    #floatingSubmitWrap {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 200;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-3 px-md-4 py-4">

    {{-- ── Header ───────────────────────────────────────────────────── --}}
    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="{{ route('applications.show', $application->id) }}"
           class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div class="flex-fill">
            <h5 class="mb-0 fw-bold" style="color:var(--bpdlh-green);">
                <i class="bi bi-geo-alt me-2"></i>Field Analysis (FA)
            </h5>
            <small class="text-muted">
                {{ $application->applicant_name }}
                <span class="mx-1">—</span>
                <span class="font-monospace">{{ $application->id }}</span>
            </small>
        </div>
        <div>{!! $application->status_badge !!}</div>
    </div>

    {{-- ── Flash messages (in-page; layout also shows them in content-area) ── --}}
    @if(session('fa_success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ session('fa_success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ── Catatan dari DA ──────────────────────────────────────────── --}}
    @if($application->verifikasiDa?->catatan_untuk_fa)
        <div class="alert alert-info mb-4">
            <i class="bi bi-info-circle me-2"></i>
            <strong>Catatan dari Desk Analysis:</strong><br>
            {{ $application->verifikasiDa->catatan_untuk_fa }}
        </div>
    @endif

    {{-- ── Tab Nav Bar (sticky, scrollable) ───────────────────────── --}}
    @php
        $sectionStatuses = $fa->sectionStatuses();
        $tabDefs = [
            1 => ['label' => 'Identitas',   'icon' => 'bi-person-vcard'],
            2 => ['label' => 'Lahan',        'icon' => 'bi-geo'],
            3 => ['label' => 'Peta',         'icon' => 'bi-map'],
            4 => ['label' => 'Biaya',        'icon' => 'bi-calculator'],
            5 => ['label' => 'Tallysheet',   'icon' => 'bi-table'],
            6 => ['label' => 'Foto & Submit','icon' => 'bi-camera-fill'],
        ];
    @endphp

    <div class="fa-tab-bar">
        <ul class="nav nav-tabs flex-nowrap overflow-auto" id="faTabs" role="tablist"
            style="-ms-overflow-style:none;scrollbar-width:none;">
            @foreach($tabDefs as $n => $tab)
                @php
                    $status = $sectionStatuses[$n] ?? 'empty';
                    $statusIcon = match($status) {
                        'done'    => '<i class="bi bi-check-circle-fill text-success tab-status-icon ms-1"></i>',
                        'partial' => '<i class="bi bi-circle-half text-warning tab-status-icon ms-1"></i>',
                        default   => '<i class="bi bi-circle text-muted tab-status-icon ms-1"></i>',
                    };
                @endphp
                <li class="nav-item" role="presentation">
                    <button class="nav-link"
                            id="tab-section{{ $n }}"
                            data-bs-toggle="tab"
                            data-bs-target="#section{{ $n }}"
                            data-section="{{ $n }}"
                            type="button"
                            role="tab"
                            aria-controls="section{{ $n }}">
                        <i class="{{ $tab['icon'] }} me-1"></i>{{ $n }}. {{ $tab['label'] }}
                        {!! $statusIcon !!}
                    </button>
                </li>
            @endforeach
        </ul>
    </div>

    {{-- ── Tab Content ──────────────────────────────────────────────── --}}
    <div class="tab-content mt-3" id="faTabContent">
        @include('fa.sections.section1', ['application' => $application, 'fa' => $fa])
        @include('fa.sections.section2', ['application' => $application, 'fa' => $fa])
        @include('fa.sections.section3', ['application' => $application, 'fa' => $fa])
        @include('fa.sections.section4', ['application' => $application, 'fa' => $fa])
        @include('fa.sections.section5', ['application' => $application, 'fa' => $fa])
        @include('fa.sections.section6', ['application' => $application, 'fa' => $fa])
    </div>

</div>{{-- end container --}}

{{-- ── Floating Submit Button ──────────────────────────────────── --}}
@php
    $allSectionsDone = $fa->isAllSectionsDone();
@endphp
<div id="floatingSubmitWrap">
    <form method="POST" action="{{ route('fa.submit', $application->id) }}"
          onsubmit="return confirm('Submit Field Analysis? Semua seksi sudah terisi.')">
        @csrf
        @if($allSectionsDone)
            <button type="submit"
                    class="btn btn-success shadow"
                    style="background:var(--bpdlh-green);border-color:var(--bpdlh-green);font-weight:600;padding:.65rem 1.2rem;border-radius:50rem;">
                <i class="bi bi-send-check-fill me-2"></i>Submit Kunjungan
            </button>
        @else
            <button type="button"
                    class="btn btn-secondary shadow"
                    disabled
                    title="Selesaikan semua seksi terlebih dahulu"
                    style="font-weight:600;padding:.65rem 1.2rem;border-radius:50rem;opacity:.65;cursor:not-allowed;"
                    data-bs-toggle="tooltip"
                    data-bs-title="Selesaikan semua seksi terlebih dahulu">
                <i class="bi bi-send-check-fill me-2"></i>Submit Kunjungan
            </button>
        @endif
    </form>
</div>

@push('scripts')
<script>
(function () {
    'use strict';

    const APP_ID   = {{ $application->id }};
    const LS_KEY   = 'fa_active_tab_' + APP_ID;
    const tabEls   = document.querySelectorAll('#faTabs [data-bs-toggle="tab"]');

    // ── Determine which tab to activate on load ──────────────────────
    function resolveInitialSection() {
        // 1) URL query param ?section=N
        const urlParams = new URLSearchParams(window.location.search);
        const qSection  = parseInt(urlParams.get('section'), 10);
        if (qSection >= 1 && qSection <= 6) return qSection;

        // 2) localStorage
        const stored = parseInt(localStorage.getItem(LS_KEY), 10);
        if (stored >= 1 && stored <= 6) return stored;

        // 3) First section that is not 'done'
        const statuses = @json($sectionStatuses);
        for (let n = 1; n <= 6; n++) {
            if (statuses[n] !== 'done') return n;
        }

        // 4) Fallback: tab 1
        return 1;
    }

    // ── Activate tab ─────────────────────────────────────────────────
    function activateSection(n) {
        const btn = document.querySelector('#faTabs [data-section="' + n + '"]');
        if (!btn) return;
        const tabInstance = bootstrap.Tab.getOrCreateInstance(btn);
        tabInstance.show();
    }

    // ── Persist active tab on change ─────────────────────────────────
    tabEls.forEach(function (btn) {
        btn.addEventListener('shown.bs.tab', function () {
            const n = parseInt(btn.dataset.section, 10);
            if (n) localStorage.setItem(LS_KEY, n);
        });
    });

    // ── Expose helper for Prev/Next navigation in section forms ──────
    window.faGoToSection = function (n) {
        localStorage.setItem(LS_KEY, n);
        activateSection(n);
        // Scroll tab bar into view
        const bar = document.getElementById('faTabs');
        if (bar) bar.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    };

    // ── Init ─────────────────────────────────────────────────────────
    document.addEventListener('DOMContentLoaded', function () {
        activateSection(resolveInitialSection());

        // Bootstrap tooltip on disabled submit
        const tooltipEls = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        tooltipEls.forEach(function (el) {
            new bootstrap.Tooltip(el);
        });
    });
})();
</script>
@endpush
@endsection