<template>
    <div class="row align-items-center">
        <div class="col">
            <div class="row align-items-center">
                <div class="col-auto p-r-0">
                    <div class="bg-master-lighter b-rad-lg padding-10">
                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                             width="35" height="35"
                             viewBox="0 0 172 172"
                             style=" fill:#000000;"><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 fill="#000000"><path d="M83.26211,19.35c-10.40566,0 -19.76153,5.69414 -26.54746,11.22871c-6.78594,5.54297 -11.11113,11.10274 -11.11113,11.10274l-1.94004,2.48594l3.03184,0.89023c0,0 1.17578,0.32754 2.58672,1.77207c1.40254,1.43613 2.90586,3.88848 2.90586,8.53281c0,6.02168 0.92383,10.88438 1.38574,12.94199c-1.20098,1.0918 -1.97363,2.63711 -1.97363,4.36719c0,1.39414 0.41992,2.58672 0.76426,3.7541c0.16797,0.58789 0.33594,1.13379 0.44512,1.54531c0.10918,0.41152 0.13437,0.81465 0.13437,0.50391c0,2.92266 2.45234,5.20703 5.34141,5.30781c0.39473,8.33125 4.40918,15.68828 10.51484,20.53418v8.02051c-3.09902,0.94062 -10.54004,3.34258 -18.11543,6.92031c-4.94668,2.33477 -9.91855,5.14824 -13.79024,8.48242c-3.87168,3.33418 -6.79434,7.32344 -6.79434,12.00976v12.9h111.8v-12.9c0,-4.68633 -2.92266,-8.67559 -6.79434,-12.00976c-3.87168,-3.33418 -8.84355,-6.14766 -13.79024,-8.48242c-7.57539,-3.57773 -15.01641,-5.97969 -18.11543,-6.92031v-8.01211c6.10566,-4.8459 10.12012,-12.20293 10.51484,-20.54258c2.88906,-0.10078 5.34141,-2.38516 5.34141,-5.30781c0,0.31074 0.0252,-0.09238 0.13438,-0.50391c0.10918,-0.41152 0.27715,-0.95742 0.44512,-1.54531c0.34434,-1.16738 0.76426,-2.35996 0.76426,-3.7541c0,-1.76367 -0.79785,-3.31738 -2.02402,-4.41758c0.39473,-2.26758 2.02402,-11.97617 2.02402,-18.8041c0,-7.72656 -2.88906,-13.26113 -6.78594,-16.69609c-3.50215,-3.07383 -7.61738,-4.3084 -11.2623,-4.56875c-0.58789,-0.93223 -1.6293,-2.39355 -3.7877,-4.08164c-3.09902,-2.41035 -8.0709,-4.75352 -15.30195,-4.75352zM83.26211,23.65c6.31562,0 10.23769,1.95684 12.64805,3.84649c2.41875,1.88965 3.2166,3.55254 3.2166,3.55254l0.58789,1.20098h1.33535c2.86387,0 6.71875,1.0918 9.71699,3.7373c3.00664,2.64551 5.33301,6.77754 5.33301,13.4627c0,5.99649 -1.42773,14.74766 -1.84766,17.2c-0.0084,0 -0.0168,0 -0.03359,0c-0.18476,0 -0.15117,0.04199 -0.26875,0.05879v-6.50879c0,-7.35703 -3.00664,-12.30371 -6.03008,-15.23476c-3.02344,-2.93106 -6.18965,-4.00606 -6.18965,-4.00606l-1.22617,-0.41152l-0.94062,0.89863c0,0 -1.35215,1.32695 -4.61914,2.82187c-3.26699,1.49492 -8.32285,3.03184 -15.39434,3.03184c-3.87168,0 -8.96953,1.36895 -13.39551,4.45957c-4.40918,3.08223 -8.0793,8.12129 -8.09609,14.95762c-0.11758,-0.0168 -0.09238,-0.06719 -0.27715,-0.06719c-0.05039,0 -0.10078,0.0168 -0.15117,0.0168c-0.43672,-2.07441 -1.14219,-6.12246 -1.14219,-11.3043c0,-5.62695 -2.01562,-9.36426 -4.12363,-11.53105c-0.89863,-0.92383 -1.1002,-0.76426 -1.88125,-1.22617c1.48652,-1.74688 4.24961,-4.8459 8.95273,-8.68398c6.39121,-5.21543 15.02481,-10.27129 23.82637,-10.27129zM101.05,45.48594c0.5207,0.20156 1.88125,0.62988 3.88008,2.56152c2.35156,2.28438 4.71992,5.9293 4.71992,12.15254v13.55508l3.2334,-1.89805c0.5543,-0.31914 1.0666,-0.60469 1.42774,-0.78945c0.04199,-0.0252 0.05879,-0.0252 0.10078,-0.05039c0.98262,0.10078 1.68809,0.78945 1.68809,1.64609v0.0084c0,0.15957 -0.26035,1.41934 -0.58789,2.54473c-0.16797,0.5543 -0.33594,1.11699 -0.47871,1.6293c-0.13438,0.5123 -0.27715,0.87344 -0.27715,1.6293c0,0.57109 -0.47031,1.075 -1.20937,1.075h-3.89688v2.93945c0,11.65703 -8.40684,21.29004 -19.47598,23.26367l-0.61309,0.10078l-0.46191,0.42832c-0.83984,0.76426 -1.89805,1.21777 -3.09902,1.21777c-1.20098,0 -2.25918,-0.45351 -3.09902,-1.21777l-0.46191,-0.42832l-0.61309,-0.10078c-11.06914,-1.97363 -19.47598,-11.60664 -19.47598,-23.26367v-2.93945h-3.89687c-0.73906,0 -1.20938,-0.50391 -1.20938,-1.075c0,-0.75586 -0.14277,-1.11699 -0.28555,-1.6293c-0.14278,-0.51231 -0.31074,-1.075 -0.47871,-1.6293c-0.32754,-1.12539 -0.57949,-2.38516 -0.57949,-2.54473c0,-0.86504 0.70547,-1.55371 1.68809,-1.65449c0.04199,0.0252 0.05879,0.0252 0.10078,0.05039c0.36113,0.18476 0.87344,0.47031 1.42774,0.78945l3.2334,1.89805v-6.9959c0,-5.3582 2.6707,-8.96113 6.26524,-11.47226c3.59453,-2.51113 8.16328,-3.68691 10.93476,-3.68691c7.70137,0 13.39551,-1.68809 17.1832,-3.41816c2.81347,-1.28496 3.55254,-2.07441 4.3168,-2.6959zM74.175,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM97.825,70.95c-1.78047,0 -3.225,1.44453 -3.225,3.225c0,1.78047 1.44453,3.225 3.225,3.225c1.78047,0 3.225,-1.44453 3.225,-3.225c0,-1.78047 -1.44453,-3.225 -3.225,-3.225zM73.1,107.12207c2.29277,1.20098 4.77031,2.1248 7.39902,2.65391c1.52012,1.20938 3.40137,2.02402 5.50098,2.02402c2.09121,0 3.96406,-0.81465 5.47578,-2.01562c2.63711,-0.5207 5.12305,-1.44453 7.42422,-2.65391v12.59766c-0.26035,0.5207 -3.66172,7.12188 -12.9,7.12188c-9.23828,0 -12.63965,-6.60117 -12.9,-7.12188zM68.8,116.86426v4.03965l0.22676,0.46191c0,0 5.07266,9.78418 16.97324,9.78418c11.90059,0 16.97324,-9.78418 16.97324,-9.78418l0.22676,-0.46191v-4.03965c3.45176,1.0834 9.77578,3.2166 16.28457,6.29043c4.72832,2.23399 9.43145,4.92988 12.81601,7.84414c3.38457,2.91426 5.29941,5.9125 5.29941,8.75117v8.6h-103.2v-8.6c0,-2.83867 1.91484,-5.83691 5.29941,-8.75117c3.38457,-2.91426 8.0877,-5.61016 12.81601,-7.84414c6.50879,-3.07383 12.83281,-5.20703 16.28457,-6.29043zM43,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM51.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM68.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM77.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM103.2,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM120.4,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM129,139.75c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g></g></svg>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row">
                        <div class="col">
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCustomerName">
                                <change-customer-name-form-component :section="'customerProfileSection'" :data="item"></change-customer-name-form-component>
                            </modal-component>
                            <div class="font-heading fs-20 light">
                                {{item.name}}  
                                <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary bg-transparent" data-type="changeCustomerName" >
                                    <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <div class="font-heading fs-16 light">
                                        CIEF/{{item.company_module.marking}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="row align-items-center parentContainer">
                <div class="col-auto padding-5 b-a b-grey b-rad-lg pointer m-r-15" @click="hrefPaymenBillingPage">
                   <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="69.875" y1="96.52694" x2="69.875" y2="108.37075" gradientUnits="userSpaceOnUse" id="color-1_44039_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="21.05119" x2="86" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-2_44039_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="21.05119" x2="80.625" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-3_44039_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="75.25" y1="21.05119" x2="75.25" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-4_44039_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="21.05119" x2="69.875" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-5_44039_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="129" y1="21.05119" x2="129" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-6_44039_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="139.75" y1="21.05119" x2="139.75" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-7_44039_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="118.25" y1="21.05119" x2="118.25" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-8_44039_gr8"><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="M86,104.8125c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-26.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h26.875c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-1_44039_gr1)"></path><path d="M154.0045,83.57856c-1.58025,-1.87856 -3.913,-2.95356 -6.407,-2.95356h-5.16v-8.0625c0,-4.44513 -4.03125,-8.0625 -8.0625,-8.0625v-26.875c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-38.65162l-3.88881,-7.77762c-0.91375,-1.83288 -2.75469,-2.97237 -4.80794,-2.97237h-18.17825h-1.66088h-18.8125c-2.96431,0 -5.375,2.41069 -5.375,5.375v96.75h-21.5v13.4375c0,7.40944 6.02806,13.4375 13.4375,13.4375h91.375c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-18.8125h4.74344c6.80475,0 12.55869,-4.71119 13.68475,-11.20419l2.95625,-17.02263c0.39775,-2.29512 -0.23919,-4.644 -1.75494,-6.44463zM137.0625,72.5625v8.0625h-16.125v-8.0625c0,-1.4835 1.20669,-2.6875 2.6875,-2.6875h10.75c1.4835,0 2.6875,1.204 2.6875,2.6875zM129,43h-5.375v-5.375h5.375zM81.65163,26.875l2.6875,5.375h-15.49344l-2.6875,-5.375zM60.15163,26.875l3.88881,7.78031c0.91913,1.83019 2.76275,2.96969 4.81063,2.96969h49.39894v5.375h-75.25v-16.125zM29.5625,145.125c-4.44513,0 -8.0625,-3.61469 -8.0625,-8.0625v-8.0625h86v8.0625c0,3.02344 1.00244,5.375 2.69288,8.0625zM129,137.0625c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-13.4375h-69.875v-75.25h86v16.125h-5.375c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v8.0625h-5.16c-2.494,0 -4.82675,1.075 -6.407,2.95356c-1.51306,1.80062 -2.15269,4.1495 -1.75225,6.44194l2.95625,17.02531c1.12606,6.493 6.87731,11.20419 13.68475,11.20419h10.11575zM150.46237,89.10138l-2.95625,17.02531c-0.67725,3.91031 -4.20325,6.74831 -8.38769,6.74831h-20.23419c-4.18444,0 -7.71044,-2.838 -8.38769,-6.74831l-2.95625,-17.028c-0.172,-0.99706 0.28219,-1.72 0.57244,-2.064c0.55362,-0.65575 1.38675,-1.03469 2.28975,-1.03469h37.195c0.903,0 1.73613,0.37894 2.29244,1.03738c0.28756,0.344 0.74444,1.06425 0.57244,2.064z" fill="url(#color-2_44039_gr2)"></path><path d="M53.75,59.125h53.75v5.375h-53.75z" fill="url(#color-3_44039_gr3)"></path><path d="M53.75,69.875h43v5.375h-43z" fill="url(#color-4_44039_gr4)"></path><path d="M53.75,80.625h32.25v5.375h-32.25z" fill="url(#color-5_44039_gr5)"></path><path d="M126.3125,91.375h5.375v16.125h-5.375z" fill="url(#color-6_44039_gr6)"></path><path d="M137.0625,91.375h5.375v10.75h-5.375z" fill="url(#color-7_44039_gr7)"></path><path d="M115.5625,91.375h5.375v10.75h-5.375z" fill="url(#color-8_44039_gr8)"></path></g></g></svg>
                </div>
                <div class="col-auto padding-5 b-a b-grey b-rad-lg pointer requestModal" data-type="assignSegment">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                         width="30" height="30"
                         viewBox="0 0 172 172"
                         style=" fill:#000000;"><defs><linearGradient x1="86" y1="97.08594" x2="86" y2="105.31775" gradientUnits="userSpaceOnUse" id="color-1_43991_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="94.0625" y1="85.83338" x2="94.0625" y2="93.89588" gradientUnits="userSpaceOnUse" id="color-2_43991_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="77.9375" y1="85.83338" x2="77.9375" y2="93.89588" gradientUnits="userSpaceOnUse" id="color-3_43991_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="28.55469" x2="86" y2="143.10938" gradientUnits="userSpaceOnUse" id="color-4_43991_gr4"><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="M77.9375,96.75c0,4.45319 3.60931,8.0625 8.0625,8.0625c4.45319,0 8.0625,-3.60931 8.0625,-8.0625z" fill="url(#color-1_43991_gr1)"></path><path d="M94.0625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-2_43991_gr2)"></path><path d="M77.9375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-3_43991_gr3)"></path><path d="M147.8125,51.0625h-18.8125v-8.0625c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-11.2445c-1.11263,-3.12019 -4.06888,-5.375 -7.568,-5.375h-32.25c-3.49912,0 -6.45538,2.25481 -7.568,5.375h-11.2445c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v8.0625h-18.8125c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v59.125c0,4.44512 3.61737,8.0625 8.0625,8.0625h18.8125v8.0625c0,4.44512 3.61738,8.0625 8.0625,8.0625h69.875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-8.0625h18.8125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-59.125c0,-4.44512 -3.61737,-8.0625 -8.0625,-8.0625zM147.8125,56.4375c1.4835,0 2.6875,1.20669 2.6875,2.6875v51.0625h-2.88637c-0.80625,-6.09525 -4.28119,-11.78469 -9.47612,-15.25425c0.99437,-1.87319 1.6125,-3.98019 1.6125,-6.24575v-5.375c0,-6.48763 -4.62519,-11.91638 -10.75,-13.16606v-13.70894zM134.375,88.6875c0,3.49912 -2.25213,6.45538 -5.375,7.568v-20.50831c3.12287,1.11262 5.375,4.06887 5.375,7.568zM134.6545,99.1365c3.913,2.48056 6.62469,6.84506 7.47125,11.051h-13.12575v-8.33394c2.12044,-0.43269 4.02319,-1.41094 5.6545,-2.71706zM67.1875,37.625c0,-1.48081 1.204,-2.6875 2.6875,-2.6875h32.25c1.4835,0 2.6875,1.20669 2.6875,2.6875v2.6875c0,1.48081 -1.204,2.6875 -2.6875,2.6875h-32.25c-1.4835,0 -2.6875,-1.20669 -2.6875,-2.6875zM51.0625,40.3125h10.75c0,4.44512 3.61737,8.0625 8.0625,8.0625h32.25c4.44512,0 8.0625,-3.61738 8.0625,-8.0625h10.75c1.4835,0 2.6875,1.20669 2.6875,2.6875v83.3125h-3.34056c-1.73881,-9.23963 -7.19444,-17.45531 -15.06344,-22.66906c1.44319,-2.88906 2.279,-6.13556 2.279,-9.58094v-10.75c0,-11.85456 -9.64544,-21.5 -21.5,-21.5c-11.85456,0 -21.5,9.64544 -21.5,21.5v10.75c0,3.44537 0.83581,6.69188 2.28169,9.58094c-7.869,5.21375 -13.32463,13.42675 -15.06344,22.66906h-3.34325v-83.3125c0,-1.48081 1.204,-2.6875 2.6875,-2.6875zM102.125,94.0625c0,8.89294 -7.23206,16.125 -16.125,16.125c-8.89294,0 -16.125,-7.23206 -16.125,-16.125v-10.75c0,-8.89294 7.23206,-16.125 16.125,-16.125c8.89294,0 16.125,7.23206 16.125,16.125zM86,115.5625c6.48494,0 12.29531,-2.89981 16.24056,-7.45513c6.39088,4.22744 10.93006,10.77956 12.59363,18.20513h-57.66837c1.66356,-7.42556 6.20275,-13.97769 12.59631,-18.20244c3.94256,4.55531 9.75294,7.45244 16.23787,7.45244zM43,96.2555c-3.12288,-1.11263 -5.375,-4.06888 -5.375,-7.568v-5.375c0,-3.49912 2.25212,-6.45538 5.375,-7.568zM37.32669,99.12306c1.634,1.31419 3.54481,2.29512 5.67331,2.7305v8.33394h-13.18487c0.78475,-4.57412 3.526,-8.63225 7.51156,-11.06444zM24.1875,56.4375h18.8125v13.70894c-6.12481,1.24969 -10.75,6.67575 -10.75,13.16606v5.375c0,2.26287 0.61544,4.36719 1.60981,6.24038c-5.21106,3.44806 -8.686,9.05688 -9.47613,15.25963h-2.88369v-51.0625c0,-1.48081 1.204,-2.6875 2.6875,-2.6875zM24.1875,120.9375c-1.4835,0 -2.6875,-1.20669 -2.6875,-2.6875v-2.6875h21.5v5.375zM120.9375,137.0625h-69.875c-1.4835,0 -2.6875,-1.20669 -2.6875,-2.6875v-2.6875h75.25v2.6875c0,1.48081 -1.204,2.6875 -2.6875,2.6875zM147.8125,120.9375h-18.8125v-5.375h21.5v2.6875c0,1.48081 -1.204,2.6875 -2.6875,2.6875z" fill="url(#color-4_43991_gr4)"></path></g></g></svg>
                </div>
                <div class="col">
                    <div class="row no-margin">
                        <div class="col-auto no-padding m-r-10 m-b-5 m-t-5 parentContainer"  v-for="segment in item.segments" v-bind:key="segment.id" v-if="segment.id !== 1">
                            <div class="font-heading fs-10 lh-20 p-l-10 p-r-10 bg-master-lightest btn-rounded">
                                {{segment.name}}
                                <i class="fa fa-times muted m-l-10 pointer requestModal" data-type="detachSegment" ></i>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="detachSegment">
                                <detach-segment-form-component :data="segment" :company_id="item.id" :connection="item.company_module.connections[0].id" section="customerProfileSection"></detach-segment-form-component>
                            </modal-component>
                        </div>
                    </div>
                </div>
                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="assignSegment">
                    <assign-segment-form-component :data="item" section="customerProfileSection"></assign-segment-form-component>
                </modal-component>
            </div>
        </div>
        <div class="col-6">
            <div class="row">
                <div class="col-auto" v-if="item.employee">
                    <div class="row align-items-center m-b-5">
                        <div class="col">
                            <h6 class="no-margin fs-12">Account Owner</h6>
                            <h6 class="no-margin">{{item.employee.name}}</h6>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="no-margin fs-12">Email Address</h6>
                            <h6 class="no-margin">{{item.employee.email}}</h6>
                        </div>
                    </div>
                </div>
                <div class="col-auto" v-if="item.contact">
                    <div class="row align-items-center m-b-5">
                        <div class="col">
                            <h6 class="no-margin fs-12">Contact Number</h6>
                            <h6 class="no-margin">{{item.contact.phone}}</h6>
                        </div>
                    </div>
                    <!-- <div class="row align-items-center">
                        <div class="col">
                            <h6 class="no-margin fs-12">WeChat ID</h6> 
                            <h6 class="no-margin">{{item.contact.wechat_id}}</h6>
                        </div>
                    </div> -->
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="no-margin fs-12">Company Type </h6> 
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeBusinessType">
                                <change-business-type-form-component :section="'customerProfileSection'" :data="item"></change-business-type-form-component>
                            </modal-component>
                            <h6 class="no-margin">
                                {{item.type_name}}
                                <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary bg-transparent" data-type="changeBusinessType" v-if="$store.getters.isAdmin">
                                    <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                                </div>
                            </h6>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row">
                        <div class="col-auto">
                            <div class="row" v-if="item.identification">
                                <div class="col">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <h6 class="no-margin fs-12">{{ item.type === 0 ? 'Identification Card' : 'SSM Registration' }}</h6>
                                            <h6 class="no-margin"> {{item.identification.reference}}</h6>
                                        </div>
                                        <div class="col-auto p-l-0" v-for="file in item.identification.files" v-bind:key="file.id"  >
                                            <document-file-viewer-component :file="file">
                                                <template slot="button">
                                                    <div class="icon-thumbnail fs-14 text-white icon-25 bg-primary btn-rounded m-l-5">
                                                        <i class="fa fa-file-image-o fs-14"></i>
                                                    </div>
                                                </template>
                                            </document-file-viewer-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row parentContainer" v-if="!item.identification">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col no-padding">
                                                    <button class="btn btn-sm btn-success btn-block b-rad-none requestModal" data-type="identificationVerificationModal">Upload Identification</button>
                                                </div>
                                            </div>
                                            <modal-component type="identificationVerificationModal">
                                                <identification-verification-form-component section="orderListSection" :data="item"></identification-verification-form-component>
                                            </modal-component>
                                        </div>
                                    </div>
                                    <div class="row parentContainer">
                                        <div class="col no-padding">
                                            <button type="button" class=" btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none requestModal" data-type="exportCompanyModuleSummary">
                                                <div class="row align-items-center">
                                                    <div class="col-auto p-r-0 p-l-0">
                                                        <i class="fa fa-file-excel-o fs-16"></i>
                                                    </div>
                                                    <div class="col p-r-5">Export To Excel</div>
                                                </div>
                                            </button>
                                            <modal-component type="exportCompanyModuleSummary">
                                                <export-company-module-summary-form-component section="exportCompanyModuleSummarySection" :data="item.company_module" @exit="closeModal"></export-company-module-summary-form-component>
                                            </modal-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="row justify-content-end m-t-5 m-b-5">
                <div class="col-auto text-right">
                    <div class="font-heading fs-10 all-caps p-t-5 p-b-5 p-l-10 p-r-15 b-rad-sm bg-master-lighter">
                        <i class="fa fa-circle m-r-5" :class="[{'text-success': item.status === 2}, {'text-danger': item.status !== 2}]"></i>{{item.status === 2 ? 'Active' : item.status === 5 ? 'Suspended' : 'Inactive'}}
                    </div>
                </div>
            </div>
            <div class="row justify-content-end m-t-5 m-b-5">
                <div class="col-auto text-right">
                    <div class="font-heading fs-10 all-caps p-t-5 p-b-5 p-l-10 p-r-15 b-rad-sm bg-master-lighter" v-if="item.employee">
                        <i class="fa fa-circle text-success m-r-5"></i>Claimed
                    </div>
                    <div class="font-heading fs-10 all-caps p-t-5 p-b-5 p-l-10 p-r-15 b-rad-sm bg-master-lighter pointer" ref="copyButton" v-if="!item.employee" @click="copyUrl">
                        Invitation Link <i class="fa fa-clipboard text-complete m-l-5"></i>
                    </div>
                    <textarea style="position: absolute; left: -99999px;" ref="invitationLink">{{ route('company.claim', item.hash_id) }}</textarea>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        methods: {
            copyUrl(event) {
                this.$refs.invitationLink.select();
                document.execCommand('copy');

                $(this.$refs.copyButton).tooltip({
                    title: 'Url Copied To Clipboard!',
                    placement: 'left',
                    delay: 1000
                });
                $(this.$refs.copyButton).tooltip('show');
            },
            hrefPaymenBillingPage(){
                window.location.href = route('customer.payment-and-billing', this.item.company_module.marking);
            },
        },
        mixins: [componentHandler]
    }
</script>