@extends('layouts.base_portal')
@section('inner_content')
    <div class="row">
        <div class="col p-t-15 p-b-15">
            <export-booking-transaction-form-component></export-booking-transaction-form-component>
            <div class="row">
                <div class="col-4">
                    <div class="row tabsContainer">
                        <div class="col">
                            <div class="row m-l-0 m-r-0 d-none d-md-flex">
                                <div class="col">
                                    <div class="row justify-content-end">
                                        <div class="col">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="complete">
                                                    <div class="row justify-content-center m-b-5">
                                                        <div class="col-auto">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                 width="35" height="35"
                                                                 viewBox="0 0 172 172"
                                                                 style=" fill:#000000;"><defs><linearGradient x1="86" y1="136.61369" x2="86" y2="140.7605" gradientUnits="userSpaceOnUse" id="color-1_J4ahToebpd9u_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="28.21875" x2="63.15625" y2="34.27638" gradientUnits="userSpaceOnUse" id="color-2_J4ahToebpd9u_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="108.84375" y1="28.21875" x2="108.84375" y2="34.27638" gradientUnits="userSpaceOnUse" id="color-3_J4ahToebpd9u_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="17.66763" x2="86" y2="150.83056" gradientUnits="userSpaceOnUse" id="color-4_J4ahToebpd9u_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.66763" x2="86" y2="150.83056" gradientUnits="userSpaceOnUse" id="color-5_J4ahToebpd9u_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="87.075" y1="17.66763" x2="87.075" y2="150.83056" gradientUnits="userSpaceOnUse" id="color-6_J4ahToebpd9u_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><rect x="18" y="51" transform="scale(2.6875,2.6875)" width="28" height="1" fill="url(#color-1_J4ahToebpd9u_gr1)"></rect><rect x="20" y="11" transform="scale(2.6875,2.6875)" width="7" height="1" fill="url(#color-2_J4ahToebpd9u_gr2)"></rect><rect x="37" y="11" transform="scale(2.6875,2.6875)" width="7" height="1" fill="url(#color-3_J4ahToebpd9u_gr3)"></rect><path d="M129,32.25h-5.375v-2.6875c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-19.94125c-2.08012,-4.74075 -6.81012,-8.0625 -12.30875,-8.0625c-5.49863,0 -10.22863,3.32175 -12.30875,8.0625h-19.94125c-2.96431,0 -5.375,2.41069 -5.375,5.375v2.6875h-5.375c-5.92862,0 -10.75,4.82138 -10.75,10.75v102.125c0,5.92863 4.82138,10.75 10.75,10.75h86c5.92863,0 10.75,-4.82137 10.75,-10.75v-102.125c0,-5.92862 -4.82137,-10.75 -10.75,-10.75zM99.4375,29.5625h18.8125v2.6875h-18.8125zM77.9375,29.5625c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625c4.44512,0 8.0625,3.61737 8.0625,8.0625l0.00538,18.8125h-16.13037zM77.9375,53.75h16.125c2.96431,0 5.375,-2.41069 5.375,-5.375h24.1875v83.3125h-75.25v-83.3125h24.1875c0,2.96431 2.41069,5.375 5.375,5.375zM123.625,137.0625v2.6875h-75.25v-2.6875zM53.75,29.5625h18.8125v2.6875h-18.8125zM134.375,145.125c0,2.96431 -2.41069,5.375 -5.375,5.375h-86c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-102.125c0,-2.96431 2.41069,-5.375 5.375,-5.375h29.5625v5.375h-24.1875c-2.96431,0 -5.375,2.41069 -5.375,5.375v83.3125v8.0625c0,2.96431 2.41069,5.375 5.375,5.375h75.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-8.0625v-83.3125c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-24.1875v-5.375h29.5625c2.96431,0 5.375,2.41069 5.375,5.375z" fill="url(#color-4_J4ahToebpd9u_gr4)"></path><path d="M61.8125,94.0625c0,13.33806 10.84944,24.1875 24.1875,24.1875c13.33806,0 24.1875,-10.84944 24.1875,-24.1875c0,-13.33806 -10.84944,-24.1875 -24.1875,-24.1875c-13.33806,0 -24.1875,10.84944 -24.1875,24.1875zM86,75.25c10.37106,0 18.8125,8.44144 18.8125,18.8125c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125z" fill="url(#color-5_J4ahToebpd9u_gr5)"></path><path d="M83.85,101.76756c1.10188,0 2.20375,-0.41925 3.04225,-1.25775l11.37888,-11.37888l-3.03956,-3.03956l-11.38156,11.37888l-4.92888,-4.92888l-3.03956,3.03956l4.92888,4.92619c0.83581,0.84388 1.93769,1.26044 3.03956,1.26044z" fill="url(#color-6_J4ahToebpd9u_gr6)"></path></g></g></svg>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5 all-caps">Complete</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row no-margin">
                                <div class="col bg-white padding-25">
                                    <div class="row tabsContainer tabContent active" tab-name="complete">
                                        <div class="col">
                                            <list-component  section="CompletePaymentProofSection" :endpoint="route('api.transaction.list')" :options="{status_in: [2, 3], type: 3, issuer_not_in: [1921, 1970, 2185, 2327, 2351]}">
                                                <template slot="list" slot-scope="{data}">
                                                    <payment-proof-component :data="data" class="m-b-15 m-r-0"></payment-proof-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="row tabsContainer">
                        <div class="col">
                            <div class="row m-l-0 m-r-0 d-none d-md-flex">
                                <div class="col">
                                    <div class="row justify-content-end">
                                        <div class="col">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="paymentProof">
                                                    <div class="row justify-content-center m-b-5">
                                                        <div class="col-auto">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                 width="35" height="35"
                                                                 viewBox="0 0 172 172"
                                                                 style=" fill:#000000;"><defs><linearGradient x1="51.06235" y1="44.46182" x2="51.06235" y2="63.99445" gradientUnits="userSpaceOnUse" id="color-1_h1V3zyLIDjuF_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="126.3122" y1="44.46182" x2="126.3122" y2="63.99445" gradientUnits="userSpaceOnUse" id="color-2_h1V3zyLIDjuF_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="131.6875" y1="98.66888" x2="131.6875" y2="144.03119" gradientUnits="userSpaceOnUse" id="color-3_h1V3zyLIDjuF_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="44.34375" y1="17.43919" x2="44.34375" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-4_h1V3zyLIDjuF_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="72.5625" y1="17.43919" x2="72.5625" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-5_h1V3zyLIDjuF_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="99.4375" y1="17.43919" x2="99.4375" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-6_h1V3zyLIDjuF_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="126.3125" y1="17.43919" x2="126.3125" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-7_h1V3zyLIDjuF_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="51.0625" y1="17.43919" x2="51.0625" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-8_h1V3zyLIDjuF_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="17.43919" x2="45.6875" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-9_h1V3zyLIDjuF_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.43919" x2="86" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-10_h1V3zyLIDjuF_gr10"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="17.43919" x2="91.375" y2="154.21681" gradientUnits="userSpaceOnUse" id="color-11_h1V3zyLIDjuF_gr11"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g id="Layer_2"><path d="M69.875,59.125v-10.75c0,-1.6125 -1.075,-2.6875 -2.6875,-2.6875h-32.25c-1.6125,0 -2.6875,1.075 -2.6875,2.6875v10.75c0,1.6125 1.075,2.6875 2.6875,2.6875h32.25c1.6125,0 2.6875,-1.075 2.6875,-2.6875z" fill="url(#color-1_h1V3zyLIDjuF_gr1)"></path><path d="M139.75,59.125v-10.75c0,-1.6125 -1.075,-2.6875 -2.6875,-2.6875h-21.5c-1.6125,0 -2.6875,1.075 -2.6875,2.6875v10.75c0,1.6125 1.075,2.6875 2.6875,2.6875h21.5c1.6125,0 2.6875,-1.075 2.6875,-2.6875z" fill="url(#color-2_h1V3zyLIDjuF_gr2)"></path><path d="M145.125,110.1875v-5.375h-10.75v-5.375h-5.375v5.375h-5.375c-2.95625,0 -5.375,2.41875 -5.375,5.375v8.0625c0,2.95625 2.41875,5.375 5.375,5.375h16.125v8.0625h-21.5v5.375h10.75v5.375h5.375v-5.375h5.375c2.95625,0 5.375,-2.41875 5.375,-5.375v-8.0625c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-16.125v-8.0625z" fill="url(#color-3_h1V3zyLIDjuF_gr3)"></path><rect x="12" y="27" transform="scale(2.6875,2.6875)" width="9" height="2" fill="url(#color-4_h1V3zyLIDjuF_gr4)"></rect><rect x="23" y="27" transform="scale(2.6875,2.6875)" width="8" height="2" fill="url(#color-5_h1V3zyLIDjuF_gr5)"></rect><rect x="33" y="27" transform="scale(2.6875,2.6875)" width="8" height="2" fill="url(#color-6_h1V3zyLIDjuF_gr6)"></rect><rect x="43" y="27" transform="scale(2.6875,2.6875)" width="8" height="2" fill="url(#color-7_h1V3zyLIDjuF_gr7)"></rect><rect x="12" y="35" transform="scale(2.6875,2.6875)" width="14" height="2" fill="url(#color-8_h1V3zyLIDjuF_gr8)"></rect><rect x="12" y="39" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-9_h1V3zyLIDjuF_gr9)"></rect><rect x="10" y="7" transform="scale(2.6875,2.6875)" width="44" height="2" fill="url(#color-10_h1V3zyLIDjuF_gr10)"></rect><path d="M155.875,95.675v-58.05c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-123.625c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v80.625c0,4.3 3.49375,8.0625 8.0625,8.0625h73.1c2.6875,16.6625 16.93125,29.5625 34.4,29.5625c19.35,0 34.9375,-15.5875 34.9375,-34.9375c0,-9.94375 -4.03125,-18.8125 -10.75,-25.2625zM96.75,120.9375h-72.5625c-1.34375,0 -2.6875,-1.34375 -2.6875,-2.6875v-80.625c0,-1.34375 1.34375,-2.6875 2.6875,-2.6875h123.625c1.34375,0 2.6875,1.34375 2.6875,2.6875v54.01875c-5.375,-3.49375 -11.825,-5.64375 -18.8125,-5.64375c-19.35,0 -34.9375,15.5875 -34.9375,34.9375zM131.6875,150.5c-16.39375,0 -29.5625,-13.16875 -29.5625,-29.5625c0,-16.39375 13.16875,-29.5625 29.5625,-29.5625c16.39375,0 29.5625,13.16875 29.5625,29.5625c0,16.39375 -13.16875,29.5625 -29.5625,29.5625z" fill="url(#color-11_h1V3zyLIDjuF_gr11)"></path></g></g></svg>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5 all-caps">Payment Proof</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="row justify-content-end">
                                        <div class="col">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="paymentProofVerification">
                                                    <div class="row justify-content-center m-b-5">
                                                        <div class="col-auto">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                 width="35" height="35"
                                                                 viewBox="0 0 172 172"
                                                                 style=" fill:#000000;"><defs><linearGradient x1="107.5" y1="36.28125" x2="107.5" y2="50.28044" gradientUnits="userSpaceOnUse" id="color-1_123740_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="79.73006" x2="107.5" y2="92.39894" gradientUnits="userSpaceOnUse" id="color-2_123740_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="122.28125" x2="107.5" y2="135.837" gradientUnits="userSpaceOnUse" id="color-3_123740_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="24.1875" x2="107.5" y2="150.05119" gradientUnits="userSpaceOnUse" id="color-4_123740_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="107.5" y1="24.1875" x2="107.5" y2="150.05119" gradientUnits="userSpaceOnUse" id="color-5_123740_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="107.5" y1="24.1875" x2="107.5" y2="150.05119" gradientUnits="userSpaceOnUse" id="color-6_123740_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="34.9375" y1="24.1875" x2="34.9375" y2="151.34925" gradientUnits="userSpaceOnUse" id="color-7_123740_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="37.625" y1="24.1875" x2="37.625" y2="151.34925" gradientUnits="userSpaceOnUse" id="color-8_123740_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="34.9375" y1="24.1875" x2="34.9375" y2="151.34925" gradientUnits="userSpaceOnUse" id="color-9_123740_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="37.625" y1="24.1875" x2="37.625" y2="151.34925" gradientUnits="userSpaceOnUse" id="color-10_123740_gr10"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="34.9375" y1="24.1875" x2="34.9375" y2="151.34925" gradientUnits="userSpaceOnUse" id="color-11_123740_gr11"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M69.875,40.3125h75.25v5.375h-75.25z" fill="url(#color-1_123740_gr1)"></path><path d="M69.875,83.3125h75.25v5.375h-75.25z" fill="url(#color-2_123740_gr2)"></path><path d="M69.875,126.3125h75.25v5.375h-75.25z" fill="url(#color-3_123740_gr3)"></path><path d="M147.8125,26.875h-80.625c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v16.125c0,4.44512 3.61738,8.0625 8.0625,8.0625h80.625c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-16.125c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM150.5,51.0625c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-80.625c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-16.125c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h80.625c1.48081,0 2.6875,1.20669 2.6875,2.6875z" fill="url(#color-4_123740_gr4)"></path><path d="M147.8125,69.875h-80.625c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v16.125c0,4.44512 3.61738,8.0625 8.0625,8.0625h80.625c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-16.125c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM150.5,94.0625c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-80.625c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-16.125c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h80.625c1.48081,0 2.6875,1.20669 2.6875,2.6875z" fill="url(#color-5_123740_gr5)"></path><path d="M147.8125,112.875h-80.625c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v16.125c0,4.44512 3.61738,8.0625 8.0625,8.0625h80.625c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-16.125c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM150.5,137.0625c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-80.625c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-16.125c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h80.625c1.48081,0 2.6875,1.20669 2.6875,2.6875z" fill="url(#color-6_123740_gr6)"></path><path d="M48.375,53.75c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-21.5c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-21.5c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h16.125v-5.375h-16.125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v21.5c0,4.44512 3.61737,8.0625 8.0625,8.0625h21.5c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-10.75h-5.375z" fill="url(#color-7_123740_gr7)"></path><path d="M28.77506,41.09994l-3.80013,3.80013l8.61881,8.61881l16.68131,-16.68131l-3.80013,-3.80013l-12.88119,12.88119z" fill="url(#color-8_123740_gr8)"></path><path d="M48.375,96.75c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-21.5c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-21.5c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h16.125v-5.375h-16.125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v21.5c0,4.44512 3.61737,8.0625 8.0625,8.0625h21.5c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-10.75h-5.375z" fill="url(#color-9_123740_gr9)"></path><path d="M28.77506,84.09994l-3.80013,3.80013l8.61881,8.61881l16.68131,-16.68131l-3.80013,-3.80013l-12.88119,12.88119z" fill="url(#color-10_123740_gr10)"></path><path d="M48.375,139.75c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-21.5c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-21.5c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h16.125v-5.375h-16.125c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v21.5c0,4.44512 3.61737,8.0625 8.0625,8.0625h21.5c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-10.75h-5.375z" fill="url(#color-11_123740_gr11)"></path></g></g></svg>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5 all-caps">Verification</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="row justify-content-end">
                                        <div class="col">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="complete">
                                                    <div class="row justify-content-center m-b-5">
                                                        <div class="col-auto">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                 width="35" height="35"
                                                                 viewBox="0 0 172 172"
                                                                 style=" fill:#000000;"><defs><linearGradient x1="86" y1="136.61369" x2="86" y2="140.7605" gradientUnits="userSpaceOnUse" id="color-1_J4ahToebpd9u_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="28.21875" x2="63.15625" y2="34.27638" gradientUnits="userSpaceOnUse" id="color-2_J4ahToebpd9u_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="108.84375" y1="28.21875" x2="108.84375" y2="34.27638" gradientUnits="userSpaceOnUse" id="color-3_J4ahToebpd9u_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="17.66763" x2="86" y2="150.83056" gradientUnits="userSpaceOnUse" id="color-4_J4ahToebpd9u_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.66763" x2="86" y2="150.83056" gradientUnits="userSpaceOnUse" id="color-5_J4ahToebpd9u_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="87.075" y1="17.66763" x2="87.075" y2="150.83056" gradientUnits="userSpaceOnUse" id="color-6_J4ahToebpd9u_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><rect x="18" y="51" transform="scale(2.6875,2.6875)" width="28" height="1" fill="url(#color-1_J4ahToebpd9u_gr1)"></rect><rect x="20" y="11" transform="scale(2.6875,2.6875)" width="7" height="1" fill="url(#color-2_J4ahToebpd9u_gr2)"></rect><rect x="37" y="11" transform="scale(2.6875,2.6875)" width="7" height="1" fill="url(#color-3_J4ahToebpd9u_gr3)"></rect><path d="M129,32.25h-5.375v-2.6875c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-19.94125c-2.08012,-4.74075 -6.81012,-8.0625 -12.30875,-8.0625c-5.49863,0 -10.22863,3.32175 -12.30875,8.0625h-19.94125c-2.96431,0 -5.375,2.41069 -5.375,5.375v2.6875h-5.375c-5.92862,0 -10.75,4.82138 -10.75,10.75v102.125c0,5.92863 4.82138,10.75 10.75,10.75h86c5.92863,0 10.75,-4.82137 10.75,-10.75v-102.125c0,-5.92862 -4.82137,-10.75 -10.75,-10.75zM99.4375,29.5625h18.8125v2.6875h-18.8125zM77.9375,29.5625c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625c4.44512,0 8.0625,3.61737 8.0625,8.0625l0.00538,18.8125h-16.13037zM77.9375,53.75h16.125c2.96431,0 5.375,-2.41069 5.375,-5.375h24.1875v83.3125h-75.25v-83.3125h24.1875c0,2.96431 2.41069,5.375 5.375,5.375zM123.625,137.0625v2.6875h-75.25v-2.6875zM53.75,29.5625h18.8125v2.6875h-18.8125zM134.375,145.125c0,2.96431 -2.41069,5.375 -5.375,5.375h-86c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-102.125c0,-2.96431 2.41069,-5.375 5.375,-5.375h29.5625v5.375h-24.1875c-2.96431,0 -5.375,2.41069 -5.375,5.375v83.3125v8.0625c0,2.96431 2.41069,5.375 5.375,5.375h75.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-8.0625v-83.3125c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-24.1875v-5.375h29.5625c2.96431,0 5.375,2.41069 5.375,5.375z" fill="url(#color-4_J4ahToebpd9u_gr4)"></path><path d="M61.8125,94.0625c0,13.33806 10.84944,24.1875 24.1875,24.1875c13.33806,0 24.1875,-10.84944 24.1875,-24.1875c0,-13.33806 -10.84944,-24.1875 -24.1875,-24.1875c-13.33806,0 -24.1875,10.84944 -24.1875,24.1875zM86,75.25c10.37106,0 18.8125,8.44144 18.8125,18.8125c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125z" fill="url(#color-5_J4ahToebpd9u_gr5)"></path><path d="M83.85,101.76756c1.10188,0 2.20375,-0.41925 3.04225,-1.25775l11.37888,-11.37888l-3.03956,-3.03956l-11.38156,11.37888l-4.92888,-4.92888l-3.03956,3.03956l4.92888,4.92619c0.83581,0.84388 1.93769,1.26044 3.03956,1.26044z" fill="url(#color-6_J4ahToebpd9u_gr6)"></path></g></g></svg>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5 all-caps">Complete</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row no-margin">
                                <div class="col bg-white padding-25">
                                    <div class="row tabsContainer tabContent active" tab-name="paymentProof">
                                        <div class="col">
                                            <list-component ref="paymentProofList" section="jackPaymentProofSection" :endpoint="route('api.transaction.list')" :options="{status: 1, type: 3, issuer_in: [1921, 1970, 2185, 2327, 2351]}">
                                                <template slot="list" slot-scope="{data}">
                                                    <payment-proof-component :data="data" class="m-b-15 m-r-0"></payment-proof-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                    <div class="row tabsContainer tabContent hide" tab-name="paymentProofVerification">
                                        <div class="col">
                                            <list-component ref="paymentProofList" section="jackPaymentProofVerificationSection" :endpoint="route('api.transaction.list')" :options="{status: 2, type: 3, issuer_in: [1921, 1970, 2185, 2327, 2351, 2351]}">
                                                <template slot="list" slot-scope="{data}">
                                                    <payment-proof-component :data="data" class="m-b-15 m-r-0"></payment-proof-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                    <div class="row tabsContainer tabContent hide" tab-name="complete">
                                        <div class="col">
                                            <list-component  section="jackCompletePaymentProofSection" :endpoint="route('api.transaction.list')" :options="{status: 3, type: 3, issuer_in: [1921, 1970, 2185, 2327, 2351]}">
                                                <template slot="list" slot-scope="{data}">
                                                    <payment-proof-component :data="data" class="m-b-15 m-r-0"></payment-proof-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection