@extends('layout.guest')

@section('styles')
    <style>
        #self-check-container p,
        #self-check-container ul {
            font-size: 18px !important;
        }

        #self-check-container .select2 span {
            font-size: 18px !important;
        }

        #certificate_requirement p,
        #certificate_requirement ul {
            font-size: 18px !important;
        }
    </style>
@endsection

@section('content')
    <x-container title="Type 2 Service - {{ $productGroup->name }}">
        <div class="px-20" id="self-check-container">
            <div class="bg-light-gray p-4 rounded-3 mb-4">
                <div class="mb-4">
                    <p class="mb-4">Congratulations!</p>
                    <p class="mb-4">We are glad to inform that your service is qualified to apply for MyHIJAU Mark Service.</p>
                    <p class="mb-2">Below are the detailed requirements for the online application process. Please ensure
                        submit the documents accordingly.
                    </p>
                    <p><strong>{{ 'Company/Organization Policy' }}</strong></p>
                    <ul class="mb-4">
                        <li>{{ 'A documented policy detailing green initiatives (e.g., 3R practices, the use of LED Lighting, energy efficient equipment.' }}
                        </li>
                    </ul>
                    <p><strong>{{ 'Certificate of Competency' }}</strong></p>
                    <ul class="mb-4">
                        @foreach ($competencyCertificates ?? collect() as $doc)
                            <li>{{ $doc->name ?? $doc }}</li>
                        @endforeach
                    </ul>
                    <p><strong>{{ 'Standard Operating Procedure (SOP)' }}</strong></p>
                    <ul class="mb-4">
                        <li>{{ 'A detailed SOP on delivering your services the service, emphasizing environmental considerations.' }}
                        </li>
                    </ul>

                    <p>{{ 'For detailed instructions, you can download the guideline:' }}</p>
                    <div class="d-flex">
                        <a href="{{ route('self-check.type2') }}" class="btn btn-secondary rounded-pill mt-3 me-2">Back</a>
                        <form action="{{ route('self-check.download-type2-pdf', $productGroup->id) }}" method="post" target="_blank">
                            @csrf
                            @foreach ($competencyCertificates as $certification)
                                <input type="hidden" name="competency_certificates[]" value="{{ $certification }}">
                            @endforeach
                            <button type="submit" class="btn btn-download rounded-pill mt-3">Download In PDF</button>
                        </form>
                        <!-- <a href="{{ route('company.register.form') }}" id="submit_btn" class="btn btn-success rounded-pill mt-3 ms-2">Understand and Agree to Proceed</a> -->
                        <!-- Redirect to recaptcha -->
                        <a href="{{ route('self-check.recaptcha') }}" id="submit_btn" class="btn btn-success rounded-pill mt-3 ms-2">Understand and Agree to Proceed</a>
                    </div>
                </div>
            </div>
        </div>
    </x-container>
@endsection

@section('scripts')
    <script></script>
@endsection