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

<section>
    <div class="box">
        <div class="box-body invoice boxEdit">
            <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="{{$interwarehouse_transfer->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="{{$interwarehouse_transfer->toWarehouse->code}}" disabled />
                    </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>From Bin Location</th>
                                <th>To Bin Location</th>
                                <th>Picked By</th>
                                <th width="200px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($interwarehouse_transfer->transferLines as $key=>$transfer_line)
                                @php
                                    $index=$key + 1;
                                    $disabled = $transfer_line->status_id != 1 ? "disabled" : "";
                                @endphp
                                <tr data-transfer_line_id="{{$transfer_line->id}}">
                                    <td>{{$index}}</td>
                                    <td data-product_id="{{$transfer_line->product->id}}">{{$transfer_line->product->plu}}</td>
                                    <td>
                                        <input type="number" class="form-control qty_needed" value="{{ $transfer_line->quantity }}" style="width: 80px" placeholder="{{ $transfer_line->quantity }}" {{$disabled}}/>
                                    </td>
                                    <td>
                                        <select class="form-control from-bin-location" {{$disabled}}>
                                            @foreach ($transfer_line->product->boInventories as $boInventory)
                                                @php
                                                    $icon = $boInventory->boBinLocation?->isPickable() ? "\u{2714}" : "";
                                                    $selected = $boInventory->bin_location == $transfer_line->from_bin ? "selected" : "";
                                                    $warehouseCode = $boInventory->boBinLocation?->warehouse_code;
                                                    $binLocation = $boInventory->bin_location;
                                                    $availableUnits = $boInventory->available_units;
                                                @endphp
                                                @if($warehouseCode == $interwarehouse_transfer->fromWarehouse->code && !str_contains($binLocation, 'STATIONARY'))
                                                    <option {{$selected}} value="{{$binLocation}}" data-units="{{ $availableUnits }}">
                                                        {{ $binLocation }} - {{ $availableUnits }} {{ $icon }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" value="{{ $transfer_line->to_bin }}" disabled/>
                                    </td>
                                    <td>{{$transfer_line->pickedBy?->first_name}} {{$transfer_line->pickedBy?->last_name}}</td>
                                    <td class="tdActions">
                                        @if ($transfer_line->status_id == 4)
                                            <label>Completed</label>
                                        @else
                                            <button type="button" class="btn {{$disabled ? "btn-default" : "btn-primary" }}" onclick="collectLine({{$transfer_line->id}}, this)" {{$disabled}} >
                                                {{$disabled ? "Collected" : "Collect" }}
                                            </button>
                                        @endif

                                        @if($transfer_line->status_id == 3)
                                            <button class="fa fa fa-reply btn btn-danger rollback-item" onclick="rollbackCollection({{$transfer_line->id}})"></button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12">
                @php
                    $showTransferButton = $interwarehouse_transfer->ready_to_transfer;
                @endphp
                @if($showTransferButton)
                    <button class="btn btn-success pull-right" onclick="transfer({{$interwarehouse_transfer->id}})">Transfer</button>
                @endif
            </div>
        </div>
    </div>
</section>

<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/interwarehouse_replenish.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection