<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shree Sai Homoeo Pharmacy</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100..900&family=Roboto:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <h1 class="text-center m-4">Shree Sai Homoeo Pharmacy</h1>
        <div class="row">
            <div class="col-sm-6">
                <form id="print_form" action="" onsubmit="return validateMyForm();">
                    <div class="mb-3">
                        <label for="med_name" class="form-label">Medicine Name</label>
                        <input type="text" class="form-control" id="med_name" placeholder="Please enter the name" required>
                    </div>
                    <div class="mb-3">
                        <label for="med_power" class="form-label">Power</label>
                        <select class="form-select" id="med_power" aria-label="Default select example">
                            <option selected>Select Power</option>
                            <option value="30">30</option>
                            <option value="200">200</option>
                            <option value="1M">1M</option>
                            <option value="10M">10M</option>
                            <option value="50M">50M</option>
                            <option value="CH">CH</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="med_amt" class="form-label">Price</label>
                        <input type="number" class="form-control" id="med_amt" placeholder="Enter the Price" min="0">
                    </div>
                    <div class="text-center pt-3">
                        <button type="submit" id="print_btn" class="btn btn-primary">Print</button>
                    </div>
                </form>
            </div>
            <div class="col-sm-6">
                <h2 class="text-center mt-3">Preview</h2>
                <div class="d-flex justify-content-center">
                    <div class="preview_main">
                        <div class="title_wrap">
                            <div class="d-flex align-items-end justify-content-between">
                                <div class="title">Shree Sai</div>
                                <div class="title-2">
                                    <div class="mobile">97371 43277</div>
                                    <div style="margin-top: -5px;">Homoeo Pharmacy</div>
                                </div>
                            </div>
                            <div class="subtitle">HOMOEOPATHIC MEDICINE</div>
                        </div>
                        <div class="med_text">
                            <div class="med_name text-center"></div>
                            <div class="d-flex justify-content-center gap-3">
                                <div class="med_power"></div>
                                <div class="med_price"></div>
                            </div>
                        </div>
                        <div class="">
                            <div class="footer_text">Shop No. 39, First Flr. Siddhichakra Appt.,</div>
                            <div class="footer_text">Opp. Visat Petrol Pump, Sabarmati, Ahmedabad.</div>
                            <div class="website">www.shreesaihomoeopharmacy.com</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="html2canvas.min.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <script src="script.js" type="text/javascript"></script>    
</body>
</html>