@extends('layouts.base_portal')
@section('inner_content')
    <div class="row">
        <div class="col-8">
            <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
                <div class="col no-padding">
                    <h6>Arrived Parcel</h6>
                </div>
            </div>
            <form action="{{route('packing_list.arrived_parcel.export')}}" method="GET" target="_blank">
                <div class="form-group row">
                    <label for="start_date" class="col-sm-2 col-form-label">Start Date</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="start_date" name="start_date">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="end_date" class="col-sm-2 col-form-label">End Date</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="end_date" name="end_date">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-10 offset-sm-2">
                        <button type="submit" class="btn btn-primary">Export</button>
                    </div>
                </div>
            </form>

            <list-component section="warehouseListSection" :endpoint="route('api.packing_list.list')" :options="{packing_list_type: 1, per_page: 20, order_by: {column: 'arrival_date', DESC: true}, with_arrival_date: true}" >
                <template slot="list" slot-scope="{data}">
                    <parcel-component v-for="packages in data.packages" :data="packages" :key="packages.id"></parcel-component>
                </template>
            </list-component>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
                <div class="col no-padding">
                    <h6>On Hold Parcel</h6>
                </div>
            </div>
            <div class="row align-items-center m-b-5 p-b-10 b-b b-grey muted all-caps fs-10">
                <div class="col-2">Marking</div>
                <div class="col text-center">Quantity</div>
                <div class="col">CBM</div>
                <div class="col">Overweight CBM</div>
                <div class="col">Total CBM</div>
                <div class="col">status</div>
                <div class="col">Delivery Date</div>
                <div class="col"></div>
            </div>
            <list-component section="onHoldParcel" :endpoint="route('api.packing_list.list')" :options="{status_in: [5], packing_list_type: 2, per_page: 20}">
                <template slot="list" slot-scope="{data}">
                    <warehouse-packing-list-component :data="data"></warehouse-packing-list-component>
                </template>
            </list-component>
        </div>
    </div>
@endsection
