@extends('layouts.acorn.acorn_admin_app')
@section('header_styles')

@endsection
@section('top_button')
<div class="col-12 col-md-5 d-flex align-items-start justify-content-end">
  <button type="button" class="btn btn-outline-primary btn-icon btn-icon-start w-100 w-md-auto add-datatable">
    <i data-acorn-icon="plus"></i>
    <span>Add New</span>
  </button>
</div>
@endsection
@section('content')
<div class="data-table-rows slim">
  <div class="row">
    <div class="col-sm-12 col-md-5 col-lg-3 col-xxl-2 mb-1">
      <div class="d-inline-block float-md-start me-1 mb-1 search-input-container w-100 shadow bg-foreground">
        <input class="form-control datatable-search" placeholder="Search" data-datatable="#datatableRowsServerSide" />
        <span class="search-magnifier-icon">
          <i data-acorn-icon="search"></i>
        </span>
        <span class="search-delete-icon d-none">
          <i data-acorn-icon="close"></i>
        </span>
      </div>
    </div>
    <div class="col-sm-12 col-md-7 col-lg-9 col-xxl-10 text-end mb-1">
      <div class="d-inline-block me-0 me-sm-3 float-start float-md-none">
        <button
          class="btn btn-icon btn-icon-only btn-foreground-alternate shadow add-datatable"
          data-bs-delay="0"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Add"
          type="button"
        >
          <i data-acorn-icon="plus"></i>
        </button>
        <button
          class="btn btn-icon btn-icon-only btn-foreground-alternate shadow edit-datatable disabled"
          data-bs-delay="0"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Edit"
          type="button"
        >
          <i data-acorn-icon="edit"></i>
        </button>
        <button
          class="btn btn-icon btn-icon-only btn-foreground-alternate shadow disabled delete-datatable"
          data-bs-delay="0"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Delete"
          type="button"
        >
          <i data-acorn-icon="bin"></i>
        </button>
      </div>
      <div class="d-inline-block">
        <button
          class="btn btn-icon btn-icon-only btn-foreground-alternate shadow datatable-print"
          data-bs-delay="0"
          data-datatable="#datatableRowsServerSide"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Print"
          type="button"
        >
          <i data-acorn-icon="print"></i>
        </button>
        <div class="d-inline-block datatable-export" data-datatable="#datatableRowsServerSide">
          <button class="btn p-0" data-bs-toggle="dropdown" type="button" data-bs-offset="0,3">
            <span
              class="btn btn-icon btn-icon-only btn-foreground-alternate shadow dropdown"
              data-bs-delay="0"
              data-bs-placement="top"
              data-bs-toggle="tooltip"
              title="Export"
            >
              <i data-acorn-icon="download"></i>
            </span>
          </button>
          <div class="dropdown-menu shadow dropdown-menu-end">
            <button class="dropdown-item export-copy" type="button">Copy</button>
            <button class="dropdown-item export-excel" type="button">Excel</button>
            <button class="dropdown-item export-cvs" type="button">Cvs</button>
          </div>
        </div>
        <div class="dropdown-as-select d-inline-block datatable-length" data-datatable="#datatableRowsServerSide" data-childSelector="span">
          <button class="btn p-0 shadow" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-offset="0,3">
            <span
              class="btn btn-foreground-alternate dropdown-toggle"
              data-bs-toggle="tooltip"
              data-bs-placement="top"
              data-bs-delay="0"
              title="Item Count"
            >
              10 Items
            </span>
          </button>
          <div class="dropdown-menu shadow dropdown-menu-end">
            <a class="dropdown-item" href="#">5 Items</a>
            <a class="dropdown-item active" href="#">10 Items</a>
            <a class="dropdown-item" href="#">20 Items</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="data-table-responsive-wrapper">
    <table id="datatableRowsServerSide" class="data-table nowrap hover">
      <thead>
        <tr>
          <th class="text-muted text-small text-uppercase">Name</th>
          <th class="text-muted text-small text-uppercase">Sales</th>
          <th class="text-muted text-small text-uppercase">Stock</th>
          <th class="text-muted text-small text-uppercase">Category</th>
          <th class="text-muted text-small text-uppercase">Tag</th>
          <th class="empty">&nbsp;</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
<div class="modal modal-right fade" id="addEditModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Add New</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input name="Name" type="text" class="form-control" />
          </div>
          <div class="mb-3">
            <label class="form-label">Sales</label>
            <input name="Sales" type="number" class="form-control" />
          </div>
          <div class="mb-3">
            <label class="form-label">Stock</label>
            <input name="Stock" type="number" class="form-control" />
          </div>
          <button type="button" class="btn btn-outline-primary mb-1" data-bs-toggle="modal" data-bs-target="#semiFullExample">Semi Full</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="addEditConfirmButton">Add</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="semiFullExample" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-semi-full modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

      <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#rightModalExample">Standard</button>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

<div class="modal modal-right fade show" id="rightModalExample" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
@endsection
@section('footer_scripts')
  <script type="text/javascript">
      function loadwidget(){   
        //var widget_url = '';
        $.ajax({
            type:'POST',
            url: baseURL+'test/one',
            dataType: "html",
            async: false,
            cache: false,
            success: function(response)
            {

              console.log(response);
                // $('#'+divid).html(response);

                // if(active==0)
                // {               
                //     $('#'+divid+' :input').attr('disabled', true);              
                // }       
            }
        });
        
        return true;
      }
  </script>
@endsection