@extends('pp::layouts.app')

@section('head')
<!-- DataTable -->
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ Module::asset('Pp:/css/style.css') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    .switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 23px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width:15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

</style>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h3></h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Pages</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Form Page</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="card-body">
                <h6 class="card-title">Machinery</h6>
                <div class="mb-3">
                    <button type="button" id="btnMachinerymodal" class="btn btn-primary" data-target="" data-whatever="@getbootstrap" name="save">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="table-responsive">
                    {{ csrf_field() }}
                    <table id="myTable" class="table table-striped table-bordered dataTable dtr-inline collapsed" role="grid" aria-describedby="example1_info">
                        <thead>
                            <tr>
                                <th class="thmachinery_no">Machinery No</th>
                                <th class="thName">Machinery name</th>
                                {{-- <th class="thSiteId" >Site id</th> --}}
                                <th class="thSiteName">Site Name</th>
                                <th class="edit">Edit</th>
                                <th class="view">View</th>
                                <th class="delete">delete</th>
                                <th class="disable">Status</th>


                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

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



<div class="modal fade" id="machinarymodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="settingsAddModalTitle">Add Machinary</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <form method="POST" id="machinaryfrm">
                {{csrf_field()}}
                <input type="hidden" id="machineryId" name="machineryId" value>
                <div class="modal-body" id="settingsAddModalBody">
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Machinery Name</label>
                            <input type="text" class="form-control required-input" name="Machinary_name" id="Machinary_name" placeholder="Name" required="">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Machinery Name</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Machinery No.</label>
                            <input type="text" class="form-control required-input" name="machinery_no" id="machinery_no" placeholder="Machinery No" required="">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Machinery No</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtUpGrpLevel">Site ID</label>
                          <select class="form-control" id="SiteIdDropDown" name="Site_id"></select>
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Description</label>
                            <textarea type="text" class="form-control" name="description" id="description" placeholder="description" required=""></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btnSaveMachinary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')
<!-- DataTable -->
<script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>
<!-- RequiredInput -->
<script src="{{ Module::asset('pp:js/rquired_input.min.js') }}?random=68902aa33c9cb"></script>

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>

<script src="{{ Module::asset('pp:js/pp_machinery.js') }}"></script>

@endsection