@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Amenities</h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                                </li>
                                 <li class="bc-sep">›</li>
                                <li>
                                    <a href="/amenities/dashboard" class="bc-link">Amenities</a>
                                </li>
                                 <li class="bc-sep">›</li>
                                <li class="bc-active">Edit</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Flash Messages --}}
            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            @if($errors->any())
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="location-form" style="width:100%">
                            <div class="location-form-header">
                                <h3>Edit Amenity</h3>
                            </div>
                            <div class="location-form-body">
                                <form id="amenities_form"
                                      action="{{ url('/amenities/update/' . $amenities->id) }}"
                                      method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')

                                    <div class="row">

                                        {{-- Project --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Project <span class="text-danger">*</span>
                                                </label>
                                                <select class="form-control" id="project" name="project" required>
                                                    <option disabled value="">— Select Project —</option>
                                                    @foreach($projects as $project)
                                                        <option value="{{ $project->id }}"
                                                            {{ $amenities->project_id == $project->id ? 'selected' : '' }}>
                                                            {{ $project->project_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Master Plan --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Master Plan <span class="text-danger">*</span>
                                                </label>
                                                <select class="form-control" id="master_plan" name="master_plan" required>
                                                    <option disabled value="">— Select Master Plan —</option>
                                                    @foreach($masterPlans as $masterPlan)
                                                        <option value="{{ $masterPlan->id }}"
                                                            {{ $amenities->master_plan_id == $masterPlan->id ? 'selected' : '' }}>
                                                            {{ $masterPlan->master_plan_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Amenity Name --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Amenity Name <span class="text-danger">*</span>
                                                </label>
                                                <input type="text"
                                                       id="amenity_name"
                                                       name="amenity_name"
                                                       value="{{ old('amenity_name', $amenities->amenity_name) }}"
                                                       class="form-control"
                                                       placeholder="e.g. Swimming Pool"
                                                       required>
                                            </div>
                                        </div>

                                        {{-- Current Image + Replace --}}
                                        <div class="col-xl-4 col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">Amenity Image</label><br>

                                                {{-- Current image --}}
                                                @if($amenities->amenity_image)
                                                    <div class="mb-2">
                                                        <small class="text-muted d-block mb-1">Current:</small>
                                                        <img src="{{ asset('storage/amenities/' . $amenities->amenity_image) }}"
                                                             alt="Current Image"
                                                             height="70"
                                                             style="border-radius:6px; border:1px solid #dee2e6;
                                                                    object-fit:contain; background:#f8f9fa; padding:4px;">
                                                    </div>
                                                @endif

                                                {{-- New image preview --}}
                                                <div id="img_preview_box"
                                                     style="display:none; width:120px; height:80px;
                                                            background:#f8f9fa; border:1px solid #dee2e6;
                                                            border-radius:8px; overflow:hidden;
                                                            align-items:center; justify-content:center;
                                                            margin-bottom:8px;">
                                                    <img id="img_preview"
                                                         style="max-width:100%; max-height:100%; object-fit:contain;">
                                                </div>

                                                <label for="amenity_image" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                    {{ $amenities->amenity_image ? 'Replace Image' : 'Choose Image' }}
                                                </label>
                                                <input type="file"
                                                       id="amenity_image"
                                                       name="amenity_image"
                                                       class="file_input"
                                                       accept=".png,.jpg,.jpeg,.webp,.svg,.gif"
                                                       onchange="previewFile(this, 'img_preview', 'img_preview_box', 'img_status')">
                                                <small id="img_status" class="text-muted d-block mt-1"></small>
                                                <small class="text-muted">
                                                    PNG, JPG, SVG — max 10MB
                                                    @if($amenities->amenity_image)
                                                        · Leave empty to keep current
                                                    @endif
                                                </small>
                                            </div>
                                        </div>

                                        {{-- Current Icon + Replace --}}
                                        <div class="col-xl-4 col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">Amenity Icon</label><br>

                                                {{-- Current icon --}}
                                                @if($amenities->amenity_icon)
                                                    <div class="mb-2">
                                                        <small class="text-muted d-block mb-1">Current:</small>
                                                        <img src="{{ asset('storage/amenities/icons/' . $amenities->amenity_icon) }}"
                                                             alt="Current Icon"
                                                             height="60"
                                                             style="border-radius:6px; border:1px solid #dee2e6;
                                                                    object-fit:contain; background:#f8f9fa; padding:4px;">
                                                    </div>
                                                @endif

                                                {{-- New icon preview --}}
                                                <div id="icon_preview_box"
                                                     style="display:none; width:80px; height:80px;
                                                            background:#f8f9fa; border:1px solid #dee2e6;
                                                            border-radius:8px; overflow:hidden;
                                                            align-items:center; justify-content:center;
                                                            margin-bottom:8px;">
                                                    <img id="icon_preview"
                                                         style="max-width:100%; max-height:100%; object-fit:contain;">
                                                </div>

                                                <label for="amenity_icon" class="custom-file-upload">
                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                    {{ $amenities->amenity_icon ? 'Replace Icon' : 'Choose Icon' }}
                                                </label>
                                                <input type="file"
                                                       id="amenity_icon"
                                                       name="amenity_icon"
                                                       class="file_input"
                                                       accept=".png,.jpg,.jpeg,.webp,.svg,.gif"
                                                       onchange="previewFile(this, 'icon_preview', 'icon_preview_box', 'icon_status')">
                                                <small id="icon_status" class="text-muted d-block mt-1"></small>
                                                <small class="text-muted">
                                                    PNG, JPG, SVG — max 10MB
                                                    @if($amenities->amenity_icon)
                                                        · Leave empty to keep current
                                                    @endif
                                                </small>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="d-flex mt-2" style="gap:10px;">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save mr-1"></i> Update Amenity
                                        </button>
                                        <a href="/amenities/dashboard" class="btn btn-secondary">
                                            <i class="fas fa-times mr-1"></i> Cancel
                                        </a>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<script>
function previewFile(input, imgId, boxId, statusId) {
    if (!input.files || !input.files[0]) return;

    const file     = input.files[0];
    const img      = document.getElementById(imgId);
    const box      = document.getElementById(boxId);
    const statusEl = document.getElementById(statusId);
    const isSvg    = file.type === 'image/svg+xml' ||
                     file.name.toLowerCase().endsWith('.svg');

    const showPreview = (src) => {
        img.src           = src;
        box.style.display = 'flex';
    };

    const reader = new FileReader();

    if (isSvg) {
        reader.onload = e => {
            const blob = new Blob([e.target.result], { type: 'image/svg+xml;charset=utf-8' });
            showPreview(URL.createObjectURL(blob));
        };
        reader.readAsText(file);
    } else {
        reader.onload = e => showPreview(e.target.result);
        reader.readAsDataURL(file);
    }

    if (statusEl) {
        const sizeMB = (file.size / 1024 / 1024).toFixed(1);
        statusEl.className = 'text-success d-block mt-1';
        statusEl.innerHTML = `<i class="fas fa-check-circle mr-1"></i>${file.name} (${sizeMB} MB)`;
    }
}
</script>

@include('Partials.footer')