@extends('layout.default')

@section('styles')
    <style type="text/css">
        .input-group > .select2-container--default {
            width: auto !important;
            flex: 1 1 auto !important;
        }

        .input-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }

        .nowrap {
            white-space: nowrap;
        }

        table .select2-selection__rendered {
            line-height: 10px !important;
        }

        table .select2-container .select2-selection--single {
            width: 100% !important;
            height: 30px !important;
            font-size: 1rem !important;
        }

        table .select2-selection__arrow {
            height: 30px !important;
        }

        .btn-group > .select2-container--default {
            flex: 1 1 auto !important;
        }

        .btn-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }

        .card.card-custom > .card-body {
            padding: 1rem 1rem 0 1rem;
        }
    </style>
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan('workorder.index')
    <a href="{{ route('workorder.index') }}" class="btn btn-light-primary font-weight-bolder mr-2">
        <i class="ki ki-long-arrow-back icon-sm"></i>Back(ESC)</a>
    @endPermissionsCan
    @PermissionsCan('workorder.store')
    <div class="btn-group">
        <button type="submit" class="btn btn-primary font-weight-bolder" form="workorder_form">
            <i class="ki ki-check icon-sm"></i><u>S</u>ave & Continue
        </button>
    </div>
    @endPermissionsCan
@endsection
@section('content')
    <div class="card card-custom card-sticky" id="kt_page_sticky_card">
        <div class="card-body" id="load-section-js">
            <form class="form" id="workorder_form" data-method="post" data-url="{{ route('workorder.store') }}"
                  enctype="multipart/form-data">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="my-5">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>WO No <b class="text-danger">*</b></label>
                                        <input class="form-control" type="text" name="wo_no"
                                               id="wo_no"
                                               placeholder="Enter WO No"/>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>WO Date<b class="text-danger">*</b></label>
                                        <input type="date"
                                               class="form-control form-control-solid form-control-lg"
                                               name="wo_date" id="wo_date"
                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                        />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>WO Type <b class="text-danger">*</b></label>
                                        <select class="form-control form-control-lg wo_type-select2-js"
                                                name="wo_type" id="wo_type">
                                            @foreach($wo_types as $key => $wo_type)
                                                <option value="{{ $key }}"> {{ $wo_type }} </option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Customer<b class="text-danger">*</b></label>
                                        <select class="form-control form-control-lg customer-select2-js"
                                                name="customer_id" id="customer_id"
                                                data-action="{{ route('customer.autocomplete') }}">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-9 wo_to_so_div">
                                    <div class="form-group d-flex flex-column">
                                        <label>SO No</label>
                                        <div class="btn-group form-group" role="group">
                                            <select class="form-control form-control-lg sales_order-select2-js"
                                                    name="sales_order_detail_id" id="sales_order_detail_id"
                                                    data-action="{{ route('salesorder.salorder_detail_autocomplete') }}">
                                            </select>
                                            <a href="{{ route('salesorder.create') }}" class="btn btn-primary btn-sm"
                                               target="_blank">
                                                <i class="flaticon-plus"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 wo_to_so_div">
                                    <div class="form-group">
                                        <label>SO Date</label>
                                        <input type="date"
                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                               class="form-control form-control-solid form-control-lg"
                                               name="so_date" id="so_date"/>
                                    </div>
                                </div>
                                <div class="col-md-9 wo_to_wo_div d-none">
                                    <div class="form-group d-flex flex-column">
                                        <label>Work Order No</label>
                                        <div class="btn-group form-group" role="group">
                                            <select class="form-control form-control-lg work_order_detail-select2-js"
                                                    name="work_order_detail_id" id="work_order_detail_id"
                                                    data-action="{{ route('workorder.detail_autocomplete') }}">
                                            </select>
                                            <a href="{{ route('workorder.create') }}" class="btn btn-primary btn-sm"
                                               target="_blank">
                                                <i class="flaticon-plus"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 wo_to_wo_div d-none">
                                    <div class="form-group">
                                        <label>WO Date</label>
                                        <input type="date"
                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                               class="form-control form-control-solid form-control-lg"
                                               name="wo_wo_date" id="wo_wo_date"/>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Customer PO No</label>
                                        <select class="form-control form-control-lg customer_po_no-select2-js"
                                                name="purchase_order_id" id="purchase_order_id"
                                                data-action="{{ route('purchaseorder.autocomplete') }}">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>PO Date</label>
                                        <input type="date"
                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                               class="form-control form-control-solid form-control-lg"
                                               name="po_date" id="po_date"/>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>WO Start Date<b class="text-danger">*</b></label>
                                        <input type="date"
                                               class="form-control form-control-solid form-control-lg"
                                               name="wo_start_date" id="wo_start_date"
                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                        />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Delivery Date<b class="text-danger">*</b></label>
                                        <input type="date"
                                               class="form-control form-control-solid form-control-lg"
                                               name="delivery_date" id="delivery_date"
                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}"
                                        />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>BOM No</label>
                                        <select class="form-control form-control-lg standardbom-select2-js"
                                                name="standard_bom_id" id="standard_bom_id">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Production Quantity</label>
                                        <input type="text"
                                               class="form-control form-control-solid form-control-lg production_qty_js"
                                               name="production_qty" id="production_qty"/>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Color</label>
                                        <select class="form-control form-control-lg color-select2-js"
                                                name="color_id" id="color_id">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Production Engineer</label>
                                        <select class="form-control form-control-lg production_engineer-select2-js"
                                                name="user_id" id="user_id"
                                                data-action="{{ route('employee.autocomplete') }}">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row" id="standard_bom_detail_div">
                                <div class="card-body" kt-hidden-height="384">
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="tab-content">
                                                <div class="table-responsive" id="work_order_detail_repeater">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ asset('js/modules/workorder/create.js?v='.time()) }}"></script>
@endsection