@extends('layouts/layoutMaster')

@section('title', 'Subscriptions')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/bs-stepper/bs-stepper.css')}}" />
<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="{{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="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/bs-stepper/bs-stepper.js')}}"></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>
<script src="{{asset('assets/vendor/libs/jquery-repeater/jquery-repeater.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="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

@endsection

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

@endsection

@section('content')

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

<!-- List Table -->
<!-- Advanced Search -->
<div class="card">
  <h5 class="card-header">Subscriptions</h5>
  <!--Search Form -->
  <div class="card-body">
    <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>
  </div>
  <hr class="mt-0">
  <div class="card-datatable table-responsive">
    <table class="dt-advanced-search table table-bordered">
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Entrance Fee (PKR)</th>
          <th>Security Fee (PKR)</th>
          <th>Monthly Fee (PKR)</th>
          <th>Status</th>
          <th>Action</th>
        </tr>
      </thead>
      
    </table>
  </div>
</div>
<!--/ Advanced Search -->

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Subscription</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" id="addNewSubscriptionForm" onsubmit="return false;">
          @csrf
          <div class="row g-3">

            
            <div class="col-md-4">
              <label class="form-label" for="name">Name</label>
              <input type="text" id="name" class="form-control" name="name" placeholder="Enter Subscription Name" />
              <span class="help-block text-danger  name-error"></span>
            </div>
            <div class="col-md-8">
              <label class="form-label" for="label">Label</label>
              <input type="text" id="label" class="form-control" name="label" placeholder="Enter Subscription label" />
              <span class="help-block text-danger  label-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="entrance-fee">Entrance Fee (PKR)</label><br>
              <input type="number" id="entrance-fee" class="form-control" name="entrance_fee" placeholder="e.g. 5000" />
              <span class="help-block text-danger  entrance-fee-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="price">Security Fee (PKR)</label><br>
              <input type="number" id="security-fee" class="form-control" name="security_fee" placeholder="e.g. 5000" />
              <span class="help-block text-danger  security-fee-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="monthly-fee">Monthly Fee (PKR)</label><br>
              <input type="number" id="monthly-fee" class="form-control" name="monthly_fee" placeholder="e.g. 5000" />
              <span class="help-block text-danger  monthly-fee-error"></span>
            </div>
            
            <div class="col-md-4">
              <label class="form-label" for="status">Status</label><br>
              <select name="status" class="form-control form-select">
                <option value="active">Active</option>
                <option value="inactive">InActive</option>
              </select>
              <span class="help-block text-danger status-error"></span>
            </div>



          </div>
          <hr>
          <div class="clearfix">
            <button type="button" class="btn btn-label-secondary float-start" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary data-submit add-record float-end">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Subscription</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" id="editSubscriptionForm" onsubmit="return false;">
          @csrf
          <div class="row g-3">
            <input type="text" class="form-control" name="id" id="edit-id" hidden readonly/>

            <div class="col-md-4">
              <label class="form-label" for="name">Name</label>
              <input type="text"  class="form-control" name="name" placeholder="Enter Subscription Name" id="edit-name" />
              <span class="help-block text-danger  name-error"></span>
            </div>
            <div class="col-md-8">
              <label class="form-label" for="label">Label</label>
              <input type="text"  class="form-control" name="label" placeholder="Enter Subscription label" id="edit-label" />
              <span class="help-block text-danger  label-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="price">Entrance Fee (PKR)</label><br>
              <input type="text"  class="form-control" name="entrance_fee" placeholder="e.g. 5000"  id="edit-entrance-fee" />
              <span class="help-block text-danger  entrance-fee-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="price">Security Fee (PKR)</label><br>
              <input type="text"  class="form-control" name="security_fee" placeholder="e.g. 5000"  id="edit-security-fee" />
              <span class="help-block text-danger  security-fee-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="price">Monthly Fee (PKR)</label><br>
              <input type="text"  class="form-control" name="monthly_fee" placeholder="e.g. 5000"  id="edit-monthly-fee" />
              <span class="help-block text-danger  monthly-fee-error"></span>
            </div>
            

            <div class="col-md-3">
              <label class="form-label" for="status">Status</label><br>
              <select name="status" class="form-control form-select"  id="edit-status" >
                <option value="active">Active</option>
                <option value="inactive">InActive</option>
              </select>
              <span class="help-block text-danger status-error"></span>
            </div>

          </div>
          <hr>
          <div class="clearfix">
            <button type="button" class="btn btn-label-secondary float-start" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary data-submit add-record float-end">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>



@endsection