@extends('layouts.app-settings')

@section('main-content')
<main class="app-main">

  @include('settings.settings-head')  

  <section class="content-body ">
    <div class="container-fluid main-body">
      
      <div class="col-12">
        <div class="card my-4">
          <div class="card-header p-0 position-relative mt-n5 mx-2" >
            <div class="bg-primary shadow-primary rounded-2 pt-4 pb-3 d-flex justify-content-between align-items-center">
              <h5 class="text-uppercase ps-3 print-title text-white">Province</h5>
              @if (Auth::check())
                @if ((Auth::user()->user_type) === 'ADMIN')
                <button type="button" id="add_button" class="btn btn-success btn-md me-3 no-print" data-bs-toggle="modal" data-bs-target="#addEditProvinceModal" style="margin-top: -10px">
                  <i class="fa fa-plus me-2" ></i>Add Province
                </button>
                @endif
              @endif
            </div>
          </div>
          <div class="card-body" id="show_all_provinces">
            <h1 class="text-center text-secondary my-5 loading-text" id="loading-text">Loading</h1>
            <div id="table_start" class="table-responsive">
              <table id="table-province" class="mytable table-sm" cellspacing="0" width="100%">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>REGION</th>
                    <th>PROVINCE</th>
                    <th>Date Created</th>
                    <th>Updated Date</th>
                    <th class="no-print">Action</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
      
    </div>

  
    {{-- add new and update region modal start --}}
    <div class="modal fade" id="addEditProvinceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addEditProvinceModalTitle" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header bg-success">
            <h5 class="modal-title text-white" id="Modal_Title">Add Province</h5>
            <button type="button" class="btn-close btn-link text-white p-3 fixed-plugin-close-button" data-bs-dismiss="modal" aria-label="Close">            
            </button>
          </div>
       
            <div class="modal-body">
              <form action="#" method="POST" id="province_form" class="province_form" enctype="multipart/form-data">
                @csrf
              <div class="form-row" >
                <div class="col" style="width: 100%">
                  <div class="form-label-group in-border">
                    <label class="form-label"></label>
                    <select class="form-select text-uppercase font-weight-bold" name="region" id="region" autocomplete="off" required>
                    <option value="">Select REGION</option>
                      @if(count($region) > 0)
                        @foreach ($region as $region_select)
                          <option value="{{ strtoupper($region_select->id) . '|' . strtoupper($region_select->region_name) }}">{{ strtoupper($region_select->region_name) }}</option>
                        @endforeach
                      @endif                
                    </select>
                    <label for="region">Region<font style="color: red">*</font></label>
                  </div>
                </div>
              </div>

              <div class="form-row" >
                <div class="col" style="width: 100%">
                  <div class="form-label-group in-border">
                    <input class="form-control" type="text" name="province_name" id="province_name" placeholder="Province Name" autocomplete="off" required/>
                    <label for="province_name">Province Name<span style="color: red">*</span></label>
                  </div>
                </div>
              </div>

              <div class="form-row" >
                <div class="col" style="width: 100%">
                  <div class="form-label-group in-border">
                    <input class="form-control" type="text" name="province_number" id="province_number" placeholder="Province Number" autocomplete="off" required/>
                    <label for="province_number">Province Number<span style="color: red">*</span></label>
                  </div>
                </div>
              </div>

              <div class="form-row" >
                <div class="col" style="width: 100%">
                  <div class="form-label-group in-border">
                    <textarea class="form-control" name="province_details" id="province_details" placeholder="Province Details" rows="4" ></textarea>
                    <label for="province_details">Province Details</label>
                  </div>
                </div>
              </div>
              
            </div>

            <div class="modal-footer">
              <button type="button" id="close_btn" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="submit" id="add_province_btn" class="btn btn-success">Add</button>
              <button type="submit" id="update_province_btn" class="btn btn-primary" rowid="" style="display: none">Update</button>
            </div>
            </form>
        </div>
      </div>
    </div>
    {{-- add new and update region modal end --}}
    
  </section>

</main>
@endsection('main-content')