@extends('layouts/layoutMaster')

@section('title', 'Bill Generation')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.css')}}" />

<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-select-bs5/select.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/animate-css/animate.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />

@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>

<script src="{{asset('assets/vendor/libs/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-responsive/datatables.responsive.js')}}"></script>
{{-- <script src="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.js')}}"></script> --}}

<!-- Select -->
<script src="{{asset('assets/vendor/libs/datatables-select/datatables-select.js')}}"></script>
{{-- <script src="{{asset('assets/vendor/libs/datatables-select-bs5/select.bootstrap5.js')}}"></script> --}}
<script src="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.js')}}"></script>

<script src="{{asset('assets/vendor/libs/datatables-buttons/datatables-buttons.js')}}"></script>
{{-- <script src="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.js')}}"></script> --}}
<script src="{{asset('assets/vendor/libs/jszip/jszip.js')}}"></script>
<!-- <script src="{{asset('assets/vendor/libs/pdfmake/pdfmake.js')}}"></script> -->
<script src="{{asset('assets/vendor/libs/datatables-buttons/buttons.html5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-buttons/buttons.print.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>

<!-- Flat Picker (date picker for advance search datatable)-->
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>

@endsection

@section('page-script')
<script src="{{asset('assets/js/admin/bill_generation.js')}}"></script>

@endsection

@section('content')

<h4 class="py-3 breadcrumb-wrapper mb-4">
  <span class="text-muted fw-light">Bill Generation /</span> Bill Generation
</h4>

<!-- List Table -->
<!-- Advanced Search -->
<div class="card">
  <h5 class="card-header">Bill Generation</h5>
  <!--Search Form -->
  <div class="card-body">
    <div class="nav-align-top">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#bill-generation" aria-controls="bill-generation" aria-selected="true">Generate Bills</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#history" aria-controls="history" aria-selected="false">History</button>
    </li>
    
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="bill-generation" role="tabpanel">
      <form  onsubmit="return false;">
        <div class="row">
          <div class="col-12">
            <div class="row g-3">
              
              <div class="col-12 col-sm-6 col-lg-3 ">
                <label class="form-label">Year:</label>
                <select class="form-control select2" name="year" id="year">
                  <option selected>2023</option>
                  <option >2024</option>
                  <option >2025</option>
                  <option >2026</option>
                  <option >2027</option>
                  <option >2028</option>            
                </select>
                <span class="help-block text-danger  year-error"></span>
              </div>
              <div class="col-12 col-sm-6 col-lg-3 ">
                <label class="form-label">Month:</label>
                <select class="form-control " name="month" id="month">
                  <option value="01">January</option>
                  <option value="02">February</option>
                  <option value="03">March</option>
                  <option value="04">April</option>
                  <option value="05">May</option>
                  <option value="06">June</option>
                  <option value="07">July</option>
                  <option value="08">August</option>
                  <option selected value="09">September</option>
                  <option value="10">October</option>
                  <option value="11">November</option>
                  <option value="12">December</option>                
                </select>
                <span class="help-block text-danger  month-error"></span>
              </div>

              

              <div class="col-12 col-sm-6 col-lg-3 ">
                <label class="form-label"></label>
                <input type="submit" class="form-control btn btn-info search-btn" name="submit" value="View Details">
              </div>
              
            </div>
          </div>
        </div>
      </form>
      <br>
      <form id="addForm" onsubmit="return false;">

        <div id="members-data" style="display: none;">
        </div>
      </form>
      <br>
      
    </div>
    <div class="tab-pane fade" id="history" role="tabpanel">
      <form class="dt_adv_search d-none" method="POST">
        <div class="row">
          <div class="col-12">
            <div class="row g-3">
              <div class="col-12 col-sm-6 col-lg-4">
                <label class="form-label">Name:</label>
                <input type="text" class="form-control dt-input dt-full-name" data-column=1 placeholder="Basic plan" data-column-index="0">
              </div>
              
              <div class="col-12 col-sm-6 col-lg-4 d-none">
                <label class="form-label">Status:</label>
                <select class="form-control dt-input dt-status" data-column=5 data-column-index="4" name="activeFilter" id="activeFilter">
                  <option value="">Select</option>
                  <option value="active">Active</option>
                  <option value="inactive">InActive</option>
                </select>

              </div>
              {{-- <div class="col-12 col-sm-6 col-lg-4">
                <label class="form-label">City:</label>
                <input type="text" class="form-control dt-input" data-column=5 placeholder="Balky" data-column-index="5">
              </div>
              <div class="col-12 col-sm-6 col-lg-4">
                <label class="form-label">Date:</label>
                <div class="mb-0">
                  <input type="text" class="form-control dt-date flatpickr-range dt-input" data-column="5" placeholder="StartDate to EndDate" data-column-index="4" name="dt_date" />
                  <input type="hidden" class="form-control dt-date start_date dt-input" data-column="5" data-column-index="4" name="value_from_start_date" />
                  <input type="hidden" class="form-control dt-date end_date dt-input" name="value_from_end_date" data-column="5" data-column-index="4" />
                </div>
              </div>
              <div class="col-12 col-sm-6 col-lg-4">
                <label class="form-label">Salary:</label>
                <input type="text" class="form-control dt-input" data-column=6 placeholder="10000" data-column-index="5">
              </div> --}}
            </div>
          </div>
        </div>
      </form>
    
    <table class="dt-advanced-search table table-bordered">
      <thead>
        <tr>
          <th></th>
          <th>Member</th>
          <th>Month</th>
          <th>Year</th>
          <th>Subscription Fee</th>
          <th>Service Charges</th>
          <th>Total Payable</th>
          <th>Action</th>
        </tr>
      </thead>
      
    </table>
    </div>
  </div>
</div>
    
    
  </div>
  
</div>
<!--/ Advanced Search -->




@endsection