@extends('modules.head') @section('contenido')
<h3><a href="{{ route('goods_issue.index') }}">Interbranch Transfers</a></h3>

@php
$completedItems = 0 ;
foreach($replenishOrder->replenishOrderLines as $replenishOrderLine){
if($replenishOrderLine->picked_date != null){
$completedItems += 1;
}
}
$totalItems = count($replenishOrder->replenishOrderLines);
$leftItems = $totalItems - $completedItems;
$progress = 0;
$progressLeft = 100;
if($completedItems){
$progress = round(($completedItems * 100) / $totalItems);
$progressLeft = 100 - $progress;
}
@endphp
<div class="progress progress-transfer-list">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:{{$progress}}%">
        {{ $completedItems }} Completed - {{$progress}}%
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:{{$progressLeft}}%">
        {{ $leftItems }} Left - {{$progressLeft}}%
    </div>
</div>

<section>
    <div class="box">
        <div class="box-body invoice boxEdit">
            @if($replenishOrder->replenish_order_status_id == 3)
            @if(isset($trackingNumber))
            <div class="row">
                <div class="col-3 col-md-3">
                    <div class="form-group">
                        <h4>UPS® Ground</h4>
                        <div>
                            <a target="_blank" class="ups-tracking-a-tag" href='https://www.ups.com/track?trackingNumber={{$trackingNumber}}'>{{ $trackingNumber }}</a>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @endif
            <div class="row">
                <div class="col-2 col-md-2">
                    <div class="form-group">
                        <label for="code">Code</label>
                        <input type="text" id="code" class="form-control" name="code" value="{{$replenishOrder->code}}" disabled />
                    </div>
                </div>
                @if($replenishOrder->replenish_order_status_id == 2)
                <div class="col-2 col-md-2">
                    <label for="shipping-type-selector">Shipping Type</label>
                    <select id="shipping-type-selector" class="form-control" data-replenish-order-id="{{ $replenishOrder->id }}">
                        <option value="">Choose...</option>
                        <option value="1">Internal</option>
                        @foreach($shippingTypes as $shippingType)
                        <option value="{{ $shippingType['id'] }}">{{ $shippingType['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2 col-md-2" id="delivery-date-container" style="display:none">
                    <div class="form-group">
                        <label for="delivery-date">Delivery Date</label>
                        <input data-date-format="mm/dd/yyyy" id="datepicker" class="form-control" value="">
                    </div>
                </div>
                <div class="col-2 col-md-2" id="select-vehicle-container" style="display:none">
                    <label for="vehicle-selector">Select Vehicle</label>
                    <select id="vehicle-selector" class="form-control" data-replenish-order-id="{{ $replenishOrder->id }}">
                        <option value="">Choose...</option>
                        @foreach($vehicles as $vehicle)
                        <option value="{{ $vehicle->id }}">{{ $vehicle->name }} ({{$vehicle->branch->short_name}})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2 col-md-2" id="shipping-cost-container" style="display:none;">
                    <label for="shipping-cost-ups">Shipping Cost</label>
                    <input type="text" class="form-control" value="" disabled />
                </div>
                @endif
                @if($replenishOrder->delivery_date && $replenishOrder->delivery_vehicle_id)
                <div class="col-2 col-md-2">
                    <div class="form-group">
                        <label for="delivery_date">Delivery Date</label>
                        <input id="delivery-date-update-input" type="text" class="form-control" value="{{$replenishOrder->delivery_date}}" disabled />
                    </div>
                </div>
                <div class="col-2 col-md-2" id="select-vehicle-container-update">
                    <label for="vehicle-selector-update">Transfer Vehicle</label>
                    <div>{{ $replenishOrder->deliveryVehicle->name }} ({{$replenishOrder->deliveryVehicle->branch->short_name}})
                        <a class="btn-sm badge bg-blue"><i class="fa-solid fa-pencil"></i></a>
                    </div>
                </div>
                @endif
                <span class="badge pull-right {{$replenishOrder->replenishOrderStatus->css_class}}" style="font-size: 18px">
                    {{ $replenishOrder->replenishOrderStatus->name }}
                </span>
            </div>
            <div class="row">
                <div class="col-2 col-md-2">
                    <div class="form-group">
                        <label for="transfer-weight">Transfer Weight</label>
                        <input type="text" id="transfer-weight" class="form-control" name="transfer-weight" value="" disabled />
                    </div>
                </div>
                <div class="col-2 col-md-2" id="vehicle-weight-container" style="display:none;">
                    <div class="form-group">
                        <label for="vehicle-weight">Vehicle Weight</label>
                        <input type="text" id="vehicle-weight" class="form-control" name="vehicle-weight" value="" disabled />
                    </div>
                </div>
                <div class="col-2 col-md-2" id="capacity-used-container" style="display:none;">
                    <div class="form-group">
                        <label for="capacity-used">Capacity Used</label>
                        <input type="text" id="capacity-used" class="form-control" name="capacity-used" value="" disabled />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-3 col-md-3">
                    <div class="form-group">
                        <label for="from_warehouse">From Warehouse</label>
                        <input type="text" id="from_warehouse" class="form-control" name="from_warehouse" value="{{$replenishOrder->fromWarehouse->code}}" disabled />
                    </div>
                </div>
                <div class="col-3 col-md-3">
                    <div class="form-group">
                        <label for="to_warehouse">To Warehouse</label>
                        <input type="text" id="to_warehouse" class="form-control" name="to_warehouse" value="{{$replenishOrder->toWarehouse->code}}" disabled />
                    </div>
                </div>
                <div class="col-4 col-md-offset-2 col-md-4">
                    <div class="form-group">
                        <label for="notes">Notes:
                            <a class="btn-sm badge bg-blue" id="edit-notes" role="button" onclick="editNotes(this)">
                                <i class="fa fa-pencil"></i>
                            </a>
                            <a class="btn-sm badge bg-green-active" id="save-notes" role="button" style="display: none" onclick="saveNotes(this, {{ $replenishOrder->id }})">
                                <i class="fa fa-save"></i>
                            </a>
                        </label>
                        <textarea class="form-control" id="notes" name="notes" readonly="readonly" rows="3">{{ $replenishOrder->notes }}</textarea>
                    </div>
                </div>
                <div class="col-xs-12 table-responsive dvPickingTbl">
                    <table class="table table-striped" id="table-replenish">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Product</th>
                                <th>Qty Needed</th>
                                <th>Bin Location</th>
                                <th>Picked By</th>
                                <th>Picked At</th>
                                <th width="200px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($replenishOrderLines as $key=>$replenishOrderLine)
                            {{-- @foreach($replenishOrder->replenishOrderLines as $key=>$replenishOrderLine) --}}
                                @php
                                    $index=$key + 1;
                                    $disabled = $replenishOrderLine->picked_date ? "disabled" : "";
                                    $active = !$replenishOrderLine->active ? "disabled" : "";
                                @endphp

                                <tr data-replenish-order-line-id="{{$replenishOrderLine->id}}">
                                    <td>{{$index}}</td>
                                    <td data-product-id="{{$replenishOrderLine->product->id}}">{{ $replenishOrderLine->product->plu }}</td>
                                    <td>
                                        <input type="number" class="form-control qty_needed" value="{{ $replenishOrderLine->qty_needed }}" data-product-weight="{{$replenishOrderLine->product->weight}}" data-active="{{$replenishOrderLine->active}}" {{$disabled}} {{$active}} style="width: 80px" />
                                    </td>
                                    <td>
                                        <select class="form-control from-bin-location" {{$disabled}} {{$active}}>
                                            @foreach($replenishOrderLine->product->boInventories as $boInventory)
                                                @php
                                                    $icon = $boInventory->boBinLocation?->isPickable() ? "\u{2714}" : "";
                                                    $selected = $boInventory->bin_location == $replenishOrderLine->boBinLocation->bin_code ? "selected" : "";
                                                    $warehouseCode = $boInventory->boBinLocation?->warehouse->code;
                                                    $binLocation = $boInventory->bin_location;
                                                    $availableUnits = $boInventory->available_units;
                                                @endphp
                                                @if($warehouseCode == $replenishOrder->fromWarehouse->code && !str_contains($binLocation, 'STATIONARY'))
                                                    <option {{$selected}} value="{{$binLocation}}" data-units="{{ $availableUnits }}">
                                                        {{ $binLocation }} - {{ $availableUnits }} {{ $icon }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>{{ $replenishOrderLine->pickedBy?->first_name }} {{ $replenishOrderLine->pickedBy?->last_name }}</td>
                                    <td>{{ $replenishOrderLine->picked_date }}</td>
                                    <td class="tdActions">
                                        <button type="button" class="btn {{$disabled ? "btn-default" : "btn-primary" }}" onclick="transferLine(this)" {{$disabled}} {{$active}}>
                                            {{$disabled ? "Collected" : "Collect" }}
                                        </button>
                                        @if($disabled)
                                        @if($replenishOrder->replenish_order_status_id != 3)
                                        <button class="fa fa fa-reply btn btn-danger rollback-item" onclick="rollbackTransfer(this)"></button>
                                        @endif
                                        @else
                                        @if (!$disabled)
                                        <label class="switch">
                                            @php $checked = $replenishOrderLine->active ? 'checked' : ''; @endphp
                                            <input class="switch-input" type="checkbox" onChange="activeReplenishLine(this, {{$replenishOrderLine->id}})" {{$checked}} />
                                            <span class="switch-label" data-on="Yes" data-off="No"></span>
                                            <span class="switch-handle"></span>
                                        </label>
                                        @endif
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12">
                @php
                $showCompleteButton = !$replenishOrder->replenishOrderLines->where('active', 1)->contains('picked_by_id', null) && $replenishOrder->replenish_order_status_id == 2;
                @endphp
                @if($replenishOrder->readyToReview())
                <button class="btn btn-danger pull-right" id="btnSendToReview" onclick="setReviewingStatus(this, {{ $replenishOrder->id }})">Send to review</button>
                @endif
                @if($showCompleteButton)
                @if(Auth::user()->rol_id == 1 || Auth::user()->id == $replenishOrder->admin_id)
                <button class="btn btn-success pull-right" onclick="postGoodsIssue(this, {{ $replenishOrder->id }})">Submit</button>
                @endif
                @endif
            </div>
        </div>
    </div>
</section>

<!-- UPDATE VEHICLE MODAL -->
<div class="modal" tabindex="-1" id="updateVehicleModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-4 col-md-4">
                        <h4 for="update-vehicle">Update Vehicle</h4>
                        <select class="form-control" data-replenish-order-id="{{ $replenishOrder->id }}">
                            @foreach($vehicles as $vehicle)
                            @if ($replenishOrder->delivery_vehicle_id == $vehicle->id)
                            <option value="{{ $vehicle->id }}" selected>{{ $vehicle->name }} ({{$vehicle->branch->short_name}})</option>
                            @else
                            <option value="{{ $vehicle->id }}">{{ $vehicle->name }} ({{$vehicle->branch->short_name}})</option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="submit" type="button" class="btn btn-primary bg-blue" disabled>Submit</button>
            </div>
        </div>
    </div>
</div>
@endsection

<style type="text/css">
    .tdActions {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tdActions .btn-primary[disabled] {
        display: none;
    }

    @media(max-width: 990px) {
        .dvPickingTbl thead {
            display: none;
        }

        .dvPickingTbl {
            margin: 50px 0 0 0;
        }

        .dvPickingTbl table {}

        .dvPickingTbl table tr {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            border-bottom: solid 2px #ccc;
            padding: 20px 5px;
            justify-content: space-between;
        }

        .dvPickingTbl table tr td {
            box-sizing: border-box;
            padding: 0 !important;
            border-width: 0 !important;
        }

        .dvPickingTbl table tr td:first-child {
            flex: 0 0 30%;
            order: 1;
            font-weight: bold;
        }

        .dvPickingTbl table tr td:nth-child(2) {
            flex: 0 0 15%;
            order: 4;
        }

        .dvPickingTbl table tr td:nth-child(3) {
            flex: 0 0 50%;
            order: 5;
        }

        .dvPickingTbl table tr td:nth-child(4) {
            flex: 0 0 30%;
            order: 2;
        }

        .dvPickingTbl table tr td:nth-child(5) {
            flex: 0 0 30%;
            order: 3;
        }

        .dvPickingTbl table tr td:last-child {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            flex: 0 0 25%;
            order: 6;
        }

        .switch {
            margin: 0 !important;
            width: 70px !important;
        }

        .switch-input:checked~.switch-handle {
            left: 37px !important;
        }
    }

    .switch {
        position: relative;
        display: block;
        vertical-align: top;
        width: 100px;
        height: 30px;
        padding: 3px;
        margin: 0 10px 10px 0;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
        border-radius: 18px;
        box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
        cursor: pointer;
    }

    .switch-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .switch-label {
        position: relative;
        display: block;
        height: inherit;
        font-size: 10px;
        text-transform: uppercase;
        background: #eceeef;
        border-radius: inherit;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    }

    .switch-label:before,
    .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 11px;
        color: #aaaaaa;
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }

    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

    .switch-input:checked~.switch-label {
        background: rgb(174, 167, 40);
        border-color: rgb(174, 167, 40);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }

    .switch-input:checked~.switch-label:before {
        opacity: 0;
    }

    .switch-input:checked~.switch-label:after {
        opacity: 1;
    }

    .switch-handle {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 28px;
        height: 28px;
        background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
        background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
        border-radius: 100%;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }

    .switch-input:checked~.switch-handle {
        left: 74px;
        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }

    .ups-tracking-container {
        padding: 5px;
        background-color: #ffc400;
        border-radius: 5px;
    }

    .ups-tracking-a-tag {
        color: #0071BD
    }

    /* Transition
========================== */
    .switch-label,
    .switch-handle {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }
</style>
<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/goods_issue.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>