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

@section('head')
    <!-- Prism -->
    <link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url('vendors/selects/select2.min.css') }}" type="text/css">

    <!-- Datepicker -->
    <link rel="stylesheet" href="{{ url('vendors/datepicker/daterangepicker.css') }}" type="text/css">
    <!-- AutoComplete -->
    <link rel="stylesheet" href="{{ Module::asset('sc:js/autocomplete/css/autocomplete.min.css') }}" type="text/css">
    <!-- DataTable -->
    <link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">

    <style>
        .selected {
            color: white;
            background-color: #0275d8;
        }

        /* Chrome, Safari, Edge */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
    <div class="page-header">
        <div>
            <h3>Product Shift Details</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">

                    <div class="row">
                        <div class="col-md-11 border">
                            <div class="row border-bottom bg-light" style="padding: 10px;">
                                <h6>Product Shift Details</h6>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mt-3">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 100px;"> Date</div>
                                        </div>
                                        <input type="date" class="form-control" id="txtProductShiftDate" name="date">
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group flex-nowrap">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text form-control form-control-sm"
                                                    style="width: 150px;">Customer Order</div>
                                            </div>
                                            <select id="cmbProductShiftCustomerOrder" name="cmbProductShiftCustomerOrder"
                                                class="form-control form-control-sm"></select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group flex-nowrap">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text form-control form-control-sm"
                                                    style="width: 150px;">ManuFacturing Order</div>
                                            </div>
                                            <select id="cmbProductShiftMO" name="cmbProductShiftMO"
                                                class="form-control form-control-sm"></select>
                                        </div>
                                    </div>
                                </div>







                            </div>



                            <div class="row">
                                {{-- <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 100px;">Shipment</div>
                                        </div>
                                        <!--<input type="text" class="form-control form-control-sm auto-complete" autocomplete="off" id="txtReceivedBy" name="received_by" style="min-width: 100%;">!-->
                                        <select id="cmbProductShiftShipment" name="cmbProductShiftShipment"
                                            class="form-control form-control-sm"></select>
                                    </div>
                                </div> --}}

                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 100px;">Shift</div>
                                        </div>
                                        <select id="cmbProductShift" class="form-control form-control-sm"></select>
                                    </div>
                                </div>

                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group flex-nowrap">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text form-control form-control-sm"
                                                    style="width: 150px;">Supervisor</div>
                                            </div>
                                               <input type="text" id="cmbSupervisor" name="male_workers"
                                            class="form-control form-control-sm">
                                            {{-- <select id="cmbSupervisor" name="cmbSupervisor"
                                                class="form-control form-control-sm"></select> --}}
                                        </div>
                                    </div>
                                </div>
                                 <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group flex-nowrap">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text form-control form-control-sm"
                                                    style="width: 170px;">OutSide Factory</div>
                                            </div>
                                            <select id="cmbOutsideFactory" name="cmbOutsideFactory"
                                                class="form-control form-control-sm"></select>
                                        </div>
                                    </div>
                                </div>
                              


                            </div>
                            {{-- <div class="row">
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 100px;">Material</div>
                                        </div>
                                        <input type="text" id="txtProductShiftMaterial" name="material"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>

                                <div class="col-md-2 mb-3">
                                    <button oonclick="addMaterial()" class="btn btn-primary mr-5" name="addMaterial"
                                        id="btnAddMaterial" type="button" fdprocessedid="ocfysl">Add</button>
                                </div>
                                <button type="button" class="btn btn-primary btn-sm" id="btnAddMaterial">Add</button>

                                <div id="materialContainer" class="mt-2"></div>

                            </div> --}}
                            {{-- <div class="row">
                                <div class="col-md-12">

                                    <!-- First Input Row -->
                                    <div class="input-group mb-2" style="max-width:500px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width:100px;">Material</div>
                                        </div>

                                        <input type="text" id="txtProductShiftMaterial"
                                            class="form-control form-control-sm">

                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-primary btn-sm" id="btnAddMaterial">
                                                Add
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Dynamic Materials Appear Here -->
                                    <div id="materialContainer"></div>

                                </div>
                            </div> --}}

                            <div class="row">
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 100px;">Line Leader</div>
                                        </div>
                                        {{-- <select class="form-control form-control-sm" id="cmbLineLeader"></select> --}}
                                        <input type="text" id="cmbLineLeader" name="male_workers"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 100px;">Factory</div>
                                        </div>
                                        <select class="form-control form-control-sm" id="cmbFactory"></select>
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2">
                                        <div class="input-group flex-nowrap">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text form-control form-control-sm"
                                                    style="width: 150px;">Machine No</div>
                                            </div>
                                            <select id="cmbMachineNumber" name="cmbMachineNumber"
                                                class="form-control form-control-sm"></select>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="row">
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 150px;">Order Quantity</div>
                                        </div>
                                        <input type="text" id="txtProductShiftOrderQuantity" name="order_quantity"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 150px;">Complete Quantity</div>
                                        </div>
                                        <input type="text" id="txtProductShiftCompleteQuantity"
                                            name="complete_quantity" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 150px;">Balance Quantity</div>
                                        </div>
                                        <input type="text" id="txtProductShiftBalanceQuantity" name="balance_quantity"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 150px;">No of Male Workers</div>
                                        </div>
                                        <input type="text" id="txtProductShiftMaleWorkers" name="male_workers"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 150px;">No of Female Workers</div>
                                        </div>
                                        <input type="text" id="txtProductShiftFemaleWorkers" name="female_workers"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>
                                 <div class="col-md-4 mt-1">
                                    <div class="input-group mb-2 mr-sm-2" style="padding: 0px;">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text form-control form-control-sm"
                                                style="width: 150px;">Hourly Target</div>
                                        </div>
                                        <input type="text" id="txtProductShiftHourlyTraget" name="female_workers"
                                            class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>




                            <hr>
                            <hr>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body">

                                            <h5> Hourly Output & Downtime Report</h5>

                                            <div class="table-responsive">
                                                <table id="mcTable" class="table table-bordered table-sm text-center">
                                                    <thead class="table-secondary">
                                                        <tr>
                                                            <th>Time</th>
                                                            <th style="width:10%">Target</th>
                                                            <th style="width:10%">Actual</th>
                                                            <th style="width:10%">Damaged Quantity</th>
                                                            <th>Downtime</th>
                                                            <th>Reason</th>
                                                            <th>Remark</th>

                                                        </tr>
                                                    </thead>
                                                    <tbody id="mcTableBody"></tbody>
                                                    <tfoot class="table-secondary">
                                                        <tr>
                                                            <th>Total</th>
                                                            <th><input type="number" id="totalTarget"
                                                                    class="form-control form-control-sm"></th>
                                                            <th style="width:10%"><input type="number" id="totalActual"
                                                                    class="form-control form-control-sm"></th>
                                                            <th style="width:10%"><input type="number" id="totalDQty"
                                                                    class="form-control form-control-sm"></th>
                                                            <th style="width:10%"><input type="number" id="totalDTime"
                                                                    class="form-control form-control-sm"></th>
                                                           

                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>

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

                            <hr>
                            <h5> Raw Material Wastage Table</h5>
                            <table id="RMWaTable" class="table table-bordered table-sm text-center">
                                <thead class="table-secondary">
                                    <tr>
                                        <th>RM WA</th>
                                        <th>Sand</th>
                                        <th>Stone</th>
                                        <th>Fiber</th>
                                        <th>F.Dust</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="rmwaBody"></tbody>
                            </table>
                            <button class="btn btn-sm btn-primary" id="addRMWaRow">Add Row</button>

                            <hr>
                            <h5 class="mt-4">RW Requirement Plan</h5>
                            <table id="RMReqTable" class="table table-bordered table-sm text-center">
                                <thead class="table-secondary">
                                    <tr>
                                        <th>RM Req</th>
                                        <th>Req Balance</th>
                                        <th>Used Kg</th>
                                        <th>Return</th>
                                        <th>Balance</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="rmreqBody"></tbody>
                            </table>
                            <button class="btn btn-sm btn-primary" id="addRMReqRow">Add Row</button>





                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-striped" id="tblEmployee"></table>
                                    </div>
                                </div>
                            </div>





                            <div class="row border">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-12 mt-2 mb-2" style="text-align: right;">
                                            <button id="btnSave" class="btn btn-light form-control-sm">Save</button>
                                        </div>
                                    </div>
                                    <div class="row status_btn">
                                        <div class="col-md-12 mb-3" style="text-align: left;">
                                            <button type="button" class="btn btn-success text-success form-control-sm"
                                                id="btnApprovePallet">Approve</i></button>
                                            <button type="button" class="btn btn-danger text-danger form-control-sm"
                                                id="btnRejectPallet" hidden>Reject</i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>


        <div id="rmwaProductChooser"></div>
        <div id="rmreqProductChooser"></div>
        {{-- <div id="employeeChooser"></div> --}}
        {{-- <div id="supervisorChooser"></div> --}}



        <script>
            var header = @json($header ?? null);
            var hourly = @json($hourly ?? []);
            var rmwa = @json($rmwa ?? []);
            var rmreq = @json($rmreq ?? []);
        </script>
        <!-- JQuery !-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    @endsection

    @section('script')
        <!-- Datepicker -->
        <script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>
        <script src="{{ url('vendors/selects/select2.min.js') }}"></script>
        <!-- AutoComplete -->
        <script src="{{ Module::asset('sc:js/autocomplete/js/autocomplete.min.js') }}?random=69e25c2770959"></script>

        <script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>
        <script src="{{ Module::asset('sc:js/progress_widget.js') }}?random=69e25c277095b"></script>
        <script src="{{ Module::asset('sc:js/data_chooser.js') }}?random=69e25c277095c"></script>
        <script src="{{ Module::asset('pd:js/transaction_table.js') }}?random=69e25c277095d"></script>
        <script src="{{ Module::asset('sc:js/id_gen.js') }}?random=69e25c277095e"></script>
        <script src="{{ Module::asset('pd:js/product_shift.js') }}?random=69e25c277095f"></script>
    @endsection