@props(['service' => new \App\Models\Service()])

<div class="card border-0 shadow-none">
    <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse"
        data-bs-target="#service_certificate">
        <div class="card-title">
            <h3>D. Service Certifications and Standards</h3>
        </div>
        <div class="card-toolbar rotate-180">
            <i class="ki-duotone ki-down fs-1"></i>
        </div>
    </div>
    <div id="service_certificate" class="collapse show">
        <div class="card-body">

            <h4 class="card-subtitle required">Additional Green Services Certification (as per GGP Guideline 3.0)</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="sirim_eco_label" class="col-lg-3 col-form-label fw-semibold fs-6 required">SIRIM
                        Eco-Label</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 mt-3">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="sirim_eco_label"
                                id="sirim_eco_label_yes" value="1"
                                {{ old('sirim_eco_label', $service->sirim_eco_label ?? '') == '1' ? 'checked' : '' }}>
                            <label class="form-check-label" for="sirim_eco_label_yes">Yes</label>
                        </div>

                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="sirim_eco_label"
                                id="sirim_eco_label_no" value="0"
                                {{ old('sirim_eco_label', $service->sirim_eco_label ?? '') == '0' ? 'checked' : '' }}>
                            <label class="form-check-label" for="sirim_eco_label_no">No</label>
                        </div>
                        @error('sirim_eco_label')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="eco_label_certificate" class="col-lg-3 col-form-label fw-semibold fs-6">Other Eco-Label
                        Certificate</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="eco_label_certificate"
                            id="eco_label_certificate"
                            value="{{ old('eco_label_certificate', $service->eco_label_certificate ?? '') }}">
                        @error('eco_label_certificate')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>

            <h4 class="card-subtitle required">Others Compliance with Government Requirement</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="compliance_government" class="col-lg-3 col-form-label fw-semibold fs-6 required">Others
                        Compliance with
                        Government Requirement</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 mt-3">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="compliance_government"
                                id="compliance_government_yes" value="1"
                                {{ old('compliance_government', $service->compliance_government ?? '') == '1' ? 'checked' : '' }}>
                            <label class="form-check-label" for="compliance_government_yes">Yes</label>
                        </div>

                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="compliance_government"
                                id="compliance_government_no" value="0"
                                {{ old('compliance_government', $service->compliance_government ?? '') == '0' ? 'checked' : '' }}>
                            <label class="form-check-label" for="compliance_government_no">No</label>
                        </div>
                        @error('compliance_government')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!-- Dropzone Section (Initially Hidden) -->
                <div id="dropzone-container" class="mt-3" style="display: none;">
                    <div class="col-lg-8">
                        <div class="dropzone dropzone-file" id="dzCompliance1" style="margin-top: 5px;">
                            <!--begin::Message-->
                            <div class="dz-message needsclick">
                                <button type="button" class="btn btn-sm btn-secondary">Choose File</button>
                                <span class="align-self-center text-muted ms-2">No file selected</span>
                            </div>
                            <!--end::Message-->
                        </div>
                        <p class="text-muted">(Support PDF format only with max size of 10MB)</p>
                        <input type="hidden" name="compliance_1" id="compliance_1"
                            value="{{ old('compliance_1', $compliance_1->path ?? '') }}">
                        @error('compliance_1')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <div class="col-lg-8">
                        <div class="dropzone dropzone-file" id="dzCompliance2" style="margin-top: 5px;">
                            <!--begin::Message-->
                            <div class="dz-message needsclick">
                                <button type="button" class="btn btn-sm btn-secondary">Choose File</button>
                                <span class="align-self-center text-muted ms-2">No file selected</span>
                            </div>
                            <!--end::Message-->
                        </div>
                        <p class="text-muted">(Support PDF format only with max size of 10MB)</p>
                        <input type="hidden" name="compliance_2" id="compliance_2"
                            value="{{ old('compliance_2', $compliance_2->path ?? '') }}">
                        @error('compliance_2')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!-- end dropzone-->
                </div>
            </div>
        </div>
    </div>
</div>