{% extends 'admin/master.html' %}
{% load static %}

{% block content %}
<style>
.hospital-image-container {
    position: relative;
    display: inline-block;
    margin: 30px;
    width: 150px;
    height: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Adds shadow to the container */
    border-radius: 8px;
}

.hospital-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(126, 126, 126, 0.1);
}

.remove-btn {
    position: absolute;
    background-color: #7a61e2;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    display: none;
}

#hospital-image-previews {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    position: relative;
}

#remove-all-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    display: none; /* Hide by default */
}

.remove-all-btn {
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertically center the icon */
    justify-content: center; /* Horizontally center the icon */
    background-color: #656c73; /* Color for the button */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px; /* Adjust width as needed */
    height: 30px; /* Adjust height as needed */
    text-align: center;
    font-size: 16px; /* Adjust font size as needed */
    font-weight: 300; /* Light font weight */
    cursor: pointer;
    padding: 0; /* Remove default padding */
}

.remove-all-btn i {
    margin: 0; /* Remove margin around the icon if any */
}

.hospital-logo {
    width: 150px;
    height: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}
</style>

<!--**********************************  Content body start  ***********************************-->
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles mx-0">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h4>Hi, welcome back!</h4>
                    <span class="ml-1">Update</span>
                </div>
            </div>
            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Form</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Update</a></li>
                </ol>
            </div>
        </div>
        <!-- row -->
        <div class="row">
            <div class="col-xl-12 col-xxl-12">
                <div class="card">
                    <div class="card-header dark-font">
                        <h4 class="card-title">Hospital Update</h4>
                        <a href="{% url "hospital_list" %}"><button type="button" class="btn btn-rounded btn-primary ml-auto"><span class="btn-icon-left text-primary"><i class="fa fa-list"></i></span>List</button></a>
                    </div>
                    <div class="card-body">
                        <div class="basic-form">
                            <form method="post" action="" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="form-row">
                                    <div class="form-group col-12">
                                        <label>Hospital Name</label>
                                        <input type="text" class="form-control" name="hospital_name" placeholder="Input Hospital Name" value="{{ hospital.hospital_name }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>User Name</label>
                                        <input type="text" class="form-control" name="user_name" placeholder="Input Username" value="{{ hospital.user.username }}" readonly> 
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Phone Number</label>
                                        <input type="text" class="form-control" name="phone_number" placeholder="Input Phone Number" value="{{ hospital.phone_number }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Email</label>
                                        <input type="email" class="form-control" name="email" placeholder="Input Email" value="{{ hospital.user.email }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>City</label>
                                        <input type="text" class="form-control" name="city" placeholder="Input City" value="{{ hospital.city }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Latitude</label>
                                        <input type="text" class="form-control" name="latitude" placeholder="Input Latitude" value="{{ hospital.latitude }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Longitude</label>
                                        <input type="text" class="form-control" name="longitude" placeholder="Input Longitude" value="{{ hospital.longitude }}">
                                    </div>

                                    <div class="form-group col-12">
                                        <label>Opening Time</label>
                                            <span class="input-group-append"></span>
                                            <input type="time" class="form-control" name="open_time" value="{{ hospital.open_time|time:'H:i' }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Closing Time</label>
                                        <span class="input-group-append"></span>
                                        <input type="time" class="form-control" name="close_time" value="{{ hospital.close_time|time:'H:i' }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Website</label>
                                        <input type="text" class="form-control" name="website_url" placeholder="Input Website" value="{{ hospital.website_url }}">
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Type</label>
                                        <select id="inputState" class="form-control" name="type">
                                            <option value="hospital" {% if hospital.type == 'hospital' %}selected{% endif %}>Hospital</option>
                                            <option value="clinic" {% if hospital.type == 'clinic' %}selected{% endif %}>Clinic</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Status</label>
                                        <select id="inputState" class="form-control" name="status">
                                            <option value="1" {% if hospital.status == 1 %}selected{% endif %}>Active</option>
                                            <option value="0" {% if hospital.status == 0 %}selected{% endif %}>Inactive</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Is Recommended</label>
                                        <select id="inputState" class="form-control" name="isRecommended">
                                            <option value="0" {% if hospital.is_recommended == 0 %}selected{% endif %}>No</option>
                                            <option value="1" {% if hospital.is_recommended == 1 %}selected{% endif %}>Yes</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Address</label>
                                        <textarea class="form-control" name="address" rows="3" id="comment" placeholder="Input Address">{{ hospital.address }}</textarea>
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Description</label>
                                        <textarea class="form-control" name="description" rows="3" id="comment" placeholder="Input Description">{{ hospital.description }}</textarea>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group col-12">
                                        <label>Hospital Images</label>
                                        <div class="input-group mb-3">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="hospital-image-input" name="hospital_images" multiple>
                                                <label class="custom-file-label" for="hospital-image-input">Choose files</label>
                                            </div>
                                        </div>
                                        <div id="hospital-image-previews" class="d-flex justify-content-between flex-wrap">
                                            <!-- Existing images should be displayed here if any -->
                                            {% for image in hospital_images %}
                                            <div class="hospital-image-container">
                                                <img src="{{ image.image.url }}" alt="Hospital Image" class="hospital-image">
                                                <button class="remove-btn" data-image="{{ image.id }}">x</button>
                                            </div>
                                            {% empty %}
                                                <p>No images available.</p>
                                            {% endfor %}
                                            <button id="remove-all-btn" type="button" class="remove-all-btn">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="form-group col-12">
                                        <label>Hospital Logo</label>
                                        <div class="input-group mb-3">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="hospital-logo-input" name="hospital_logo">
                                                <label class="custom-file-label" for="hospital-logo-input">Choose file</label>
                                            </div>
                                        </div>
                                        {% if hospital.hospital_logo %}
                                            <img src="{{ hospital.hospital_logo.url }}" id="hospital-logo-preview" alt="Hospital Logo" style="width: 100px; height: 50px;" class="hospital-logo">
                                        {% else %}
                                            <img src="{% static 'images/avatar.png' %}" alt="Default Hospital Logo" style="width: 100px; height: 50px;">
                                        {% endif %}
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--**********************************  Content body end  ***********************************-->

<script>
// Image preview for logo
document.getElementById('hospital-logo-input').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('hospital-logo-preview').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

// Image preview and remove functionality
const imageInput = document.getElementById('hospital-image-input');
const imagePreviews = document.getElementById('hospital-image-previews');
const removeAllBtn = document.getElementById('remove-all-btn');

imageInput.addEventListener('change', function(event) {
    const files = event.target.files;
    if (files.length) {
        removeAllBtn.style.display = 'block';
    }
    
    for (const file of files) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const container = document.createElement('div');
            container.className = 'hospital-image-container';

            const img = document.createElement('img');
            img.className = 'hospital-image';
            img.src = e.target.result;
            container.appendChild(img);

            const removeBtn = document.createElement('button');
            removeBtn.className = 'remove-btn';
            removeBtn.textContent = 'x';
            removeBtn.addEventListener('click', function() {
                container.remove();
                if (imagePreviews.children.length === 0) {
                    removeAllBtn.style.display = 'none';
                }
            });
            container.appendChild(removeBtn);

            imagePreviews.appendChild(container);
        };
        reader.readAsDataURL(file);
    }
});

// Remove all images
removeAllBtn.addEventListener('click', function() {
    imagePreviews.innerHTML = '';
    removeAllBtn.style.display = 'none';
});
</script>
{% endblock content %}