@extends('layouts.onboarding')

@section('content')
    @include('onboarding.steps', ['currentStep' => 'policy-agreement'])
    @include('partials.messages')
    <div class="step-content">
        <h3>Policy Agreement</h3>
        <hr>

        <form action="{{ route('onboarding.store', 'policy-agreement') }}" method="POST" id="policy-agreement-form">
            @csrf

            @forelse($policies as $policy)
                <div class="policy-block mb-4">
                    <h5>{{ $policy->title }}</h5>

                    <div class="policy-container" style="height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 15px;">
                        @if($policy->file_url)
                            @if(\Illuminate\Support\Str::endsWith(strtolower($policy->filepath), '.pdf'))
                                <embed src="{{ $policy->file_url }}" type="application/pdf" width="100%" height="350px" />
                            @else
                                <p>
                                    This policy is provided as a document.
                                    <a href="{{ $policy->file_url }}" target="_blank" rel="noopener">
                                        Open "{{ $policy->title }}" <i class="fa fa-external-link-alt"></i>
                                    </a>
                                </p>
                            @endif
                        @else
                            {!! $policy->content !!}
                        @endif
                    </div>

                    <div class="form-group mt-2">
                        <div class="form-check">
                            <input
                                class="form-check-input policy-accept-checkbox"
                                type="checkbox"
                                id="policy_{{ $policy->id }}"
                                name="accepted_policies[]"
                                value="{{ $policy->id }}"
                                required
                            >
                            <label class="form-check-label" for="policy_{{ $policy->id }}">
                                I have read and agree to "{{ $policy->title }}"
                            </label>
                        </div>
                    </div>
                </div>
                @if(!$loop->last)
                    <hr>
                @endif
            @empty
                <p class="text-muted">You have no outstanding policies to accept.</p>
            @endforelse

            <div class="d-flex justify-content-between mt-3">
                <a href="{{ route('onboarding.navigate', 'documents') }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Previous
                </a>
                <button type="submit" class="btn btn-primary" id="submit-btn" {{ $policies->isNotEmpty() ? 'disabled' : '' }}>
                    Next <i class="fa fa-arrow-right"></i>
                </button>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkboxes = document.querySelectorAll('.policy-accept-checkbox');
        const submitBtn = document.getElementById('submit-btn');

        // No pending policies - button is already enabled server-side, nothing to wire up.
        if (!checkboxes.length) {
            return;
        }

        function evaluate() {
            const allChecked = Array.from(checkboxes).every((cb) => cb.checked);
            submitBtn.disabled = !allChecked;
        }

        checkboxes.forEach((cb) => cb.addEventListener('change', evaluate));
        evaluate();
    });
</script>
@endsection