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

{% block content %}
<style>
    .dark-font {
    color: #000000;
}

.form-group {
    position: relative;
}

.badge-inside {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    background-color: #ffaa16;
    color: rgb(31, 29, 29);
}

.form-control {
    padding-right: 80px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header .btn {
    margin-left: 10px;
}

.category-image {
    max-width: 150px;
    width: 150px;
    height: 150px;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.image-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.image-label {
    margin-right: 10px;
    min-width: 120px;
    text-align: right;
}

.img-thumbnail {
    width: 100px;     /* Set the width of the image */
    height: 100px;    /* Set the height of the image */
    padding: 10px;
    object-fit: fill;    /* Maintain aspect ratio and fill the space */
}

.shadow-box {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Add a subtle shadow */
    border-radius: 8px;    /* Rounded corners for the image */
    padding: 5px;
    background-color: #fff;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #ffffff;
        /* border: 1px solid #343957; */
    }

    ::-webkit-scrollbar-thumb {
        background: #343957;
        border-radius: 10px;
        /* border: 1px solid #343957; */
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #6b51df;
        padding: 10px
    }

    
    .text-danger {
        color: #ff4942 !important;
    }
</style>

<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">Edit Laboratory</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="{% url "admin_dashboard" %}">Admin</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Laboratory Edit</a></li>
                </ol>
            </div>
        </div>

        <!-- row -->
        <div class="row">
            <div class="col-xl-12 col-xxl-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Edit Laboratory</h4>
                        <div>
                            <a href="{% url 'laboratories_list' %}">
                                <button title="list" type="button" class="btn btn-primary">
                                    List
                                </button>
                            </a>
                        </div>
                    </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>Lab Image</label>
                                        {% if lab.lab_image %}
                                            <img id="lab_image_preview" class="img-thumbnail mt-2 mb-2 shadow-box" src="{{ lab.lab_image.url }}" style="display: block;" />
                                        {% else %}
                                            <img id="lab_image_preview" class="img-thumbnail mt-2 mb-2 shadow-box" style="display: none;" />
                                        {% endif %}
                                        <input type="file" class="form-control" name="lab_image" accept="image/*" onchange="previewImage(event, 'lab_image_preview')">
                                    </div>


                                    <div class="form-group col-12">
                                        <label>Lab Name</label>
                                        <input type="text" class="form-control" value="{{lab.lab_name}}" name="lab_name" placeholder="Enter Lab Name" required>
                                    </div>

                                    <div class="form-group col-12">
                                        <label>Address</label>
                                        <textarea class="form-control" name="address" rows="3" placeholder="Enter Lab Address">{{lab.address}}</textarea>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Username</label>
                                        <input type="text" class="form-control" value="{{lab.user.username}}" name="username" placeholder="Enter username"  required>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>City</label>
                                        <input type="text" class="form-control" value="{{lab.city}}" name="city" placeholder="Enter City" required>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>State/Province</label>
                                        <input type="text" class="form-control" value="{{lab.state_province}}" name="state_province" placeholder="Enter State/Province" required>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Postal Code</label>
                                        <input type="text" class="form-control" value="{{lab.postal_code}}" name="postal_code" placeholder="Enter Postal Code" required>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Contact Number</label>
                                        <input type="text" class="form-control" value="{{lab.contact_number}}" name="contact_number" placeholder="Enter Contact Number" required>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Alternate Number</label>
                                        <input type="text" class="form-control" value="{{lab.alternate_number}}" name="alternate_number" placeholder="Enter Alternate Number">
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Email</label>
                                        <input type="email" class="form-control" value="{{lab.user.email}}" name="email" placeholder="Enter Email" required >
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Website</label>
                                        <input type="url" class="form-control" value="{{lab.website}}" name="website" placeholder="Enter Website URL">
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Operating Hours</label>
                                        <input type="text" class="form-control" value="{{ lab.operating_hours }}" name="operating_hours" placeholder="Enter Operating Hours">
                                    </div>
                                
                                    <div class="form-group col-6">
                                        <label>Specializations</label>
                                        <select class="form-control" name="specializations" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="pediatric_diagnostics" {% if lab.specializations == "pediatric_diagnostics" %}selected{% endif %}>Pediatric Diagnostics</option>
                                            <option value="cardiac_diagnostics" {% if lab.specializations == "cardiac_diagnostics" %}selected{% endif %}>Cardiac Diagnostics</option>
                                            <option value="general_practice" {% if lab.specializations == "general_practice" %}selected{% endif %}>General Practice</option>
                                        </select>
                                    </div>
                                
                                    <div class="form-group col-12">
                                        <label>Lab Commission</label>
                                        <input type="text" class="form-control" name="lab_commission" value="{{ lab.lab_commission }}" placeholder="Enter Lab Commission">
                                    </div>
                                
                                    <div class="form-group col-12">
                                        <label>Description</label>
                                        <textarea class="form-control" name="description" rows="3" placeholder="Enter Lab Description">{{ lab.description }}</textarea>
                                    </div>
                                
                                    <div class="form-group col-12">
                                        <label>Insurance Accepted</label>
                                        <textarea class="form-control" name="insurance_accepted" rows="3" placeholder="Enter Insurance Information">{{ lab.insurance_accepted }}</textarea>
                                    </div>
                                
                                    <div class="form-group col-6">
                                        <label>Payment Methods</label>
                                        <select class="form-control" name="payment_methods" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="Credit Card" {% if lab.payment_methods == "Credit Card" %}selected{% endif %}>Credit Card</option>
                                            <option value="Debit Card" {% if lab.payment_methods == "Debit Card" %}selected{% endif %}>Debit Card</option>
                                            <option value="Cash" {% if lab.payment_methods == "Cash" %}selected{% endif %}>Cash</option>
                                        </select>
                                    </div>
                                
                                    <div class="form-group col-6">
                                        <label>Emergency Services</label>
                                        <select class="form-control" name="emergency_services" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="1" {% if lab.emergency_services == 1 %}selected{% endif %}>Yes</option>
                                            <option value="0" {% if lab.emergency_services == 0 %}selected{% endif %}>No</option>
                                        </select>
                                    </div>
                                
                                    <div class="form-group col-6">
                                        <label>Home Sample Collection</label>
                                        <select class="form-control" name="home_sample_collection" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="1" {% if lab.home_sample_collection == 1 %}selected{% endif %}>Yes</option>
                                            <option value="0" {% if lab.home_sample_collection == 0 %}selected{% endif %}>No</option>
                                        </select>
                                    </div>
                                
                                    <div class="form-group col-6">
                                        <label>Report Delivery Options</label>
                                        <select class="form-control" name="report_delivery_options" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="Online" {% if lab.report_delivery_options == "Online" %}selected{% endif %}>Online</option>
                                            <option value="Email" {% if lab.report_delivery_options == "Email" %}selected{% endif %}>Email</option>
                                            <option value="Physical Copy" {% if lab.report_delivery_options == "Physical Copy" %}selected{% endif %}>Physical Copy</option>
                                        </select>
                                    </div>
                                    

                                    
                                    <div class="form-group col-6">
                                        <label>Promote</label>
                                        <select class="form-control" name="promote" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="1" {% if lab.promote == 1 %}selected{% endif %}>Yes</option>
                                            <option value="0" {% if lab.promote == 0 %}selected{% endif %}>No</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Status</label>
                                        <select class="form-control" name="status" required>
                                            <option selected disabled value="">Select</option>
                                            <option value="1" {% if lab.status == 1 %}selected{% endif %}>Active</option>
                                            <option value="0" {% if lab.status == 0 %}selected{% endif %}>Inactive</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Latitude</label>
                                        <input id="latitude" type="text" class="form-control" name="latitude" value="{{ lab.latitude }}" required readonly>
                                    </div>

                                    <div class="form-group col-6">
                                        <label>Longitude</label>
                                        <input id="longitude" type="text" class="form-control" name="longitude" value="{{ lab.longitude }}" required readonly>
                                    </div>

                                    <div class="form-group col-12 d-flex justify-content-center">
                                        <div id="map" style="width: 90%; height: 400px;"></div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Leaflet.js CSS and JavaScript -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<script>
    var map = L.map('map').setView([22.7196, 75.8577], 13); // Default coordinates for the map (Indore)

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var marker;

    map.on('click', function(e) {
        var latlng = e.latlng;
        document.getElementById('latitude').value = latlng.lat;
        document.getElementById('longitude').value = latlng.lng;

        if (marker) {
            map.removeLayer(marker);
        }

        marker = L.marker([latlng.lat, latlng.lng]).addTo(map);
    });

    function previewImage(event, previewId) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function() {
            var preview = document.getElementById(previewId);
            preview.src = reader.result;
            preview.style.display = 'block'; 
        }
        reader.readAsDataURL(input.files[0]);
    }
</script>
{% endblock %}