@extends('user.layouts.app')

@section('content')
@section('title', 'Invoices List')
<div class="invoice inner-spacer">
          <div class="invoice-head">
            <h4>Invoices List</h4>
            <div class="filter-block">
              <button
                class="btn filter-block--btn"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasRightFilter"
                aria-controls="offcanvasRightFilter"
              >
                <div>
                  <img
                    src="{{asset('user/icons/filter.svg')}}"
                    alt="filter"
                    class="img-fluid"
                  />
                </div>

                <span> Filters </span>
              </button>
              <!-- Invoice filter offcanvas:begin -->
              <div
                class="offcanvas offcanvas-end"
                tabindex="-1"
                id="offcanvasRightFilter"
                aria-labelledby="offcanvasRightFilterLabel"
              >
                <!-- <div
                class="offcanvas offcanvas-end show"
                tabindex="-1"
                id="offcanvasRightFilter"
                aria-labelledby="offcanvasRightFilterLabel"
                style="visibility: visible"
                aria-modal="true"
                role="dialog"
              > -->
                <div class="offcanvas-header">
                  <h5 id="offcanvasRightFilterLabel">Filters</h5>
                  <button
                    type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"
                  ></button>
                </div>

                <div class="offcanvas-body">
                  <form action="/action_page.php">
                    <div class="mb-5">
                      <label for="selectInvoiceNum" class="form-label"
                        >Invoice number</label
                      >
                      <select
                        class="form-select form-select-lg"
                        aria-label="form-select-lg selectInvoice"
                      >
                        <option selected>Select</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    </div>
                    <div class="mb-5">
                      <label for="selectInvoiceDate" class="form-label"
                        >Date
                      </label>
                      <!-- <input type="date" name="invoice-date" id="invoiceDate" /> -->

                      <div class="input-group date mb-4" id="startDate">
                        <span class="input-group-addon input-group-text">
                          <img src="{{asset('user/icons/calendar-check.svg')}}" alt="Calender" />
                        </span>
                        <input
                          type="text"
                          class="form-control"
                          name="startDate"
                          placeholder="From date"
                        />
                      </div>

                      <div class="input-group date mb-4" id="toDate">
                        <span class="input-group-addon input-group-text">
                          <img src="{{asset('user/icons/calendar-check.svg')}}" alt="Calender" />
                        </span>
                        <input
                          type="text"
                          class="form-control"
                          name="toDate"
                          placeholder="To date"
                        />
                      </div>
                    </div>
                    <div class="mb-4">
                      <label for="selectInvoiceBranch" class="form-label"
                        >Branch</label
                      >
                      <select
                        class="form-select form-select-lg"
                        aria-label="form-select-lg selectInvoiceBranch"
                      >
                        <option selected>Select</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    </div>
                  </form>
                </div>
                <div class="offcanvas-footer text-end mb-3 pe-4">
                  <button type="button" class="btn btn-clear me-4">
                    Clear all
                  </button>
                  <button type="button" class="btn btn-lg btn-apply">
                    Apply
                  </button>
                </div>
              </div>
            </div>
            <!-- Invoice filter offcanvas:begin -->
          </div>

          <div class="invoice-inner">
            <div class="row">
              <div class="col-12"></div>
            </div>
            <div class="table-responsive">
              <table
                id="myTableInvoice"
                class="table table-striped view-table"
                style="width: 100%"
              >
                <thead>
                  <tr>
                    <th>Sr No</th>
                    <th>Invoice number</th>
                    <th>Date of invoice</th>
                    <th>Type of Generation</th>
                    <th>Branch</th>
                    <th>Invoice amount</th>
                    <th class="text-center">Invoice</th>
                    <th class="text-center">Proof</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="view-table-srno" data-label="Sr No">1</td>
                    <td
                      class="view-table-invoiceno"
                      data-label="Invoice number"
                    >
                      501189
                    </td>
                    <td
                      class="view-table-dateinvoice"
                      data-label="Date of invoice"
                    >
                      06-06-2023
                    </td>
                    <td
                      class="view-table-typegen"
                      data-label="Type of Generation"
                    >
                      Weekly
                    </td>
                    <td class="view-table-branch" data-label="Branch">
                      Branch 01
                    </td>
                    <td
                      class="view-table-invoiceamt"
                      data-label="Invoice amount"
                    >
                      €-1000
                    </td>
                    <td class="view-table-invoice" data-label="Invoice">
                      <a href="#">
                        <img
                          src="{{asset('user/images/pdf.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                    <td class="view-table-proof" data-label="Proof">
                      <a href="#">
                        <img
                          src="{{asset('user/images/excel.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>501189</td>
                    <td>06-06-2023</td>
                    <td>Weekly</td>
                    <td>Branch 02</td>
                    <td>€-1000</td>
                    <td>
                      <a href="#">
                        <img
                          src="{{asset('user/images/pdf.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                    <td>
                      <a href="#">
                        <img
                          src="{{asset('user/images/excel.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>501189</td>
                    <td>06-06-2023</td>
                    <td>Weekly</td>
                    <td>Branch 03</td>
                    <td>€-1000</td>
                    <td>
                      <a href="#">
                        <img
                          src="{{asset('user/images/pdf.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                    <td>
                      <a href="#">
                        <img
                          src="{{asset('user/images/excel.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>501189</td>
                    <td>06-06-2023</td>
                    <td>Weekly</td>
                    <td>Branch 04</td>
                    <td>€-1000</td>
                    <td>
                      <span>
                        <a href="#">
                          <img
                            src="{{asset('user/images/pdf.svg')}}"
                            alt="excel"
                            class="img-fluid"
                          />
                        </a>
                      </span>
                    </td>
                    <td>
                      <a href="#">
                        <img
                          src="{{asset('user/images/excel.svg')}}"
                          alt="excel"
                          class="img-fluid"
                        />
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
@endsection