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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Invoice Template</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container mt-5">
        <div class="header">
            <!-- <input type="file" id="logo" name="Logo"> -->
            <div class="file-upload-wrapper">
                <label for="file-upload" class="custom-file-upload">
                    <div class="preview-container">
                        <img id="preview-image" src="" alt="Uploaded Logo" />
                        <p class="upload-text">Add Logo</p>
                        <p class="upload-hint">PNG, JPG up to 1MB</p>
                    </div>
                </label>
                <input type="file" id="file-upload" accept="image/png, image/jpeg, image/gif" />
            </div>            
            <!--  -->
            <div class="invoice-number" id="invoice-number">
                <label for="invoice_number">Invoice #</label>
                <input type="number" id="invoice_number" placeholder="01" class="form-control">
            </div>
        </div>

        <div class="split-section">
            <div class="left-section">
                <div class="section-title">
                    <h3>Company Information</h3>
                </div>
                <div class="form-group floating-label">
                    <input type="text" name="company_name" id="company_name" class="form-control" placeholder=" "
                        required>
                    <label for="company_name">Company Name</label>
                </div>
                <div class="form-group floating-label">
                    <input type="text" name="company_address" id="company_address" class="form-control" placeholder=" "
                        required>
                    <label for="company_address">Company Address</label>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6 floating-label">
                        <input type="email" name="company_email" id="company_email" class="form-control" placeholder=" "
                            required>
                        <label for="company_email">Email</label>
                    </div>
                    <div class="form-group col-md-6 floating-label">
                        <input type="text" name="company_phone" id="company_phone" class="form-control" placeholder=" "
                            required>
                        <label for="company_phone">Phone</label>
                    </div>
                </div>
            </div>
            <div class="right-section" id="right-section">
                <div class="section-title">
                    <h3>Invoice Details</h3>
                </div>
                <div class="form-group">
                    <div class="form-row" id="block_issued">
                        <label for="issued_date" class="label">Issued Date</label>
                        <input type="date" id="issued_date" name="issued_date" class="input">
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row" id="block_payment">
                        <label for="payment_date" class="label">Payment Date</label>
                        <input type="date" id="payment_date" name="payment_date" class="input">
                    </div>
                </div>
            </div>
        </div>

        <div class="section-title">
            <h3>Client Information</h3>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6 floating-label">
                <input type="text" name="client_name" id="client_name" class="form-control" placeholder=" " required>
                <label for="client_name">Client Name</label>
            </div>
            <div class="form-group col-md-6 floating-label">
                <input type="text" name="client_address" id="client_address" class="form-control" placeholder=" "
                    required>
                <label for="client_address">Client Address</label>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6 floating-label">
                <input type="email" name="client_email" id="client_email" class="form-control" placeholder=" " required>
                <label for="client_email">Email</label>
            </div>
            <div class="form-group col-md-6 floating-label">
                <input type="text" name="client_phone" id="client_phone" class="form-control" placeholder=" " required>
                <label for="client_phone">Phone</label>
            </div>
        </div>

        <div class="section-title">
            <h3>Product and Service Details</h3>
        </div>
        <form name="cart">
            <div class="table-responsive">
                <table id="items_table" class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Product/Service</th>
                            <th>Hours/Quantity</th>
                            <th>Unit Price</th>
                            <th>Sub Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr name="line_items">
                            <td><button type="button" class="btn btn-danger btn-sm removeRow">X</button></td>
                            <td><input type="text" name="item_name" class="form-control form-control-sm"></td>
                            <td><input type="number" name="qty" class="form-control form-control-sm"></td>
                            <td><input type="number" name="price" class="form-control form-control-sm"></td>
                            <td><input type="number" name="sub_total" class="form-control form-control-sm" readonly>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3"><textarea name="thank_you_msg" id="thank_you_msg" rows="3" class="form-control form-control-sm" placeholder="Thank You Message"></textarea></td>
                            <!-- <td colspan="1">&nbsp;</td> -->
                            <td id="total_text"><b>Total :</b></td>
                            <td><input type="text" name="grand_total" class="form-control form-control-sm" readonly>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <button type="button" class="btn btn-success addRow">Add Row</button>
                </div>
                <div class="form-group col-md-6 text-right">
                    <button type="button" class="btn btn-primary downloadPDF">Generate Invoice</button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.21/jspdf.plugin.autotable.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>