@extends('layouts/layoutMaster')

@section('title', 'Applications')

@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/applications.js')}}"></script>

@endsection

@section('content')



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

<!-- List Table -->
<!-- Advanced Search -->
<div class="card">
  <h5 class="card-header">Advanced Search</h5>
  <!--Search Form -->
  <div class="card-body">
    <form class="dt_adv_search" 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="Alaric Beslier" data-column-index="0">
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <label class="form-label">URL:</label>
              <input type="text" class="form-control dt-input" data-column=2 placeholder="http://larave.com" data-column-index="1">
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <label class="form-label">Status:</label>
              <select class="form-control dt-input" data-column=3 data-column-index="2" name="activeFilter" id="activeFilter">
                <option value="">Select</option>
                <option value="active">Active</option>
                <option value="inactive">InActive</option>
              </select>
            </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>URL</th>
          <th>Status</th>
          <th>Created By</th>
          <th>Updated By</th>
          <th>Action</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th></th>
          <th>Name</th>
          <th>URL</th>
          <th>Status</th>
          <th>Created By</th>
          <th>Updated By</th>
          <th>Action</th>
        </tr>
      </tfoot>
    </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-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Add Application</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" id="addNewAppForm" 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 App Name" />
              <span class="help-block text-danger  name-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="url">URL</label>
              <input type="text" id="url" class="form-control" name="url" placeholder="Enter App URL" />
              <span class="help-block text-danger  url-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 class="form-repeater border px-4 py-2" >
              <div data-repeater-list="group-a" style="min-height:300px;">
                <div data-repeater-item >
                  
                  <div class="row">
                    <span class="help-block text-danger title-error"></span>
                    <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                      <label class="form-label" for="form-repeater-1-1">Title</label>
                      <input type="text" id="form-repeater-1-1" class="form-control" name="title[]" placeholder="duration" />
                    </div>
                    <div class="mb-3 col-lg-6 col-xl-6 col-12 mb-0">
                      <label class="form-label" for="form-repeater-1-1">Details</label>
                      <input type="text" id="form-repeater-1-1" class="form-control" name="details[]"  placeholder="1 Month" />
                    </div>
                    <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                      <label class="form-label" for="form-repeater-1-4">Status</label>
                      <select id="form-repeater-1-4" class="form-select" name="detail_status[]" >
                        <option value="active">Active</option>
                        <option value="inactive">InActive</option>
                      </select>
                    </div>
                    <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
                      <button class="btn btn-label-danger mt-4" data-repeater-delete >
                        <i class="bx bx-x me-1"></i>
                        <span class="align-middle">Delete</span>
                      </button>
                    </div>
                  </div>
                   
                </div>
              </div>
              <div class="mb-0">
                <button class="btn btn-primary" type="button" data-repeater-create>
                  <i class="bx bx-plus me-1"></i>
                  <span class="align-middle">Add</span>
                </button>
              </div>
            </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-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalCenterTitle">Edit Application</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" id="editAppForm" onsubmit="return false;">
          @csrf
          <div class="row gx-5">
            <input type="text" class="form-control" name="id" id="edit-app-id" hidden readonly/>
            
            <div class="col-md-4">
              <label class="form-label" for="edit-app-name">Name</label>
              <input type="text"  class="form-control" name="name" placeholder="Enter App Name" id="edit-app-name" />
              <span class="help-block text-danger  name-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="edit-app-url">URL</label>
              <input type="text"  class="form-control" name="url" placeholder="Enter Plan Name" id="edit-app-url" />
              <span class="help-block text-danger  url-error"></span>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="edit-app-status">Status</label><br>
              <select name="status" class="form-control form-select"  id="edit-app-status" >
                <option value="active">Active</option>
                <option value="inactive">InActive</option>
              </select>
              <span class="help-block text-danger status-error"></span>
            </div>
            
{{-- 
            <div class="form-repeater border px-4 py-2" >
              <div data-repeater-list="group-a" style="min-height:300px;" class="raptor">
                <div data-repeater-item >
                  
                  <div class="row">
                    <span class="help-block text-danger title-error"></span>
                    <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                      <label class="form-label" for="form-repeater-1-1">Title</label>
                      <input type="text" id="form-repeater-1-1" class="form-control" name="title[]" placeholder="duration" />
                    </div>
                    <div class="mb-3 col-lg-6 col-xl-6 col-12 mb-0">
                      <label class="form-label" for="form-repeater-1-1">Details</label>
                      <input type="text" id="form-repeater-1-1" class="form-control" name="details[]" placeholder="1 Month" />
                    </div>
                    <div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
                      <label class="form-label" for="form-repeater-1-4">Status</label>
                      <select id="form-repeater-1-4" class="form-select" name="detail_status[]">
                        <option value="active">Active</option>
                        <option value="inactive">InActive</option>
                      </select>
                    </div>
                    <div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
                      <button class="btn btn-label-danger mt-4" data-repeater-delete>
                        <i class="bx bx-x me-1"></i>
                        <span class="align-middle">Delete</span>
                      </button>
                    </div>
                  </div>
                   
                </div>
              </div>
              <div class="mb-0">
                <button class="btn btn-primary" type="button" data-repeater-create>
                  <i class="bx bx-plus me-1"></i>
                  <span class="align-middle">Add</span>
                </button>
              </div>
            </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>

<!-- View Modal -->
<div class="modal fade" id="viewModal" 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">View Branch</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form   id="view-form">
          <div class="row g-3">
            <div class="col-md-12">
              <label class="form-label" for="url">Url</label>
              <input type="text" id="view-url" class="form-control" name="url" placeholder="myschool"  disabled/>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="name">Branch Name</label>
              <input type="text" id="view-name" class="form-control" name="name" placeholder="ABC"  disabled/>
            </div>
            
            <div class="col-md-6">
              <label class="form-label" for="country">Country</label>
              <select id="view-country" class="form-control " name="country" disabled>
                <option></option>

              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="phone_number">Phone Number</label>
              <input type="text" id="view-phone_number" class="form-control" name="phone_number" placeholder="xxxxxxxxx"  disabled/>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="timezone">Timezone</label>
              <select id="view-timezone" class="form-control " name="timezone" disabled >
                <option></option>
                
              </select>
            </div>
            <hr>
            <div class="col-md-12">
              <label class="form-label" for="user_name">Branch Admin Name</label>
              <input type="text" id="view-user_name" class="form-control" name="user_name" placeholder="Username"  disabled/>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="email">Email</label>
              <input type="email" id="view-email" class="form-control  email" name="email" placeholder="email@gmail.com" disabled />
            </div>
            <div class="col-md-6">
              <label class="form-label" for="password">Password</label>
              <input type="password" id="view-password" class="form-control " name="password" placeholder="xxxxxxxxx" disabled />
            </div>
             
          </div>
         
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-label-secondary"  data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
 
   
@endsection