<div class="d-flex align-items-center mb-2" id="shipment-packs-identifier">
    <label class="m-0 font-weight-bold text-secondary">Packages</label>
    <span class="mx-2 text-secondary">|</span>
    <div moe bottom relative class="d-block">
        <a start show>+ Add</a>
        <form url="/api/pack/create">
            <input type="hidden" name="shipmentUid" value="{{ $shipment->uid }}">
            <div class="mb-2">
                <label class="text-secondary mb-1 text-sm">Ship Date</label>
                <input type="date" class="form-control form-control-sm"
                       name="shipDate" value="{{date('Y-m-d')}}">
            </div>
            <div class="mb-2">
                <label class="text-secondary mb-1 text-sm">Courier</label>
                <input type="text" class="form-control form-control-sm"
                       name="courier" value="FedEx">
            </div>
            <div class="mb-2">
                <label class="text-secondary mb-1 text-sm">Label File</label>
                <input type="file" class="form-control form-control-sm"
                       name="label" value="">
            </div>
            <div class="mb-2">
                <label class="text-secondary mb-1 text-sm">Tracking Number</label>
                <input type="text" class="form-control form-control-sm"
                       name="trackingNumber" value="" autofocus>
            </div>
            <div class="d-flex align-items-center">
                <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
            </div>
        </form>
    </div>
</div>

<?php $packNumber = 0; ?>
@if($shipment->packs && count($shipment->packs))
    <table class="table table-sm table-striped table-bordered bg-white">
        <thead>
        <tr class="">
            <th class="px-2 text-nowrap text-secondary border-bottom-0">#</th>
            <th class="px-2 text-nowrap text-secondary border-bottom-0">Items</th>
            <th class="px-2 text-nowrap text-secondary border-bottom-0">Label</th>
            <th class="px-2 text-nowrap text-secondary border-bottom-0">Courier / Tracking #</th>
            <th class="px-2 text-nowrap text-secondary border-bottom-0">Status</th>
            <th class="px-2 text-nowrap text-secondary border-bottom-0">&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        @foreach($shipment->packs as $pack)
            @if($pack->status !== 'DELETED')
                <?php $packNumber++; ?>
                <tr class="">
                    <td class="px-2">
                        {{$packNumber}}
                    </td>
                    <td class="px-2">
                        @foreach($pack->supplyOrders as $packSO)
                            <div class="d-flex align-items-baseline mb-1">
                                <span class="text-sm">{{$packSO->product->title}}</span>
                                <div moe relative class="ml-2">
                                    <a start show class="py-0 text-danger"><i class="fa fa-times-circle text-danger"></i></a>
                                    <form url="/api/supplyOrder/removeFromPack" right>
                                        <input type="hidden" name="uid" value="{{ $packSO->uid }}">
                                        <p class="small">Remove this product from this package?</p>
                                        <div class="d-flex align-items-center">
                                            <button class="btn btn-sm btn-primary mr-2" submit>Submit</button>
                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                        <?php $soNotInPack = $shipment->supplyOrdersNotInPack()->get();?>
                        @if($soNotInPack && count($soNotInPack))
                            <div>
                                <select class="form-control form-control-sm add-product-to-pack shadow-none"
                                        data-pack-uid="{{$pack->uid}}">
                                    <option value="" selected>(add product)</option>
                                    @foreach($soNotInPack as $soNotInPackItem)
                                        <option value="{{$soNotInPackItem->uid}}">{{$soNotInPackItem->product->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </td>
                    <td class="px-2">
                        @if($pack->label_system_file_id)
                            <a class="pdf-viewer-trigger" native target="_blank"
                               href="/api/pack/downloadLabel/{{ $pack->uid }}"
                               title="View">View</a>
                        @else
                            <span class="text-secondary">(not set)</span>
                        @endif
                        <a native target="_top" href="/api/pack/downloadLabel/{{ $pack->uid }}" class="ml-2">
                            <i class="fa fa-download"></i>
                        </a>
                        <div moe relative class="ml-1">
                            <a start show href="#"><i class="fa fa-edit"></i></a>
                            <form url="/api/pack/updateLabel" right>
                                <input type="hidden" name="uid" value="{{ $pack->uid }}">
                                <div class="mb-2">
                                    <label class="text-secondary mb-1 text-sm">Label File</label>
                                    <input type="file" class="form-control form-control-sm"
                                           name="label" value="">
                                </div>
                                <div class="d-flex align-items-center">
                                    <button class="btn btn-sm btn-primary mr-2" submit>Submit</button>
                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                </div>
                            </form>
                        </div>
                    </td>
                    <td class="px-2">
                        {{$pack->courier ? $pack->courier : '(not set)'}}
                        /
                        {{$pack->tracking_number ? substr($pack->tracking_number, -12) . '...' : '(not set)'}}
                        <div moe relative class="ml-2">
                            <a start show href="#"><i class="fa fa-edit"></i></a>
                            <form url="/api/pack/updateCourierInfo" right>
                                <input type="hidden" name="uid" value="{{ $pack->uid }}">
                                <div class="mb-2">
                                    <label class="text-secondary mb-1 text-sm">Courier</label>
                                    <input type="text" class="form-control form-control-sm"
                                           name="courier" value="{{$pack->courier}}">
                                </div>
                                <div class="mb-2">
                                    <label class="text-secondary mb-1 text-sm">Tracking Number</label>
                                    <input type="text" class="form-control form-control-sm"
                                           name="trackingNumber" value="{{$pack->tracking_number}}">
                                </div>
                                <div class="d-flex align-items-center">
                                    <button class="btn btn-sm btn-primary mr-2" submit>Submit</button>
                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                </div>
                            </form>
                        </div>
                        @if(strtolower($pack->courier) === 'fedex' && $pack->tracking_number && strlen($pack->tracking_number) >= 12)
                        <a native target="_blank" class="d-block mt-1" href="https://www.fedex.com/fedextrack/?trknbr={{substr($pack->tracking_number, -12)}}">
                            Track via FedEx
                        </a>
                        @endif
                    </td>
                    <td class="px-2">
                        {{$pack->status ? $pack->status : '-'}}
                    </td>
                    <td class="px-2">
                        <div moe relative>
                            <a start show class="py-0 text-danger">Remove</a>
                            <form url="/api/pack/updateStatus" right>
                                <input type="hidden" name="uid" value="{{ $pack->uid }}">
                                <input type="hidden" name="status" value="DELETED">
                                <p class="small">Remove this package?</p>
                                <div class="d-flex align-items-center">
                                    <button class="btn btn-sm btn-primary mr-2" submit>Submit</button>
                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
                                </div>
                            </form>
                        </div>
                    </td>
                </tr>
            @endif
        @endforeach
        </tbody>
    </table>
@endif

<script>
    (function() {
        function init() {
            $('.add-product-to-pack').on('change', function() {
                $.post('/api/supplyOrder/putInPack', {
                    uid: $(this).val(),
                    packUid: $(this).attr('data-pack-uid'),
                }, () => {
                    fastReload();
                });
            });
        }
        addMCInitializer('shipment-packs', init, '#shipment-packs-identifier');
    }).call(window);
</script>