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

<div class="modal-content">
    <div class="modal-header">
        <h3 class="modal-title">Transfer inventory</h3>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="form-group col-md-3">
                <label for="from_warehouse">From warehouse</label>
                <select name="from_warehouse" id="from_warehouse" class="form-control" onchange="syncWarehouses(this)">
                    <option value="">-- To select</option>
                    @foreach($context->warehouses as $warehouse)
                        <option value="{{ $warehouse->code }}" data-branch_id="{{ $warehouse->branch_id }}" data-warehouse_id="{{ $warehouse->id }}">
                            {{ $warehouse->code }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-3">
                <label for="to_warehouse">To warehouse</label>
                <select name="to_warehouse" id="to_warehouse" class="form-control" disabled>
                    <option value="">-- To select</option>
                    @foreach($context->warehouses as $warehouse)
                        <option value="{{ $warehouse->code }}" data-branch_id="{{ $warehouse->branch_id }}" data-warehouse_id="{{ $warehouse->id }}">
                            {{ $warehouse->code }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-4 col-md-offset-2 col-md-4">
                <div class="form-group">
                    <label for="notes">Notes:</label>
                    <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                </div>
            </div>
        </div>
        <div id="loading-image" style="text-align: center; display:none">
            <img src="/img/Marcus_LoadingCutting.gif" />
        </div>
        <div >
            <table class="table table-hover" id="tblListPendingTransfers">
                <thead>
                    <th style="width: 60%">Product</th>
                    <th style="width: 20%">Qty</th>
                    <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div style="display:flex; gap:20px"  class="dvAddProduct">
            <div>
                <button class="btn btn-danger" type="button" onclick="displayModalBulkTransfer()">Create Bulk</button>
            </div>
            <div>
                <button class="btn btn-danger" onClick="displayModalBinAllocation()">Add Product</button>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button name="buttonTransfer" id="buttonTransfer" class="btn btn-primary" onclick="needToConfirmT = false; save(this);">
            Transfer
        </button>
    </div>
</div>
<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/inventory_transfers.js') }}"></script>
@include("inventory_transfers/bin_allocation_modal")
@include("inventory_transfers/bulk_transfer_modal")
<style>
    .dvAddProduct{
        margin-top: 10px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .grid-item {
        border: 1px solid #ccc;
        padding: 10px;
    }
    .dvAllocations{
        margin-top: 10px;
        margin-left: 1%;
        width: 97%;
    }
    .dvAllocationPanel{
        padding-top: 5px;
    }
    .dvPanelHeader{
        text-align: center;
        margin-bottom: 10px;
    }
    .dvPanelHeader label {
        font-weight: bold;
    }
    .dvAllocationPanel.left{
        border-right: solid 1px #f4f4f4;
    }
    .iptAllocated{
        width: 60px;
    }
    .tblAllocations {
        margin-bottom: 0px;
        margin-top: 10px;
    }
    .from-bin-location{
        width: 210px;
    }
    .to-bin-location{
        width: 210px;
    }
    span.deleteicon {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 100%;
    }
    span.deleteicon span {
        position: absolute;
        display: block;
        right: 3px;
        width: 25px;
        height: 25px;
        /* border-radius: 15px; */
        color: #fff;
        background-color: #ccc;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
    }
    span.deleteicon input {
        padding-right: 18px;
        box-sizing: border-box;
    }
    .unclickable {
        visibility: hidden;
    }
    #dvStationary {
        padding-top:10px; padding-left:10px;
        display:none;
    }

    /* #dvStationary label{
        font-weight:bold;
        display:none;
    } */

    .dvAllocationStatus{
        margin-right:50px;
        margin-bottom: 5px;
    }

    #loading-image {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dvCriteria {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }

    .dvActions{
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 15px;
    }

    #tblBulkTransfer th{
        text-align: center;
    }

    div.scroll {
        margin: 4px, 4px;
        padding: 4px;
        height: 400px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: justify;
    }

    #dvCloneToBin{
        display:none; gap:10px; align-items: center; flex-direction: row-reverse; padding-right:27px; margin-bottom:10px;
    }

    #dvCloneToBin i{
        cursor: pointer;
    }

</style>
@endsection