@extends('layouts.base_portal')
@section('inner_content')
<div class="row">
    <div class="col-12 col-sm-12 col-md-8">
        <div class="row h-100 padding-15">
            <div class="col rounded bg-master-lighter">
                <div class="row align-items-center h-100 padding-20">
                    <div class="col">
                        <h2><span class="normal">Shipping ID:</span> 05052021-25-0100</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-4">
        <div class="row h-100 padding-15">
            <div class="col rounded bg-master-lighter padding-20">
                <h6 class="normal">Discount Code</h6>
                <div class="row">
                    <div class="col bg-master-lightest rounded m-l-20 m-r-20 padding-15">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6>Free 10</h6>
                            </div>
                            <div class="col-auto">
                                <div class="btn rounded bg-master-light">Removed</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12 col-sm-12 col-md-8">
        <list-component section="containerListSection" :endpoint="route('api.address.district.list')">
            <template slot="list" slot-scope="{data}">
                <shipping-queue-components :data="data"></shipping-queue-components>
            </template>
        </list-component>
    </div>
    <div class="col-12 col-sm-12 col-md-4">
        <div class="row padding-15">
            <div class="col rounded p-l-20 p-r-20">
                <div class="row">
                    <div class="col bg-master-light rounded padding-30">
                        <div class="row">
                            <div class="col">
                                <h3 class="normal">Shipping cost estimation</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col m-t-10 m-b-10">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="m-t-0 m-b-5">Shipping Cost: RM8400</h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h5 class="m-t-0 m-b-5">SST(6%): RM600</h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h5 class="m-t-0 m-b-5">Discount: RM100</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="no-margin">Total Cost: </h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <h4 class="no-margin normal">RM7300</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col p-t-20 p-b-20">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <p class="no-margin normal-text">Group my products with same destination</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <p class="no-margin normal-text">You will get grouped package at once if possible</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="btn bg-master-light"><i class="fa fa-check lightest"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="btn w-100 bg-master text-white p-t-15 p-b-15 large-text">
                            Checkout
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection