@extends('layouts.plusadmin')
@section('content')
@parent

<style>
.footerbutton {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 8%;
   margin-bottom: 33px;
   background-color: #fff;
   color: white;
   text-align: center;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 5%;
   margin-bottom: 0px;
   background-color: #fff;
   color: white;
   text-align: center;
}

.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}
 
.table-responsive-disabled .dataTables_scrollBody {
    overflow: hidden !important;
}

</style>

<div class="main-panel">
  <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">Create New Branch</h3>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Billboard</a></li>
          <li class="breadcrumb-item active" aria-current="page"> List of Branch </li>
        </ol>
      </nav>
    </div>
    <form method="post" action="{{ route('billboard.branches.store') }}" enctype="multipart/form-data" onsubmit="return validateForm()">
    @csrf
    <div class="row">

        <div class="col-md-6 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Add New Branch</h4>
              <p class="card-description">Complete the Details below</p>

                <div class="form-group">
                  <label for="exampleInputUsername1">Branch</label>
                  <input type="text" class="form-control" id="branch" name="branch" placeholder="Branch Name" style="height:30px" />
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <!-- text input -->
                    <div class="form-group">
                      <label>Branch Code</label>
                      <input type="text" class="form-control" id="branchcode" name="branchcode" placeholder="Branch Code" style="height:30px" />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Branch ID</label>
                      <input type="text" class="form-control" id="branchid" name="branchid" placeholder="Branch ID" style="height:30px" />
                    </div>
                  </div>
                </div> 
                <div class="row">
                  <div class="col-sm-6">
                    <!-- text input -->
                    <div class="form-group">
                      <label>Branch Type</label>
                      <select class="form-control form-control-sm select2" id="status" name = "status" style="width: 100%; height: 30px">
                        <option value = "A">A</option>
                        <option value="B">B</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Town</label>
                      <select class="form-control form-control-sm select2" id="towncode" name = "towncode" style="width: 100%; display: inline-block; height:30px">
                        <option value = "">Select Town</option>
                        @foreach($towns as $town1)
                            <option value = "{{ $town1->towncode}}">{{ $town1->town}}</option>
                        @endforeach    
                      </select>  
                    </div>
                  </div>
                </div> 
                <div class="form-group">
                  <label for="exampleInputEmail1">Program</label>
                  <select class="form-control form-control-sm select2" id="progid" name = "progid" style="width: 100%; display: inline-block; height:30px">
                    <option value = "">Select Program</option>
                    @foreach($programs as $program1)
                        <option value = "{{ $program1->progid}}">{{ $program1->programname}}</option>
                    @endforeach    
                  </select>  
                </div>
                <div class="form-group">
                  <label for="exampleInputUsername1">Address</label>
                  <input type="text" class="form-control" id="address" name="address" placeholder="Address" style="height:30px" />
                </div>

            </div>
          </div>
        </div>
        <br><br><br>
        <div class="footerbutton">
            <div class="card-footer">
              <button type = "button" class="btn-sm btn-info" onclick="window.location.href='{{ route('billboard.branches.index') }}'"><i class="fa fa-arrow-circle-left"></i> Back to List</button>
              <button type = "submit" class="btn-sm btn-success" id="mybtn"><i class="fa fa-paper-plane"></i> Save New Branch</button>
            </div>
        </div> 

    </div>
    </form>
  </div>

  <footer class="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
      <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © St Joseph Drug 2021</span>
      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><a href="https://www.stjosephdrug.com/" target="_blank">Digital Signage</a> <small>- Powered by JiwonSoft</small></span>
    </div>
  </footer>
  <!-- partial -->
</div>



<!-- jQuery -->
<script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script> 

<script src="{{ asset('plusadmin/vendors/js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->

    <script src="{{ asset('plusadmin/vendors/select2/select2.min.js') }}"></script>

<!-- Plugin js for this page -->
<script src="{{ asset('plusadmin/vendors/jquery-bar-rating/jquery.barrating.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.categories.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.fillbetween.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.stack.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('plusadmin/js/off-canvas.js') }}"></script>
<script src="{{ asset('plusadmin/js/hoverable-collapse.js') }}"></script>
<script src="{{ asset('plusadmin/js/misc.js') }}"></script>
<script src="{{ asset('plusadmin/js/settings.js') }}"></script>
<script src="{{ asset('plusadmin/js/todolist.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="{{ asset('plusadmin/js/dashboard.js') }}"></script>

<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.rowReorder.min.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.responsive.min.css') }}"> 


<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/jquery.dataTables.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/buttons.dataTables.min.css') }}"> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jszip.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/pdfmake.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/vfs_fonts.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.colVis.min.js') }}"></script> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.rowReorder.min.js') }}"></script> 
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.responsive.min.js') }}"></script> 

<script src="{{ asset('plusadmin/js/select2.js') }}"></script>

<script>
function validateForm() {
  

  if(document.getElementById('branchcode').value == ""){
    alert( 'Please Enter Branch Code to Continue!' );
    return false;
  }

  if(document.getElementById('branchid').value == ""){
    alert( 'Please Enter Branch ID to Continue' );
    return false;
  }  

  if(document.getElementById('branch').value == ""){
    alert( 'Please Enter Branch to Continue' );
    return false;
  }  

  if(document.getElementById('branchtype').value == ""){
    alert( 'Please Enter Branch Type to Continue' );
    return false;
  }  

  if(document.getElementById('address').value == ""){
    alert( 'Please Enter Address to Continue' );
    return false;
  }    

  if(document.getElementById('towncode').value == ""){
    alert( 'Please Select Town to Continue' );
    return false;
  } 

  if(document.getElementById('progid').value == ""){
    alert( 'Please Select Program to Continue' );
    return false;
  } 

  var ok = confirm("Proceed with your Leave Application?");
  if(ok){  
    document.getElementById("mybtn").disabled = true;
    return true; 
  } else {  
    return false; 
  }
}
</script>

@endsection