@extends('user.layouts.app')

@section('content')
@section('title', 'Document List')
<div class="invoice inner-spacer">
          <div class="invoice-head">
            <h4>Document 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-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 class="table-responsive">
                  <table
                    id="myTableDocs"
                    class="table table-striped view-table"
                    style="width: 100%"
                  >
                    <thead>
                      <tr>
                        <th>Sr No</th>
                        <th>Document number</th>
                        <th>Date of sent</th>
                        <th>Branch</th>
                        <th>Doc Type</th>
                        <th class="text-center">Document</th>
                        <th class="text-center">Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="view-table-srno" data-label="Sr No">1</td>
                        <td
                          class="view-table-docnum"
                          data-label="Document number"
                        >
                          501189
                        </td>
                        <td
                          class="view-table-datesent"
                          data-label="Date of sent"
                        >
                          06-06-2023
                        </td>
                        <td class="view-table-branch" data-label="Branch">
                          Branch 01
                        </td>
                        <td class="view-table-doctype" data-label="Doc Type">
                          Contract
                        </td>

                        <td class="view-table-docs" data-label="Document">
                          <a href="#">
                            <img
                              src="{{asset('user/images/pdf.svg')}}"
                              alt="excel"
                              class="img-fluid"
                            />
                          </a>
                        </td>
                        <td class="view-table-status" data-label="Status">
                          <a href="#">
                            <span class="btn-status btn-status--approved"
                              >Approved</span
                            >
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td class="view-table-srno" data-label="Sr No">2</td>
                        <td
                          class="view-table-docnum"
                          data-label="Document number"
                        >
                          501189
                        </td>
                        <td
                          class="view-table-datesent"
                          data-label="Date of sent"
                        >
                          06-06-2023
                        </td>
                        <td class="view-table-branch" data-label="Branch">
                          Branch 02
                        </td>
                        <td class="view-table-doctype" data-label="Doc Type">
                          Price
                        </td>

                        <td class="view-table-docs" data-label="Document">
                          <a href="#">
                            <img
                              src="{{asset('user/images/pdf.svg')}}"
                              alt="excel"
                              class="img-fluid"
                            />
                          </a>
                        </td>
                        <td class="view-table-status" data-label="Status">
                          <a href="#">
                            <span class="btn-status btn-status--approved"
                              >Approved</span
                            >
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td class="view-table-srno" data-label="Sr No">3</td>
                        <td
                          class="view-table-docnum"
                          data-label="Document number"
                        >
                          501189
                        </td>
                        <td
                          class="view-table-datesent"
                          data-label="Date of sent"
                        >
                          06-06-2023
                        </td>
                        <td class="view-table-branch" data-label="Branch">
                          Branch 03
                        </td>
                        <td class="view-table-doctype" data-label="Doc Type">
                          Contract
                        </td>

                        <td class="view-table-docs" data-label="Document">
                          <a href="#">
                            <img
                              src="{{asset('user/images/pdf.svg')}}"
                              alt="excel"
                              class="img-fluid"
                            />
                          </a>
                        </td>
                        <td class="view-table-status" data-label="Status">
                          <a href="#">
                            <span class="btn-status btn-status--approve"
                              >Approved</span
                            >
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td class="view-table-srno" data-label="Sr No">4</td>
                        <td
                          class="view-table-docnum"
                          data-label="Document number"
                        >
                          501189
                        </td>
                        <td
                          class="view-table-datesent"
                          data-label="Date of sent"
                        >
                          06-06-2023
                        </td>
                        <td class="view-table-branch" data-label="Branch">
                          Branch 04
                        </td>
                        <td class="view-table-doctype" data-label="Doc Type">
                          Price
                        </td>

                        <td class="view-table-docs" data-label="Document">
                          <a href="#">
                            <img
                              src="{{asset('user/images/pdf.svg')}}"
                              alt="excel"
                              class="img-fluid"
                            />
                          </a>
                        </td>
                        <td class="view-table-status" data-label="Status">
                          <a href="#">
                            <span class="btn-status btn-status--approve"
                              >Approved</span
                            >
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
@endsection