@extends('modules.head') @section('contenido')

<div class="modal-content">
    <div class="modal-header">
        <h3 class="modal-title">Create work order</h3>
    </div>
    <div class="modal-body dvCreateWO">
        <div>
            <label for="selWorkOrderTypes">Type:</label>
            <select class="form-control" name="selWorkOrderTypes" id="selWorkOrderTypes">
                <option value="0">Select WO Type</option>
                @foreach ($work_order_types as $work_order_type)
                    <option value="{{$work_order_type->id}}"> {{ $work_order_type->name }} </option>
                @endforeach
                <option value="New">Add New WO Type</option>
            </select>
        </div>
        <div id="dvQtyNeeded">
            <label for="selQtyNeeded">Qty of people needed: (Optional)</label></br>
            <select class="form-control" id="selQtyNeeded">
                <option value="0">Select # of people needed</option>
                @for ($i = 1; $i <= 10; $i++)
                    <option value={{$i}}>{{$i}}</option>
                @endfor
            </select>
        </div>
        <div class="dvAssign dv100">
            <h3>Assign to: (Optional)</h3>
            <ul id="chkUsers">
                @foreach ($users as $user)
                    <li><input type="checkbox" id="{{$user->id}}" value="{{$user->id}}"><label for={{$user->id}}><small>{{$user->rol->name}}</small>{{$user->first_name}} {{$user->last_name}}</label></li>
                @endforeach
            </ul>
        </div>
        <div class="dv100">
            <label for="txDescription">Description: (Optional)</label></br>
            <textarea class="form-control" id="txDescription" name="txDescription"></textarea>
        </div>
    </div>
    <div class="modal-footer">
        <a href="/work_orders"><button class="btn">Cancel</button></a>
        <button type="button" class="btn btn-primary" id="btnSaveWorkOrder">Create</button>
    </div>
</div>
@include('work_order_types/modal_create_work_order_type')
@include('work_order_types/modal_edit_work_order_type')
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/work_orders.js') }}"></script>
<script src="{{ asset('js/work_order_types.js') }}"></script>
<style type="text/css">

.dvCreateWO { display:flex; flex-wrap:wrap; justify-content: space-between;}
.dvCreateWO div { flex:0 0 48%; margin: 0 0 30px;}
.dvCreateWO div > label { font-weight: bold;}
.dvCreateWO div.dv100 { flex:0 0 100%;}

.dvAssign { display: none;}
.dvAssign h3 { border-bottom: solid 1px #111;font-size: 15px;font-weight: bold;margin: 0 0 15px;padding: 0 0 5px;font-family: inherit;}

#chkUsers { margin:0;padding:0; list-style-type:none; display:flex; flex-wrap: wrap; justify-content: space-evenly;}
#chkUsers li { flex:0 0 24%;}
#chkUsers li label {font-size: inherit;font-family: inherit;margin: 0 0 10px;position: relative;box-sizing: border-box;padding: 0 0 0 29px; font-weight: bold; width: 100%;}
#chkUsers li label:before, #chkUsers li label:after {left: 5px; top: calc(100% - 26px);}
#chkUsers li label small { display: block; font-weight: normal; }
#chkUsers li input { display: none;}
#chkUsers li input:checked ~ label { background-color: #ffd800; }
textarea { height: 80px !important;}
textarea:focus { background-color: #eee;}
</style>
@endsection