@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_general">
        <div class="card-title">
            <h3>A. General Information</h3>
        </div>
        <div class="card-toolbar rotate-180">
            <i class="ki-duotone ki-down fs-1"></i>
        </div>
    </div>
    <div id="service_general" class="collapse show">
        <div class="card-body">
            <h4 class="card-subtitle">Service Information</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="name" class="col-lg-3 col-form-label fw-semibold fs-6 required">Service Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <textarea class="form-control form-control-sm" name="name" id="name" rows="3">{{ old('name', $service->name ?? '') }}</textarea>
                        @error('name')
                            <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="description" class="col-lg-3 col-form-label fw-semibold fs-6 required">Service
                        Description</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <textarea class="form-control form-control-sm" name="description" id="description"
                            placeholder="Doing cleaning comprehensive cleaning service." rows="3">{{ old('description', $service->description ?? '') }}</textarea>
                        @error('description')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>

            <h4 class="card-subtitle">Service Documents</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="image" class="col-lg-3 col-form-label fw-semibold fs-6 required">Image</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <!-- Dropzone Section (appears below the image) -->
                        <div class="dropzone dropzone-image" id="dzImage" style="margin-top: 5px;">
                            <!--begin::Message-->
                            <div class="dz-message needsclick">
                                <i class="ki-duotone ki-file-up fs-3x text-primary"><span class="path1"></span><span
                                        class="path2"></span></i>
                                <!--begin::Info-->
                                <div class="ms-4">
                                    <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to
                                        upload.</h3>
                                    <span class="fs-7 fw-semibold text-gray-500">Upload file</span>
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Message-->
                        </div>
                        <p class="text-muted">(Support JPEG/JPG/PNG format only, with Maximum size of 2MB per image)</p>
                        <div id="image-container">
                            @php
                                $oldImages = old('image', []);
                                $storedImages =
                                    $application->services && $application->services->attachments
                                        ? $application->services->attachments
                                            ->where('type', 'image')
                                            ->pluck('path')
                                            ->toArray()
                                        : [];
                                $imagePaths = array_unique(!empty($oldImages) ? $oldImages : $storedImages);
                            @endphp

                            @if (!empty($imagePaths))
                                @foreach ($imagePaths as $image)
                                    <input type="hidden" name="image[]" value="{{ $image }}"
                                        class="uploaded-image">
                                @endforeach
                            @endif
                        </div>
                        @error('image')
                            <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="service_brochure" class="col-lg-3 col-form-label fw-semibold fs-6 required">Service
                        Brochure</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <!-- Dropzone Section (appears below the image) -->
                        <div class="dropzone dropzone-file" id="dzServiceBrochure" 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="service_brochure" id="service_brochure"
                            value="{{ old('service_brochure', $service_brochure->path ?? '') }}">
                        @error('brochure')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
        </div>
    </div>
</div>