@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('hr:js/autocomplete2/css/autocomplete.min.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">Outside Factory</h6>
                <div class="mb-3">
                    <button type="button" id="btnfactorymodal" 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="thoutside_factory_code">Factory Code</th>
                                <th class="thoutside_factory_name">Factory name</th>
                                <th class="edit">Edit</th>
                                <th class="view">View</th>
                                <th class="delete">Delete</th>
                                <th class="Status">Status</th>

                                {{-- <th class="thSiteId" >Site id</th> --}}


                            </tr>
                        </thead>
                        <tbody>

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

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



<div class="modal fade" id="factorymodal" 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="factoryfrm">
                {{csrf_field()}}
                <input type="hidden" id="outside_factory_id" name="outside_factory_id" value>
                <div class="modal-body" id="settingsAddModalBody">
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Outside Factory Code</label>
                            <input type="text" class="form-control required-input" name="outside_factory_code" id="outside_factory_code" placeholder="Code">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Outside Factory Code</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Outside Factory Name</label>
                            <input type="text" class="form-control required-input" name="outside_factory_name" id="outside_factory_name" placeholder="Name">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Outside Factory Name</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Outside Factory Place</label>
                            <input type="text" class="form-control required-input" name="outside_factory_place" id="outside_factory_place" placeholder="Place">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Outside Factory Place</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <label for="txtName">Supplier</label>
                            <input type="hidden"name="supplier_id" id="supplier_id" >
                            <input type="text" class="form-control auto-complete required-input" name="Supplier_name" id="Supplier_name" placeholder="Supplier">
                        </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="outside_factory_description" id="outside_factory_description" placeholder="description"></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="btnSaveFactory">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>
<script src="{{ Module::asset('hr:js/autocomplete2/js/autocomplete.min.js') }}"></script>
<!-- RequiredInput -->
<script src="{{ Module::asset('pp:js/rquired_input.min.js') }}?random=67d5ff24d7363"></script>

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


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

@endsection