templates/invoice_create/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Create Invoice</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item">Apps</li>
  13.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Invoices</a></li>
  14.                                         <li class="breadcrumb-item active" aria-current="page">Create Invoice</li>
  15.                                     </ol>
  16.                                 </div>
  17.                             </div>
  18.                             <!-- PAGE-HEADER END -->
  20.                             <!--ROW OPENED-->
  21.                             <div class="row">
  22.                                 <div class="col-lg-12 col-md-12">
  23.                                     <div  class="card">
  24.                                         <div class="card-header border-bottom">
  25.                                             <h4 class="mb-0">Invoice</h4>
  26.                                         </div>
  27.                                         <div class="card-body p-0 invoice-create-main">
  28.                                             <div class="row p-5 border-bottom">
  29.                                                 <div class="col-sm-12 col-md-12 col-xl">
  30.                                                     <div class="form-group">
  31.                                                         <label for="inv-number" class="form-label text-muted">Invoice Number:</label>
  32.                                                         <div class="input-group">
  33.                                                             <span class="input-group-text bg-primary-transparent text-primary-dark">#INV-</span>
  34.                                                             <input type="text" id="inv-number" class="form-control text-dark" placeholder="Enter Invoice Number" value="773">
  35.                                                         </div>
  36.                                                     </div>
  37.                                                 </div>
  38.                                                 <div class="col-sm-12 col-md-12 col-xl">
  39.                                                     <div class="form-group">
  40.                                                         <label for="invoice-date" class="form-label text-muted">Invoice Date:</label>
  41.                                                         <div id="inv-datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
  42.                                                             <span class="input-group-addon input-group-text bg-primary-transparent"><i class="fe fe-calendar text-primary-dark"></i></span>
  43.                                                             <input id="invoice-date" class="form-control" type="text" placeholder="DD/MM/YYYY"/>
  44.                                                         </div>
  45.                                                     </div>
  46.                                                 </div>
  47.                                                 <div class="col-sm-12 col-md-12 col-xl">
  48.                                                     <div class="form-group">
  49.                                                         <label for="invoice-date1" class="form-label text-muted">Due Date:</label>
  50.                                                         <div id="due-datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
  51.                                                             <span class="input-group-addon input-group-text bg-primary-transparent"><i class="fe fe-calendar text-primary-dark"></i></span>
  52.                                                             <input id="invoice-date1" class="form-control" type="text" placeholder="DD/MM/YYYY"/>
  53.                                                         </div>
  54.                                                     </div>
  55.                                                 </div>
  56.                                                 <div class="col-sm-12 col-md-12 col-xl">
  57.                                                     <div class="form-group">
  58.                                                         <label for="currency-type" class="form-label text-muted">Currency:</label>
  59.                                                         <select class="form-control select2-show-search form-select select2-hidden-accessible text-dark" id="currency-type" data-placeholder="Choose Type..." tabindex="-1" aria-hidden="true">
  60.                                                             <option label="Choose one"></option>
  61.                                                             <option value="day">USD($)</option>
  62.                                                             <option value="day">GBP(£)</option>
  63.                                                             <option value="day">EUR(€)</option>
  64.                                                             <option value="day">INR(₹)</option>
  65.                                                         </select>
  66.                                                     </div>
  67.                                                 </div>
  68.                                             </div>
  69.                                             <div class="row p-5 border-bottom">
  70.                                                 <div class="col-sm-12 col-md col-xl">
  71.                                                     <div class="form-group">
  72.                                                         <label class="form-label text-muted">Client: </label>
  73.                                                         <ul>
  74.                                                             <li class="select-client">
  75.                                                                 <select class="form-control select2-client-search" data-placeholder="Select Client">
  76.                                                                     <option value="1">Angeline Julliet</option>
  77.                                                                     <option value="2">Helena Rose</option>
  78.                                                                     <option value="13">Daniel Obrien</option>
  79.                                                                     <option value="15">Jorah Randy</option>
  80.                                                                     <option value="3">Emma Watson</option>
  81.                                                                     <option value="5">Bonny Benett</option>
  82.                                                                     <option value="7">Jessie Spears</option>
  83.                                                                     <option value="9">Skyler Hilda</option>
  84.                                                                     <option value="11">Randy Orton</option>
  85.                                                                     <option value="14">Benjamin Button</option>
  86.                                                                 </select>
  87.                                                             </li>
  88.                                                         </ul>
  89.                                                     </div>
  90.                                                 </div>
  91.                                                 <div class="col-sm-12 col-md col-xl">
  92.                                                     <div class="form-group">
  93.                                                         <label for="project-name" class="form-label text-muted">Project:</label>
  94.                                                         <input type="text" class="form-control text-dark" id="project-name" placeholder="Enter Project Name" value="Project Spruko">
  95.                                                     </div>
  96.                                                 </div>
  97.                                                 <div class="col-sm-12 col-md col-xl">
  98.                                                     <div class="form-group">
  99.                                                         <label for="add-tax" class="form-label text-muted">Add Tax:</label>
  100.                                                         <select class="form-control select2-show-search form-select select2-hidden-accessible text-dark" id="add-tax" data-placeholder="Choose Type..." tabindex="-1" aria-hidden="true">
  101.                                                             <option label="Choose one"></option>
  102.                                                             <option value="empty" selected>---</option>
  103.                                                             <option value="before discount">Before Discount</option>
  104.                                                             <option value="after discount">After Discount</option>
  105.                                                         </select>
  106.                                                     </div>
  107.                                                 </div>
  108.                                                 <div class="col-xl-12">
  109.                                                     <div class="row">
  110.                                                         <div class="col-xl-6 col-md-6 col-sm-12">
  111.                                                             <div class="form-group">
  112.                                                                 <label class="form-label text-muted mb-2 text-dark">Billing Address:</label>
  113.                                                                 <p class="text-dark">Street, Line<br>
  114.                                                                     State, City<br>
  115.                                                                     Country, Postal Code<br>
  116.                                                                     invoice@spruko.com
  117.                                                                 </p>
  118.                                                             </div>
  119.                                                         </div>
  120.                                                         <div class="col-xl-6 col-md-6 col-sm-12">
  121.                                                             <div class="form-group">
  122.                                                                 <label for="shipping-address" class="form-label text-muted mb-2">Shipping Address:</label>
  123.                                                                 <textarea name="shipping-address" class="form-control w-60 d-none mb-2 text-dark" placeholder="Enter Address" id="shipping-address" cols="30" rows="5"></textarea>
  124.                                                                 <a href="javascript:void(0)" role="button" class="text-primary text-center" id="addShippingAddress">
  125.                                                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-inner-icn text-primary" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M16,11.5h-3.5V8c0-0.276123-0.223877-0.5-0.5-0.5S11.5,7.723877,11.5,8v3.5H8c-0.276123,0-0.5,0.223877-0.5,0.5s0.223877,0.5,0.5,0.5h3.5v3.5005493C11.5001831,16.2765503,11.723999,16.5001831,12,16.5h0.0006104C12.2765503,16.4998169,12.5001831,16.276001,12.5,16v-3.5H16c0.276123,0,0.5-0.223877,0.5-0.5S16.276123,11.5,16,11.5z M12,2C6.4771729,2,2,6.4771729,2,12s4.4771729,10,10,10c5.5202026-0.0062866,9.9937134-4.4797974,10-10C22,6.4771729,17.5228271,2,12,2z M12,21c-4.9705811,0-9-4.0294189-9-9s4.0294189-9,9-9c4.9682617,0.0056152,8.9943848,4.0317383,9,9C21,16.9705811,16.9705811,21,12,21z"/></svg>
  126.                                                                     Add Address
  127.                                                                 </a>
  128.                                                             </div>
  129.                                                         </div>
  130.                                                     </div>
  131.                                                 </div>
  132.                                             </div>
  133.                                             <div class="row p-5 border-bottom">
  134.                                                 <div class="col-xl-12">
  135.                                                     <div class="select-product-container">
  136.                                                         <div class="form-group wp-30">
  137.                                                             <label for="currency-type1" class="form-label text-muted">Product:</label>
  138.                                                             <select class="form-control select2-show-search form-select select2-hidden-accessible" id="currency-type1" data-placeholder="Select Product.." tabindex="-1" aria-hidden="true">
  139.                                                                 <option label="Select Product"></option>
  140.                                                                 <option value="project management">Project Management</option>
  141.                                                                 <option value="server installation">Server Installation</option>
  142.                                                                 <option value="dashboard ui">Dashboard UI</option>
  143.                                                                 <option value="application management">Application Management</option>
  144.                                                             </select>
  145.                                                         </div>
  146.                                                     </div>
  147.                                                 </div>
  148.                                                 <div class="col-xl-12">
  149.                                                     <div class="product-description-list">
  150.                                                         <div class="table-responsive product-description-each mb-3">
  151.                                                             <table class="invoice-product-table">
  152.                                                                 <thead>
  153.                                                                     <tr>
  154.                                                                         <th>Description</th>
  155.                                                                         <th>Quantity</th>
  156.                                                                         <th>Unit Price</th>
  157.                                                                         <th>Tax</th>
  158.                                                                         <th>Amount</th>
  159.                                                                     </tr>
  160.                                                                 </thead>
  161.                                                                 <tbody class="border">
  162.                                                                     <tr class="dashed-border-bottom">
  163.                                                                         <td>
  164.                                                                             <input type="text" class="form-control" placeholder="Item Name" value="">
  165.                                                                         </td>
  166.                                                                         <td class="w-10">
  167.                                                                             <input type="number" class="form-control" placeholder="Quantity" value="1" min="0">
  168.                                                                         </td>
  169.                                                                         <td class="w-10">
  170.                                                                             <input type="number" class="form-control" placeholder="Price" value="0" min="0">
  171.                                                                         </td>
  172.                                                                         <td class="w-10">
  173.                                                                             <div class="form-group mb-0">
  174.                                                                                 <select class="form-control select2-show-search form-select select2-hidden-accessible" id="currency-type2" data-placeholder="Choose Type..." tabindex="-1" aria-hidden="true">
  175.                                                                                     <option label="Choose one"></option>
  176.                                                                                     <option value="empty" selected>---</option>
  177.                                                                                     <option value="day">GST: 10%</option>
  178.                                                                                     <option value="day">CGST: 18%</option>
  179.                                                                                     <option value="day">VAT: 10%</option>
  180.                                                                                     <option value="day">IGST: 10%</option>
  181.                                                                                     <option value="day">UGST: 10%</option>
  182.                                                                                 </select>
  183.                                                                             </div>
  184.                                                                         </td>
  185.                                                                         <td rowspan="2" class="bg-primary-transparent w-15 amount-cell">00.00</td>
  186.                                                                     </tr>
  187.                                                                     <tr>
  188.                                                                         <td colspan="4">
  189.                                                                             <textarea name="product-description" class="form-control border-0 p-2" id="productDescription" placeholder="Write Description(Optional)" cols="30" rows="5"></textarea>
  190.                                                                         </td>
  191.                                                                     </tr>
  192.                                                                 </tbody>
  193.                                                             </table>
  194.                                                             <i class="fe fe-delete fs-20 text-muted text-center delete-row-btn ms-2"></i>
  195.                                                         </div>
  196.                                                     </div>
  197.                                                     <a href="javascript:void(0)" role="button" class="text-primary text-center add-invoice-item-btn mt-2">
  198.                                                         <svg xmlns="http://www.w3.org/2000/svg" class="w-inner-icn text-primary" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M16,11.5h-3.5V8c0-0.276123-0.223877-0.5-0.5-0.5S11.5,7.723877,11.5,8v3.5H8c-0.276123,0-0.5,0.223877-0.5,0.5s0.223877,0.5,0.5,0.5h3.5v3.5005493C11.5001831,16.2765503,11.723999,16.5001831,12,16.5h0.0006104C12.2765503,16.4998169,12.5001831,16.276001,12.5,16v-3.5H16c0.276123,0,0.5-0.223877,0.5-0.5S16.276123,11.5,16,11.5z M12,2C6.4771729,2,2,6.4771729,2,12s4.4771729,10,10,10c5.5202026-0.0062866,9.9937134-4.4797974,10-10C22,6.4771729,17.5228271,2,12,2z M12,21c-4.9705811,0-9-4.0294189-9-9s4.0294189-9,9-9c4.9682617,0.0056152,8.9943848,4.0317383,9,9C21,16.9705811,16.9705811,21,12,21z"/></svg>
  199.                                                         Add Item
  200.                                                     </a>
  201.                                                 </div>
  202.                                             </div>
  203.                                             <div class="row pt-0 pb-5 px-5 border-bottom">
  204.                                                 <div class="col-xl-12">
  205.                                                     <div class="table-responsive invoice-bottom-table-container">
  206.                                                         <table class="table ms-auto invoice-table-bottom w-50 text-end">
  207.                                                             <tbody>
  208.                                                                 <tr>
  209.                                                                     <td colspan="3" class="border-top-0">Sub Total</td>
  210.                                                                     <td class="border-top-0">0.00</td>
  211.                                                                 </tr>
  212.                                                                 <tr>
  213.                                                                     <td>Discount</td>
  214.                                                                     <td class="w-30">
  215.                                                                         <input type="number" class="form-control text-end" value="0" min="0">
  216.                                                                     </td>
  217.                                                                     <td class="w-15">
  218.                                                                         <div class="form-group mb-0">
  219.                                                                             <select class="form-control select2 custom-select" data-placeholder="Choose Type">
  220.                                                                                 <option label="Choose one"></option>
  221.                                                                                 <option value="percentage" selected>%</option>
  222.                                                                                 <option value="amount">Amount</option>
  223.                                                                             </select>
  224.                                                                         </div>
  225.                                                                     </td>
  226.                                                                     <td>0.00</td>
  227.                                                                 </tr>
  228.                                                                 <tr>
  229.                                                                     <td>Tax</td>
  230.                                                                     <td colspan="3">0.00</td>
  231.                                                                 </tr>
  232.                                                                 <tr class="bg-primary-transparent text-primary-dark fw-bold fs-15">
  233.                                                                     <td colspan="3">Total</td>
  234.                                                                     <td>0.00</td>
  235.                                                                 </tr>
  236.                                                             </tbody>
  237.                                                         </table>
  238.                                                     </div>
  239.                                                 </div>
  240.                                                 <div class="col-xl-12 mt-4">
  241.                                                     <div class="row">
  242.                                                         <div class="col-xl-6">
  243.                                                             <label for="recipientNote" class="form-label text-muted mb-2">Note:</label>
  244.                                                             <textarea name="recipient-note" class="form-control text-dark" placeholder="Write A Note For Recipient" id="recipientNote" cols="30" rows="5"></textarea>
  245.                                                         </div>
  246.                                                         <div class="col-xl-6">
  247.                                                             <label class="text-muted">Terms and Conditions:</label>
  248.                                                             <p class="text-dark">Thank you for your business.</p>
  249.                                                         </div>
  250.                                                     </div>
  251.                                                 </div>
  252.                                             </div>
  253.                                             <div class="row p-5">
  254.                                                 <div class="btn-list text-end">
  255.                                                     <button class="btn btn-outline-danger">
  256.                                                         <i class="fe fe-x-circle"></i>
  257.                                                         Cancel
  258.                                                     </button>
  259.                                                     <button class="btn btn-info">
  260.                                                         <i class="fe fe-file-minus"></i>
  261.                                                         Save As Draft
  262.                                                     </button>
  263.                                                     <button class="btn btn-primary me-sm-0 me-2">
  264.                                                         <i class="fe fe-check-circle"></i>
  265.                                                         Save
  266.                                                     </button>
  267.                                                 </div>
  268.                                             </div>
  269.                                         </div>
  270.                                     </div>
  271.                                 </div>
  272.                             </div>
  273.                             <!--ROW CLOSED-->
  274. {% endblock %}
  276. {% block javascripts %}
  277.    {{parent()}} 
  278.         <!-- SELECT2 JS -->
  279.         <script src="{{absolute_url(asset('build/plugins/select2/select2.full.min.js'))}}"></script>
  281.         <!-- BOOTSTRAP-DATEPICKER JS -->
  282.         <script src="{{absolute_url(asset('build/plugins/bootstrap-datepicker/js/datepicker.js'))}}"></script>
  284.         <!-- INVOICE CREATE JS-->
  285.          {{ encore_entry_script_tags('js/invoice-create') }}
  286. {% endblock %}