@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">Add</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>Add Amenity</h3>
                            </div>
                            <div class="location-form-body">
                                <form id="amenities_form"
                                      action="{{ url('/amenities/store') }}"
                                      method="POST"
                                      enctype="multipart/form-data">
                                    @csrf

                                    <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 selected disabled value="">— Select Project —</option>
                                                    @foreach($projects as $project)
                                                        <option value="{{ $project->id }}"
                                                            {{ old('project') == $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 selected disabled value="">— Select Master Plan —</option>
                                                    @foreach($masterPlans as $masterPlan)
                                                        <option value="{{ $masterPlan->id }}"
                                                            {{ old('master_plan') == $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') }}"
                                                       class="form-control"
                                                       placeholder="e.g. Swimming Pool"
                                                       required>
                                            </div>
                                        </div>

                                        {{-- Amenity Image --}}
                                        <div class="col-xl-4 col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Amenity Image <span class="text-danger">*</span>
                                                </label><br>

                                                {{-- Preview box --}}
                                                <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> 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')"
                                                       required>
                                                <small id="img_status" class="text-muted d-block mt-1"></small>
                                                <small class="text-muted">PNG, JPG, SVG — max 10MB</small>
                                            </div>
                                        </div>

                                        {{-- Amenity Icon --}}
                                        <div class="col-xl-4 col-12">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Amenity Icon <span class="text-danger">*</span>
                                                </label><br>

                                                {{-- Preview box --}}
                                                <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> 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')"
                                                       required>
                                                <small id="icon_status" class="text-muted d-block mt-1"></small>
                                                <small class="text-muted">PNG, JPG, SVG — max 10MB</small>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="d-flex mt-2" style="gap:10px;">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-plus mr-1"></i> Add 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')