@props(['product' => new \App\Models\Product()])

<div class="card border-0 shadow-none">
    <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#product_3c">
        <div class="card-title">
            <h3>C. Product Certifications & Standards</h3>
        </div>
        <div class="card-toolbar rotate-180">
            <i class="ki-duotone ki-down fs-1"></i>
        </div>
    </div>
    <div id="product_3c" class="collapse show">
        <div class="card-body">
            <h4 class="card-subtitle">Additional Green Product Certification (as per GGP Guideline 3.0)</h4>
            <div class="card-subbody">
                <div class="row mb-3">
                    <!-- Dropzone Section (appears below the image) -->
                    <div class="dropzone dropzone-file" id="dzGreenCert" 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>
                    <input type="hidden" name="green_cert" id="green_cert" value="{{ old('green_cert', $product->attachments->firstWhere('type', 'green_cert')?->path) }}">
                    @error('green_cert')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
            </div>
            <h4 class="card-subtitle">Others Compliance with Government Requirement</h4>
            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="ggp_energy_star" class="col-lg-3 col-form-label fw-semibold fs-6 required">ENERGY STAR</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="ggp_energy_star" id="ggp_energy_star_1" value="1" @checked(old('ggp_energy_star', $product->ggp_energy_star) == 1)>
                            <label class="form-check-label" for="ggp_energy_star_1">Yes</label>
                        </div>
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="ggp_energy_star" id="ggp_energy_star_0" value="0" @checked(old('ggp_energy_star', $product->ggp_energy_star) == 0)>
                            <label class="form-check-label" for="ggp_energy_star_0">No</label>
                        </div>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="ggp_epeat" class="col-lg-3 col-form-label fw-semibold fs-6 required">EPEAT</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="ggp_epeat" id="ggp_epeat_1" value="1" @checked(old('ggp_epeat', $product->ggp_epeat) == 1)>
                            <label class="form-check-label" for="ggp_epeat_1">Yes</label>
                        </div>
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="ggp_epeat" id="ggp_epeat_0" value="0" @checked(old('ggp_epeat', $product->ggp_epeat) == 0)>
                            <label class="form-check-label" for="ggp_epeat_0">No</label>
                        </div>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="ggp_mcmc" class="col-lg-3 col-form-label fw-semibold fs-6 required">MCMC certification</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="ggp_mcmc" id="ggp_mcmc_1" value="1" @checked(old('ggp_mcmc', $product->ggp_mcmc) == 1)>
                            <label class="form-check-label" for="ggp_mcmc_1">Yes</label>
                        </div>
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="ggp_mcmc" id="ggp_mcmc_0" value="0" @checked(old('ggp_mcmc', $product->ggp_mcmc) == 0)>
                            <label class="form-check-label" for="ggp_mcmc_0">No</label>
                        </div>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6">Other Eco-label or Certification</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div id="other_certificate_group">
                            @forelse ($product->attachments->where('type', 'other_cert')->sortBy('index') as $otherCert)
                                <div class="row mb-2 other-cert-input-group">
                                    <div class="col-lg-5 align-self-center">
                                        <input type="text" class="form-control form-control-sm"
                                            name="other_cert_name[{{ $otherCert->index - 1 }}]" id="other_cert_name_{{ $otherCert->index - 1 }}"
                                            value="{{ old('other_cert_name.'.$otherCert->index - 1, $otherCert->ggp_label) }}">
                                    </div>
                                    <div class="col-lg-6">
                                        <!-- Dropzone Section (appears below the image) -->
                                        <div class="dropzone dropzone-file form-control-sm" id="dzOtherCert_{{ $otherCert->index - 1 }}">
                                            <!--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>
                                        <input type="hidden" name="other_cert[{{ $otherCert->index - 1 }}]" id="other_cert_{{ $otherCert->index - 1 }}" value="{{ old('other_cert.' . $otherCert->index - 1, $otherCert->path) }}">
                                        @error('other_cert')
                                            <span class="text-sm text-danger">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                    @if (!$loop->first)
                                        <div class="col-lg-1">
                                            <button type="button" class="btn btn-link"><i class="fas fa-times text-danger btn-delete-other-cert"></i></button>
                                        </div>
                                    @endif
                                </div>
                            @empty
                                <div class="row mb-2 other-cert-input-group">
                                    <div class="col-lg-5 align-self-center">
                                        <input type="text" class="form-control form-control-sm" name="other_cert_name[0]" id="other_cert_name_0" value="{{ old('other_cert_name.0') }}">
                                    </div>
                                    <div class="col-lg-6">
                                        <!-- Dropzone Section (appears below the image) -->
                                        <div class="dropzone dropzone-file form-control-sm" id="dzOtherCert_0">
                                            <!--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>
                                        <input type="hidden" name="other_cert[0]" id="other_cert_0" value="{{ old('other_cert.0') }}">
                                        @error('other_cert')
                                            <span class="text-sm text-danger">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            @endforelse
                        </div>
                        <button type="button" class="btn btn-sm btn-secondary w-100 mt-5" id="btn_add_other_cert">+</button>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
        </div>
    </div>
</div>