<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('./partials/head'); -%>
</head>
<body onload="startTime()">
    <%- include('./partials/header_sidebar'); -%>

    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h3>Add City Highlight</h3>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                            <li class="breadcrumb-item"><%=lan.dashboard%></li>
                            <li class="breadcrumb-item"><a href="/city_highlights/list">City Highlights</a></li>
                            <li class="breadcrumb-item active">Add Highlight</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="needs-validation" novalidate action="/city_highlights/add" method="post" enctype="multipart/form-data">
                                <div class="row">

                                    <!-- Image Preview & File Input -->
                                    <div class="col-12 mb-3">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6">
                                                <div class="text-center form-group mb-2">
                                                    <img id="add-img-preview" width="160" height="120"
                                                        src="../images/dashboard/default/profile.png" alt="Place preview"
                                                        style="object-fit:cover; border-radius:8px; border:1px solid #ddd; background:#f8f9fa;">
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-form-label">Image <span class="text-danger">*</span></label>
                                                    <input class="form-control" style="height:47px;" type="file" name="image"
                                                        accept="image/*" onchange="previewHighlightImage(event)" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Select City -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label">Select City <span class="text-danger">*</span></label>
                                        <select class="js-example-basic-single form-control" name="city_id" required>
                                            <option value="" disabled selected>-- Choose City --</option>
                                            <% city_list.forEach((city) => { %>
                                                <option value="<%= city.id %>"><%= city.name %></option>
                                            <% }); %>
                                        </select>
                                    </div>

                                    <!-- Title -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label">Title <span class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="title"
                                            placeholder="e.g. Central Park, Hawa Mahal, Gateway of India" required>
                                    </div>

                                    <!-- Short Description -->
                                    <div class="col-12 form-group">
                                        <label class="col-form-label">Short Description <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="description" rows="3"
                                            placeholder="Enter short description or key highlights about this place" required></textarea>
                                    </div>

                                    <!-- Status -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label">Status</label>
                                        <select class="form-control" name="status">
                                            <option value="1" selected>Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>

                                </div>

                                <div class="text-end mt-4">
                                    <a href="/city_highlights/list" class="btn btn-secondary me-2">Cancel</a>
                                    <button class="btn btn-square btn-primary b-r-10" type="submit">Add City Highlight</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%- include('./partials/footer'); -%>
    <%- include('./partials/script'); -%>

    <script>
        function previewHighlightImage(event) {
            var file = event.target.files[0];
            if (!file) return;
            var reader = new FileReader();
            reader.onload = function () {
                document.getElementById('add-img-preview').src = reader.result;
            };
            reader.readAsDataURL(file);
        }
    </script>
</body>
</html>
