@extends('layouts.master')
@push('head')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush
@section('background-image', 'https://z8games.akamaized.net/cfna/web/main/ShopItem/webshop_background.jpg')
@section('bg-y', '-50px')
@section('css')
    <style>
        #friend-choose {
            font-family: "Marcellus SC",serif;
            padding: 0.5em;
            background: #1a1a1a;
            color: #fff;
            border: none;
            outline: none;
        }
        .ph-content-wrapper {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            display: block
        }

        .ph-webshop-top-padding {
            background: 100% 0 no-repeat;
            min-height: 800px;
            padding-top: 217px

        }

        #webshopbannertext {
            display: inline-block;
            background-image: url({{ asset('assets/shop/images/text_banner_webshop.png') }});
            height: 72px;
            width: 458px;
            position: relative;
            top: 20px;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            left: 50%
        }
        #ph-webshop-content-wrapper {
            width: 980px;
            background-image: url({{ asset('assets/shop/images/bg_tile_body.png') }});
            background-position: 0 5px;
            background-repeat: repeat-x;
            padding: 0;
            margin: 0 auto;
            height: 100%;
            min-height: 800px
        }

        #ph-webshop-section-center-btn-bkgnd {
            margin: 0 auto;
            width: 980px;
            height: 35px;
            background-position: top;
            background-repeat: repeat-x
        }

        #ph-main-content {
            width: 980px;
            padding: 0 20px 40px;
            margin: 0 auto;
            height: 100%;
            overflow: visible
        }
        #ph-main-content .row {
            margin-left: 0;
            margin-right: 0;
            width: 940px!important
        }
        #ph-main-content:last-child:after {
            content: "";
            display: table;
            clear: both
        }

        #ph-main-content:last-child::after {
            content: "";
            display: table;
            clear: both
        }


        #ph-webshop_secondary_banner {
            width: 940px;
            height: 157px;
            margin-bottom: 0;
            padding: 7px
        }

        #ph-webshop_secondary_banner #returnToShop {
            display: inline-block;
            width: 620px;
            height: 142px
        }

        #ph-webshop_secondary_banner #player_webshop_details {
            width: 295px;
            height: 142px;
            float: right;
            background-color: #212121;
            position: relative;
            border-top: 1px solid #212121;
            border-bottom: solid 1px #302f2f;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-position: 0 0, 100% 0;
            background-repeat: no-repeat;
            -webkit-background-size: 1px 100%;
            -moz-background-size: 1px 100%;
            background-size: 1px 100%;
            background-image: -webkit-linear-gradient(top, #212121 0, #302f2f 100%), -webkit-linear-gradient(top, #212121 0, #302f2f 100%);
            background-image: -moz-linear-gradient(top, #212121 0, #302f2f 100%), -moz-linear-gradient(top, #212121 0, #302f2f 100%);
            background-image: -o-linear-gradient(top, #212121 0, #302f2f 100%), -o-linear-gradient(top, #212121 0, #302f2f 100%);
            background-image: linear-gradient(to bottom, #212121 0, #302f2f 100%), linear-gradient(to bottom, #212121 0, #302f2f 100%)
        }

        #ph-webshop_secondary_banner #player_webshop_details:after,
        #ph-webshop_secondary_banner #player_webshop_details:before {
            content: "";
            position: absolute
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN {
            width: 100%;
            padding: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            text-transform: uppercase;
            font-family: Oswald, sans-serif;
            line-height: 24px
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .points {
            border-bottom: solid 1px #302f2f!important;
            float: left;
            clear: both;
            height: 60px
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .points div {
            width: 135px;
            text-align: center;
            float: left;
            font-size: 14px;
            color: #ccc
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .points div span {
            display: inline-block;
            color: #ffc618;
            font-size: 18px;
            letter-spacing: .06em
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .points div span span {
            font-size: 14px
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .points div:first-child {
            border-right: solid 1px #000!important
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .points div:last-child {
            border-left: solid 1px #302f2f
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .actions {
            border-top: solid 1px #000;
            padding-top: 15px;
            height: 40px;
            clear: both
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .actions .balance {
            background-image: url({{ asset('assets/shop/images/balance_icon1.png') }});
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .actions .history {
            background-image: url({{ asset('assets/shop/images/history_icon1.png') }});
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .actions a {
            width: 50%;
            float: left;
            text-decoration: none;
            color: #797979!important;
            background-repeat: no-repeat;
            background-position: 0 50%;
            padding-left: 20px
        }

        #ph-webshop_secondary_banner #player_webshop_details .loggedIN .balance {
            font-size: 14px
        }

        .ng-isolate-scope .pagination>li>a {
            position: inherit;
            float: left;
            padding: 2px 0;
            margin: 0 20px!important;
            color: inherit;
            text-decoration: none;
            background-color: transparent;
            border: inherit
        }

        .ng-isolate-scope .pagination>.active>a,
        .ng-isolate-scope .pagination>.active>a:focus,
        .ng-isolate-scope .pagination>.active>a:hover {
            z-index: inherit;
            color: inherit;
            cursor: default;
            background-color: transparent;
            border-color: transparent
        }

        .container-fluid {
            padding-right: 10px!important;
            padding-left: 0!important;
            margin-bottom: 13px!important
        }

        .container-fluid::after,
        .container-fluid:after {
            content: "";
            display: table;
            clear: both
        }

        .container-fluid:after,
        .container:after,
        .container-fluid:after,
        .container-fluid:before,

        .container-fluid {
            margin-right: auto;
            margin-left: auto
        }


        .ph-subpage-navigation-standard-menu {
            width: 940px;
            margin: 0 auto;
            padding: 10px 0
        }

        .ph-subpage-navigation-standard-menu ul.nav {
            height: 40px;
            background-position: top left;
            background-repeat: no-repeat;
            background-color: transparent;
            padding-top: 8px;
            margin: 0 auto;
            display: table
        }

        button {
            vertical-align: baseline
        }

        button {
            -webkit-appearance: button
        }

        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0
        }
        button {
            margin: 0;
            font: inherit;
            color: inherit
        }

        button {
            overflow: visible
        }

        button {
            text-transform: none
        }

        button {
            -webkit-appearance: button;
            cursor: pointer
        }

        button::-moz-focus-inner,
        input::-moz-focus-inner {
            padding: 0;
            border: 0
        }
        button {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit
        }
        [role=button] {
            cursor: pointer
        }
        .ph-subpage-navigation-standard-menu ul.nav>li, .shop-tab-btn, .shop-sub-tab-btn {
            text-align: center;
            font-family: Oswald, sans-serif;
            font-size: 12px;
            line-height: 225%;
            letter-spacing: .12em;
            text-transform: uppercase;
            font-weight: 700;
            white-space: nowrap
        }

        .ph-subpage-navigation-standard-menu ul.nav>li>a, .shop-tab-btn, .shop-sub-tab-btn {
            color: #797979;
            padding: .01em 1em;
            text-decoration: none;
            margin: 0 20px
        }

        .shop-tab-btn, .shop-sub-tab-btn {
            background: transparent;
            border: none;
        }

        .ph-subpage-navigation-standard-menu ul.nav>li.active>a,
        .ph-subpage-navigation-standard-menu ul.nav>li:hover>a,
        .shop-tab-btn:hover, .shop-tab-btn:focus, .active-shop-btn, .shop-sub-tab-btn:hover, .shop-sub-tab-btn:focus {
            text-decoration: none;
            color: #111!important;
            padding: .01em 1em;
            background-color: #ffc618;
            border-radius: 3px;
            -webkit-border-radius: 3;
            -moz-border-radius: 3
        }
        .ph-subpage-navigation-standard-menu ul.nav>li, .shop-tab-btn, .shop-sub-tab-btn {
            width: 23%
        }

        @media (max-width:768px) {
            .ph-subpage-navigation-standard-menu .nav-pills>li {
                float: left!important
            }
        }

        .nav-pills>li>a {
            border-radius: 4px
        }

        .nav-pills>li+li {
            margin-left: 2px
        }

        .nav-pills>li.active>a,
        .nav-pills>li.active>a:focus,
        .nav-pills>li.active>a:hover {
            color: #fff;
            background-color: #337ab7
        }

        .nav {
            padding-left: 0;
            margin-bottom: 0;
            list-style: none
        }

        .nav>li {
            position: relative;
            display: block
        }

        .nav>li>a:focus,
        .nav>li>a:hover {
            text-decoration: none;
            background-color: #eee
        }

        .nav-justified {
            width: 100%
        }

        .nav-justified>li {
            float: none
        }

        .nav-justified>li>a {
            margin-bottom: 5px;
            text-align: center
        }

        @media (min-width:768px) {
            .nav-justified>li {
                display: table-cell;
                width: 1%
            }
            .nav-justified>li>a {
                margin-bottom: 0
            }
        }
        div.nav_bottom_border {
            width: 940px;
            margin: 0 auto;
            padding: 0;
            height: 2px;
            background-image: url({{ asset('assets/shop/images/div_body1.png') }});
            background-position: top left;
            background-repeat: no-repeat
        }

        .col-md-12 {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px
        }
        @media (min-width:992px) {
            .col-md-12,
            .col-md-4 {
                float: left
            }
            .col-md-12 {
                width: 100%
            }
            .col-md-4 {
                width: 33.33333333%
            }
        }
        .text-center {
            text-align: center
        }

        .row:after,
        .row:before {
            display: table;
            content: " "
        }

        .row:after {
            clear: both
        }

        .row {
            width: 940px!important
        }

        #ph-shopitems-container {
            margin-left: -15px;
            margin-right: -15px;
            clear: both
        }

        #ph-shopitems-container .ph-shopitem-box {
            width: 300px;
            min-height: 330px;
            max-height: 330px;
            margin: 0 10px 25px 0;
            float: left;
            position: relative;
            padding: 0;
            background-color: #1a1a1a;
            border-bottom: solid 2px #282828;
            text-align: center;
        }

        #ph-shopitems-container .ph-shopitem-box .ph-300-item-container {
            width: 300px;
            height: 169px;
            overflow: hidden;
            position: relative;
            margin-bottom: 15px;
            background-image: url({{ asset('assets/shop/images/shopitem_bg.jpg') }});
        }

        #ph-shopitems-container .ph-shopitem-box .ph-300-item-container img.item {
            max-width: 300px;
            width: auto;
            overflow: hidden
        }

        #ph-shopitems-container .ph-shopitem-box .ph-300-item-container .vip {
            display: inline-block;
            background-image: url({{ asset('assets/shop/images/vip_icon.png') }});
            width: 35px;
            height: 36px;
            position: absolute;
            bottom: 0;
            right: 15px
        }
        #ph-shopitems-container .ph-shopitem-box .ph-300-item-container .new {
            display: inline-block;
            background-image: url({{ asset('assets/shop/images/new_icon.png') }});
            width: 38px;
            height: 37px;
            position: absolute;
            top: 0;
            left: 8px
        }

        #ph-shopitems-container .ph-shopitem-box .ph-300-item-container .hot {
            display: inline-block;
            background-image: url({{ asset('assets/shop/images/hot_icon.png') }});
            width: 39px;
            height: 37px;
            position: absolute;
            top: 0;
            left: 8px
        }


        #ph-shopitems-container .ph-shopitem-box p {
            margin-bottom: 0px;
            overflow-wrap: break-word;
            max-height: 53px;
            height: 53px;
            font-family: Roboto, sans-serif;
            font-size: 14px;
            line-height: 21px;
            padding: 7px 10px;
            overflow: hidden;
        }

        #ph-shopitems-container .ph-shopitem-box .name {

            font-size: 15px;
            font-family: Oswald, sans-serif;
            line-height: 21px;
            color: rgb(204, 204, 204);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            width: 205px;
            float: left;
            text-align: left;
            display: block;
            margin-left: 10px;
            white-space: nowrap;
            overflow: hidden;
        }

        #ph-shopitems-container .ph-shopitem-box .price {
            font-size: 15px;
            font-family: Oswald, sans-serif;
            line-height: 21px;
            letter-spacing: 0.06em;
            color: rgb(255, 198, 24);
            width: 75px;
            float: left;
            text-align: right;
            display: block;
            margin-right: 10px;
            white-space: nowrap;
        }

        #ph-shopitems-container .ph-shopitem-box .ph-shopitem-footer {
            padding: 10px;
            font-size: 13px;
            color: #ffc618
        }

        #ph-shopitems-container .ph-shopitem-box .ph-shopitem-footer .ph-btn_pag5_search {
            float: right;
            position: relative;
            top: -5px;
        }

        @media (min-width:1200px) {
            .col-lg-4 {
                float: left
            }
            .col-lg-4 {
                width: 33.33333333%
            }
        }

        .col-lg-4,

        @media (min-width:768px) {
            .col-sm-4 {
                float: left
            }
            .col-sm-4 {
                width: 33.33333333%
            }
        }

        .col-xs-4 {
            float: left
        }

        .col-xs-4 {
            width: 33.33333333%
        }

        .ph-btn_pag5_search {
            background-image: url({{ asset('assets/shop/images/all_buttons.png') }});
            display: inline-block;
            background-repeat: no-repeat;
            font-family: Oswald, sans-serif;
            font-weight: 400;
            text-align: center;
            letter-spacing: .06em;
            text-transform: uppercase;
            font-size: 14px;
            color: #797979!important;
            line-height: 2.2em;
            height: 30px;
            width: 80px;
            background-position: 0 -1170px;
            margin: 0;
        }

        .time {
            display: block;
        }

        .ph-btn_pag5_search.active,
        .ph-btn_pag5_search:hover {
            background-position: 0 -1200px;
            color: #211c1a!important
        }

        .ph-btn_pag5_search:visited {
            color: #797979;
            text-decoration: none!important
        }

        .ph-btn_pag5_search:active {
            color: #211c1a;
            text-decoration: none!important
        }

        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 0;
            border-radius: 4px
        }

        .pagination>li {
            display: inline
        }

        .pagination>li>a {
            margin-left: -1px;
            line-height: 1.42857143
        }

        .pagination>li:first-child>a,
        .pagination>li:first-child>span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px
        }

        .pagination>li:last-child>a,
        .pagination>li:last-child>span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px
        }

        .pagination>li>a:focus,
        .pagination>li>a:hover,
        .pagination>li>span:focus,
        .pagination>li>span:hover {
            z-index: 3;
            color: #23527c;
            background-color: #eee;
            border-color: #ddd
        }

        .pagination>.active>a,
        .pagination>.active>a:focus,
        .pagination>.active>a:hover,
        .pagination>.active>span,
        .pagination>.active>span:focus,
        .pagination>.active>span:hover {
            z-index: 2;
            color: #fff;
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7
        }

        .pagination>.disabled>a,
        .pagination>.disabled>a:focus,
        .pagination>.disabled>a:hover {
            color: #777;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #ddd
        }
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%
        }

        h3 {
            margin: 1em 0
        }

        hr {
            -moz-box-sizing: content-box
        }

        button {
            vertical-align: baseline
        }

        button {
            -webkit-appearance: button
        }

        html {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%
        }

        body {
            margin: 0
        }

        hr {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box
        }

        button {
            margin: 0;
            font: inherit
        }

        button {
            overflow: visible
        }

        button {
            text-transform: none
        }

        button {
            -webkit-appearance: button
        }

        table {
            border-spacing: 0
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        :after,
        :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        html {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        body {
            background-color: #fff
        }

        button {
            font-family: inherit
        }

        hr {
            margin-bottom: 20px;
            border: 0
        }

        h3 {
            font-weight: 500
        }

        h3 {
            margin-top: 20px
        }

        table {
            background-color: transparent
        }

        .table {
            width: 100%;
            max-width: 100%
        }

        .table>tbody>tr>td {
            padding: 8px;
            vertical-align: top;
            border-top: 1px solid #ddd
        }

        .fade {
            -webkit-transition: opacity .15s linear;
            -o-transition: opacity .15s linear;
            transition: opacity .15s linear
        }

        .fade.in {
            opacity: 1
        }

        @-webkit-keyframes progress-bar-stripes {
            from {
                background-position: 40px 0
            }
            to {
                background-position: 0 0
            }
        }

        @-o-keyframes progress-bar-stripes {
            from {
                background-position: 40px 0
            }
            to {
                background-position: 0 0
            }
        }

        @keyframes progress-bar-stripes {
            from {
                background-position: 40px 0
            }
            to {
                background-position: 0 0
            }
        }

        .close {
            font-weight: 700;
            text-shadow: 0 1px 0 #fff
        }

        .close:focus,
        .close:hover {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            filter: alpha(opacity=50);
            opacity: .5
        }

        button.close {
            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0
        }

        .modal {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            -webkit-overflow-scrolling: touch;
            outline: 0
            display: none;
            z-index: 1650;
            top: 20%;
        }

        .modal.fade .modal-dialog {
            -webkit-transition: -webkit-transform .3s ease-out;
            -o-transition: -o-transform .3s ease-out;
            transition: transform .3s ease-out;
            -webkit-transform: translate(0, -25%);
            -ms-transform: translate(0, -25%);
            -o-transform: translate(0, -25%)
        }

        .modal.in .modal-dialog {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0)
        }

        .modal-open .modal {
            overflow-x: hidden;
            overflow-y: auto
        }

        .modal-dialog {
            position: relative;
            margin: 10px
        }

        .modal-content {
            position: relative;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .2);
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
        }

        .modal-body {
            position: relative
        }

        .modal-footer {
            padding: 15px;
            border-top: 1px solid #e5e5e5
        }

        @media (min-width:768px) {
            .modal-dialog {
                width: 600px;
                margin: 30px auto
            }
            .modal-content {
                -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
                box-shadow: 0 5px 15px rgba(0, 0, 0, .5)
            }
        }

        .btn-group-vertical>.btn-group:after,
        .btn-group-vertical>.btn-group:before,
        .btn-toolbar:after,
        .btn-toolbar:before,
        .clearfix:after,
        .clearfix:before,
        .container-fluid:after,
        .container-fluid:before,
        .container:after,
        .container:before,
        .dl-horizontal dd:after,
        .dl-horizontal dd:before,
        .form-horizontal .form-group:after,
        .form-horizontal .form-group:before,
        .modal-footer:after,
        .modal-footer:before,
        .nav:after,
        .nav:before,
        .navbar-collapse:after,
        .navbar-collapse:before,
        .navbar-header:after,
        .navbar-header:before,
        .navbar:after,
        .navbar:before,
        .pager:after,
        .pager:before,
        .panel-body:after,
        .panel-body:before,
        .row:after,
        .row:before {
            display: table;
            content: " "
        }

        .btn-group-vertical>.btn-group:after,
        .btn-toolbar:after,
        .clearfix:after,
        .container-fluid:after,
        .container:after,
        .dl-horizontal dd:after,
        .form-horizontal .form-group:after,
        .modal-footer:after,
        .nav:after,
        .navbar-collapse:after,
        .navbar-header:after,
        .navbar:after,
        .pager:after,
        .panel-body:after,
        .row:after {
            clear: both
        }

        @-ms-viewport {
            width: device-width
        }

        @font-face {
            font-family: 'Oswald';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
        }

        @font-face {
            font-family: 'Oswald';
            font-style: normal;
            font-weight: 700;
            src: url(https://fonts.gstatic.com/s/oswald/v29/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
        }

        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
        }

        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 700;
            src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
        }

        html {
            min-width: 980px;
            background: #000;
            height: 100%;
            font-family: Roboto, sans-serif;
            line-height: 123%;
            color: #ccc
        }

        body {
            min-width: 980px;
            height: 100%;
            background: 0 0;
            font-family: Roboto, sans-serif;
            font-size: 14px;
            line-height: 123%;
            color: #ccc;
            z-index: -5
        }

        .modal {
            z-index: 1650;
            top: 20%
            display: none;
        }

        body.modal-open {
            overflow: hidden
        }

        .modal-open {
            padding-right: 0!important
        }

        .modal-body {
            overflow: hidden!important
        }

        .modal-header {
            min-height: 0;
            border-bottom: 0;
            right: -18px;
            padding: 0;
            line-height: 0
        }

        .modal-header .close {
            color: #ffc618
        }

        .modal-content {
            box-shadow: 0 0;
            -webkit-box-shadow: 0 0;
            border-radius: 0
        }

        hr {
            height: 0;
            border-bottom: 1px solid #212121
        }

        .ph-btn_pag5_search_disabled {
            background-image: url({{ asset('assets/shop/images/all_buttons.png') }});
            display: inline-block;
            background-repeat: no-repeat;
            font-family: Oswald, sans-serif;
            font-weight: 400;
            text-align: center;
            letter-spacing: .06em;
            text-transform: uppercase;
            position: relative;
            font-size: 14px;
            color: #797979!important;
            line-height: 2.2em;
            height: 30px;
            width: 80px;
            background-position: 0 -1170px
        }

        .ph-shopbox-confirm .error {
            color: #ff2929
        }
        .ph-shopbox-confirm .modal{
            display: none;

        }
        .ph-shopbox-confirm .modal-dialog {
            width: 300px;
            height: auto
        }

        .ph-shopbox-confirm .modal-body {
            border: none!important;
            width: 300px;
            height: 150px;
            background: 0 0;
            padding: 0 12px;
            display: table;
            text-align: center;
            vertical-align: middle;
            line-height: 22px;
            overflow-y: auto!important
        }

        .ph-shopbox-confirm .modal-body hr {
            margin-top: 2px;
            border-top: 1px solid #1a1a1a
        }

        .ph-shopbox-confirm .modal-body table {
            margin-bottom: 10px;
            border-collapse: separate
        }

        .ph-shopbox-confirm .modal-body table td {
            border: 0
        }

        .ph-shopbox-confirm .modal-body table tr td {
            font-family: Roboto, sans-serif;
            line-height: 150%;
            color: #ccc
        }

        .ph-shopbox-confirm .modal-body table tr td:first-child {
            text-align: left
        }

        .ph-shopbox-confirm .modal-body table tr td:last-child {
            text-align: right
        }

        .ph-shopbox-confirm .modal-body table tr:nth-child(2) td:last-child {
            color: #ffc618
        }

        .ph-shopbox-confirm .modal-body table tr:last-child td {
            border: 1px solid #302f2f;
            margin-top: 10px;
            background-color: #302f2f
        }

        .ph-shopbox-confirm .modal-body table tr:last-child td:first-child {
            border-top-left-radius: 7px;
            border-bottom-left-radius: 7px
        }

        .ph-shopbox-confirm .modal-body table tr:last-child td:last-child {
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px
        }

        .ph-shopbox-confirm .modal-header {
            position: relative;
            height: 57px;
            width: 300px;
            clear: both
        }

        .ph-shopbox-confirm .modal-header h3 {
            font-family: Oswald, sans-serif;
            color: #ccc;
            font-size: 21px;
            line-height: 21px;
            width: 280px;
            float: left;
            margin-bottom: 0;
            padding-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: .006em
        }

        .ph-shopbox-confirm .modal-header button {
            height: 37px;
            width: 18px;
            z-index: 10;
            background-image: url({{ asset('assets/shop/images/lightbox_gray_close_right.png') }});
            background-repeat: no-repeat;
            position: absolute;
            float: right
        }

        .ph-shopbox-confirm .modal-header .close {
            margin-left: 279px;
            margin-top: 0;
            font-size: 0;
            line-height: 0;
            opacity: 1
        }

        .ph-shopbox-confirm .modal-header::after,
        .ph-shopbox-confirm .modal-header:after {
            content: "";
            display: table;
            clear: both
        }

        .ph-shopbox-confirm .modal-footer {
            border: 0;
            padding-top: 0;
            min-height: 40px;
            text-align: center
        }

        .ph-shopbox-confirm .modal-footer div {
            text-align: center
        }

        .ph-shopbox-confirm .modal-content {
            background-color: #212121
        }

    </style>
@endsection
@section('content')
    @include('cfp.components.error_alert')
    <div class="ph-content-wrapper ph-webshop-top-padding"> <!--<a href=https://crossfire.pharaoh-gaming.net/>!--><span id=webshopbannertext style=background:0></span></a>
        <div id=ph-webshop-content-wrapper>
            <div id=ph-webshop-section-center-btn-bkgnd></div>
            <div id=ph-main-content>
                <div id=scrolltome class=container-fluid style=margin-bottom:0px!important>
                    <div class="ph-subpage-navigation-standard-menu">
                        <ul class="nav nav-pills nav-justified">
                            <button class="shop-tab-btn active-shop-btn" id="zp-shop" onClick="openTab('zp_shop', this.id);">ZP Shop</button>
                            <button class="shop-tab-btn" id="ep-shop" onClick="openTab('ep_shop', this.id);">EP Shop</button>
                        </ul>
                        <div class=nav_bottom_border></div>
                    </div>
                </div>
                <div id=webShopItemsDivIdentifier>
                    <div class=container-fluid>
                        <div class=row>
                            <div class="col-md-12 text-center"></div>
                        </div>
                        @php
                            $zp=$user_zp->CurrZP ?? 0;
                            $ep = $user_ep->EVENT_POINT ?? 0;
                        @endphp
                        <div id="zp_shop" class="shop-tab">
                            <div id=ph-shopitems-container>
                                <div class="ph-subpage-navigation-standard-menu">
                                    <ul class="nav nav-pills nav-justified">
                                        <button class="shop-sub-tab-btn active-shop-btn" id="zp-normal" onClick="openSubTab('zp_normal', this.id);changeSubTabButtonBg(this.id)">Normal</button>
                                        <button class="shop-sub-tab-btn" id="zp-weapons" onClick="openSubTab('zp_weapons', this.id);changeSubTabButtonBg(this.id)">Weapons</button>
                                        <button class="shop-sub-tab-btn" id="zp-crates" onClick="openSubTab('zp_crates', this.id);changeSubTabButtonBg(this.id)">Crates</button>
                                        <button class="shop-sub-tab-btn" id="zp-vfx" onClick="openSubTab('zp_vfx', this.id);changeSubTabButtonBg(this.id)">VFX</button>
                                    </ul>
                                    <div class=nav_bottom_border></div>
                                </div>
                                <div id="zp_normal" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($zp_normal as $zp_normal_item)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $zp_normal_item->IMG_URL }}>
                                                        @if ( $zp_normal_item->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $zp_normal_item->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $zp_normal_item->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $zp_normal_item->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $zp_normal_item->PRICE_ZP }} ZP</span>
                                                    <p>{{ $zp_normal_item->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $zp_normal_item->ID }}">
                                                    @if ( $zp > $zp_normal_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($zp-$zp_normal_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $zp_normal_item->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search data-item_id='. $zp_normal_item->ID .' onclick="sendGift()">'. __("shop.buy") .'</button></div>')
                                                    @elseif ( $zp < $zp_normal_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($zp-$zp_normal_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button onclick="sendGift()" type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_normal_item->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if($player_authority == 0)
                                                        <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_normal_item->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#giftConfirm" data-buy-button="{{ $gift_button }}">
                                                            Gift
                                                        </a>
                                                    @endif
                                                    @if ($zp_normal_item->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $zp_normal_item->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $zp_normal->onEachSide(5)->appends(['shop_type' => 'zp', 'tab' => 'normal'])->links("pagination.cf-pagination", ["paginator" => $zp_normal]) }}
                                    </div>
                                </div>
                                <div id="zp_weapons" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($zp_weapons as $zp_weapon)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $zp_weapon->IMG_URL }}>
                                                        @if ( $zp_weapon->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $zp_weapon->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $zp_weapon->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $zp_weapon->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $zp_weapon->PRICE_ZP }} ZP</span>
                                                    <p>{{ $zp_weapon->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $zp_weapon->ID }}">
                                                    @if ( $zp > $zp_weapon->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($zp-$zp_weapon->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $zp_weapon->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search data-item_id='. $zp_weapon->ID .' onclick="sendGift()">'. __("shop.buy") .'</button></div>')
                                                    @elseif ( $zp < $zp_weapon->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($zp-$zp_weapon->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_weapon->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if($player_authority == 0)
                                                        <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_weapon->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#giftConfirm" data-buy-button="{{ $gift_button }}">
                                                            Gift
                                                        </a>
                                                    @endif
                                                    @if ($zp_weapon->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $zp_weapon->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $zp_weapons->onEachSide(5)->appends(['shop_type' => 'zp', 'tab' => 'weapons'])->links("pagination.cf-pagination", ["paginator" => $zp_weapons]) }}
                                    </div>
                                </div>
                                <div id="zp_crates" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($zp_crates as $zp_crate)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $zp_crate->IMG_URL }}>
                                                        @if ( $zp_crate->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $zp_crate->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $zp_crate->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $zp_crate->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $zp_crate->PRICE_ZP }} ZP</span>
                                                    <p>{{ $zp_crate->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $zp_crate->ID }}">
                                                    @if ( $zp > $zp_crate->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($zp-$zp_crate->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $zp_crate->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search data-item_id='. $zp_crate->ID .' onclick="sendGift()">'. __("shop.buy") .'</button></div>')
                                                    @elseif ( $zp < $zp_crate->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($zp-$zp_crate->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_crate->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if($player_authority == 0)
                                                        <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_crate->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#giftConfirm" data-buy-button="{{ $gift_button }}">
                                                            Gift
                                                        </a>
                                                    @endif
                                                    @if ($zp_crate->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $zp_crate->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $zp_crates->onEachSide(5)->appends(['shop_type' => 'zp', 'tab' => 'crates'])->links("pagination.cf-pagination", ["paginator" => $zp_crates]) }}
                                    </div>
                                </div>
                                <div id="zp_vfx" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($zp_vfx as $zp_vfx_item)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $zp_vfx_item->IMG_URL }}>
                                                        @if ( $zp_vfx_item->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $zp_vfx_item->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $zp_vfx_item->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $zp_vfx_item->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $zp_vfx_item->PRICE_ZP }} ZP</span>
                                                    <p>{{ $zp_vfx_item->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $zp_vfx_item->ID }}">
                                                    @if ( $zp > $zp_vfx_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($zp-$zp_vfx_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $zp_vfx_item->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search data-item_id='. $zp_vfx_item->ID .' onclick="sendGift()">'. __("shop.buy") .'</button></div>')
                                                    @elseif ( $zp < $zp_vfx_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($zp-$zp_vfx_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                        @php ($gift_button='<div><button id="gift-btn" role=button class=ph-btn_pag5_search disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_vfx_item->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if($player_authority == 0)
                                                        <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $zp_vfx_item->PRICE_ZP }} ZP" data-currzp="{{ number_format($zp) ?? 0 }} ZP" data-target="#giftConfirm" data-buy-button="{{ $gift_button }}">
                                                            Gift
                                                        </a>
                                                    @endif
                                                    @if ($zp_vfx_item->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $zp_vfx_item->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $zp_vfx->onEachSide(5)->appends(['shop_type' => 'zp', 'tab' => 'vfx'])->links("pagination.cf-pagination", ["paginator" => $zp_vfx]) }}
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div id="ep_shop" class="shop-tab">
                            <div id=ph-shopitems-container>
                                <div class="ph-subpage-navigation-standard-menu">
                                    <ul class="nav nav-pills nav-justified">
                                        <button class="shop-sub-tab-btn active-shop-btn" id="ep-normal" onClick="openSubTab('ep_normal', this.id);">Normal</button>
                                        <button class="shop-sub-tab-btn" id="ep-weapons" onClick="openSubTab('ep_weapons', this.id);">Weapons</button>
                                        <button class="shop-sub-tab-btn" id="ep-crates" onClick="openSubTab('ep_crates', this.id);">Crates</button>
                                        <button class="shop-sub-tab-btn" id="ep-vfx" onClick="openSubTab('ep_vfx', this.id);">VFX</button>
                                    </ul>
                                    <div class=nav_bottom_border></div>
                                </div>
                                <div id="ep_normal" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($ep_normal as $ep_normal_item)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $ep_normal_item->IMG_URL }}>
                                                        @if ( $ep_normal_item->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $ep_normal_item->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $ep_normal_item->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $ep_normal_item->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $ep_normal_item->PRICE_ZP }} EP</span>
                                                    <p>{{ $ep_normal_item->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $ep_normal_item->ID }}">
                                                    @if ( $ep > $ep_normal_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($ep-$ep_normal_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy/ep><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $ep_normal_item->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                    @elseif ( $ep < $ep_normal_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($ep-$ep_normal_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $ep_normal_item->PRICE_ZP }} EP" data-currzp="{{ number_format($ep) ?? 0 }} EP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if ($ep_normal_item->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $ep_normal_item->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $ep_normal->onEachSide(5)->appends(['shop_type' => 'ep', 'tab' => 'normal'])->links("pagination.cf-pagination", ["paginator" => $ep_normal]) }}
                                    </div>
                                </div>
                                <div id="ep_weapons" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($ep_weapons as $ep_weapon)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $ep_weapon->IMG_URL }}>
                                                        @if ( $ep_weapon->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $ep_weapon->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $ep_weapon->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $ep_weapon->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $ep_weapon->PRICE_ZP }} EP</span>
                                                    <p>{{ $ep_weapon->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $ep_weapon->ID }}">
                                                    @if ( $ep > $ep_weapon->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($ep-$ep_weapon->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy/ep><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $ep_weapon->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                    @elseif ( $ep < $ep_weapon->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($ep-$ep_weapon->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $ep_weapon->PRICE_ZP }} EP" data-currzp="{{ number_format($ep) ?? 0 }} EP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if ($ep_weapon->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $ep_weapon->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $ep_weapons->onEachSide(5)->appends(['shop_type' => 'ep', 'tab' => 'weapons'])->links("pagination.cf-pagination", ["paginator" => $ep_weapons]) }}
                                    </div>
                                </div>
                                <div id="ep_crates" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($ep_crates as $ep_crate)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $ep_crate->IMG_URL }}>
                                                        @if ( $ep_crate->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $ep_crate->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $ep_crate->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $ep_crate->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $ep_crate->PRICE_ZP }} EP</span>
                                                    <p>{{ $ep_crate->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $ep_crate->ID }}">
                                                    @if ( $ep > $ep_crate->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($ep-$ep_crate->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy/ep><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $ep_crate->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                    @elseif ( $ep < $ep_crate->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($ep-$ep_crate->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $ep_crate->PRICE_ZP }} EP" data-currzp="{{ number_format($ep) ?? 0 }} EP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if ($ep_crate->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $ep_crate->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $ep_crates->onEachSide(5)->appends(['shop_type' => 'ep', 'tab' => 'crates'])->links("pagination.cf-pagination", ["paginator" => $ep_crates]) }}
                                    </div>
                                </div>
                                <div id="ep_vfx" class="shop-sub-tab">
                                    <div id=ph-shopitems-container>
                                        @foreach ($ep_vfx as $ep_vfx_item)
                                            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
                                                <div class="ph-shopitem-box ">
                                                    <div class=ph-300-item-container> <img src={{ $ep_vfx_item->IMG_URL }}>
                                                        @if ( $ep_vfx_item->ITEM_TYPE == 'V' )
                                                            <span class="vip"></span>
                                                        @elseif ( $ep_vfx_item->ITEM_TYPE == 'N' )
                                                            <span class="new"></span>
                                                        @elseif ( $ep_vfx_item->ITEM_TYPE == 'H' )
                                                            <span class="hot"></span>
                                                        @endif
                                                    </div> <span class="name">{{ $ep_vfx_item->ITEM_NAME }}</span>
                                                    </br><span class="price">{{ $ep_vfx_item->PRICE_ZP }} EP</span>
                                                    <p>{{ $ep_vfx_item->ITEM_DESC }}</p>
                                                    <input type="hidden" name="item_id" value="{{ $ep_vfx_item->ID }}">
                                                    @if ( $ep > $ep_vfx_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'. __("shop.remainingbalance") .'</td> <td>'. number_format($ep-$ep_vfx_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<form method=post action=/shop/buy/ep><input type=hidden name=_token value='. csrf_token() .'><input type=hidden name=item_id value='. $ep_vfx_item->ID .'><div><button type=submit role=button class=ph-btn_pag5_search>'. __("shop.buy") .'</button></div></form>')
                                                    @elseif ( $ep < $ep_vfx_item->PRICE_ZP )
                                                        @php ($remaining_balance = '<td>'.  __("shop.remainingbalance") .'</td> <td class=error >'. number_format($ep-$ep_vfx_item->PRICE_ZP) .'</td>')
                                                        @php ($buy_button='<div><button type=submit role=button class=ph-btn_pag5_search_disabled>'. __("shop.buy") .'</button></div>')
                                                    @endif
                                                    <a href="" type="submit" role=button class="ph-btn_pag5_search viewConfirmZP" data-tippy-content="Buy" data-toggle="model" data-remainingbalance="{{ $remaining_balance ?? 0 }}" data-itemprice="{{ $ep_vfx_item->PRICE_ZP }} EP" data-currzp="{{ number_format($ep) ?? 0 }} EP" data-target="#purchaseConfirm" data-buy-button="{{ $buy_button }}">
                                                        {{ __("shop.buy") }}
                                                    </a>
                                                    @if ($ep_vfx_item->END_DATE < "3000-12-31")
                                                        <span class="time" style="color: red;margin-left: 10px;"> UNTIL: {{ $ep_vfx_item->END_DATE }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        {{ $ep_vfx->onEachSide(5)->appends(['shop_type' => 'ep', 'tab' => 'vfx'])->links("pagination.cf-pagination", ["paginator" => $ep_vfx]) }}
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>
                    <div class="modal fade ph-shopbox-confirm in" id=purchaseConfirm tabindex=-1 role=dialog aria-labelledby=webshopModal_Label aria-hidden=true style=display:none;padding-right:17px>
                        <div class=modal-dialog>
                            <div class=modal-content>
                                <div class=modal-header>
                                    <h3>{{ __("shop.confirm") }}</h3>
                                    <button type=button class=close data-dismiss=modal aria-label=Close></button>
                                </div>
                                <div class="modal-body" id=shopbox-confirm_div_content>
                                    <hr>
                                    <table class=table>
                                        <tbody>
                                        <tr>
                                            <td>{{ __("shop.currentbalance") }}</td>
                                            <td class="curbalance"></td>
                                        </tr>
                                        <tr>
                                            <td>{{ __("shop.cost") }}</td>
                                            <td class="itemprice"></td>
                                        </tr>
                                        <tr class=remainingbalance>

                                        </tr>
                                    </table>
                                    <hr> </div>
                                <div class=modal-footer>
                                    <span class="buy_button"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade ph-shopbox-confirm in" id=giftConfirm tabindex=-1 role=dialog aria-labelledby=webshopModal_Label aria-hidden=true style=display:none;padding-right:17px>
                        <div class=modal-dialog>
                            <div class=modal-content>
                                <div class=modal-header>
                                    <h3>{{ __("shop.confirm") }}</h3>
                                    <button type=button class=close data-dismiss=modal aria-label=Close></button>
                                </div>
                                <div class="modal-body" id=shopbox-confirm_div_content>
                                    <hr>
                                    <table class=table>
                                        <tbody>
                                        <tr>
                                            <td>{{ __("shop.currentbalance") }}</td>
                                            <td class="curbalance"></td>
                                        </tr>
                                        <tr>
                                            <td>{{ __("shop.cost") }}</td>
                                            <td class="itemprice"></td>
                                        </tr>
                                        <tr class=remainingbalance>

                                        </tr>
                                        <tr>
                                            <select id="friend-choose">
                                                @foreach($friends as $friend)
                                                    <option value="{{ $friend->FRIEND_USN }}">{{ $friend->NICKNAME }}</option>
                                                @endforeach
                                            </select>
                                        </tr>
                                    </table>
                                    <hr> </div>
                                <div class=modal-footer style="padding-top: 1em;">
                                    <span class="buy_button"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>

@endsection @section('js')

    <script>
        function sendGift(){
            const item_id = $("#gift-btn").data("item_id");
            const friend_usn = document.getElementById("friend-choose").value;
            $.ajaxSetup({
                url: "/shop/gift",
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                data: {
                    item_id: item_id,
                    friend_usn: friend_usn
                },
                success: function(data){
                    location.reload();
                    return false;
                },
                error: function() {
                    console.log("Error");
                }
            });
        }
        $(".viewConfirmZP").click(function() {
            return $(".curbalance").text($(this).attr("data-currzp")), $(".buy_button").html($(this).attr("data-buy-button")), $(".itemprice").html($(this).attr("data-itemprice")), $(".remainingbalance").html($(this).attr("data-remainingbalance")), $($(this).attr("data-target")).modal("show"), !1
        });
        $(".viewConfirmEP").click(function() {
            return $(".curbalance").text($(this).attr("data-currep")), $(".buy_button").html($(this).attr("data-buy-button")), $(".itemprice").html($(this).attr("data-itemprice")), $(".remainingbalance").html($(this).attr("data-remainingbalance")), $($(this).attr("data-target")).modal("show"), !1
        });
    </script>
    <script>
        function openTab(tabName, id) {
            var i;
            var x = document.getElementsByClassName("shop-tab");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            document.getElementById(tabName).style.display = "block";

            changeButtonBg(id);
        }

        function openSubTab(tabName, id) {
            var i;
            var x = document.getElementsByClassName("shop-sub-tab");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            document.getElementById(tabName).style.display = "block";

            changeSubTabButtonBg(id);
        }

        function changeSubTabButtonBg(id){
            var i;
            var x = document.getElementsByClassName("shop-sub-tab-btn");
            for (i = 0; i < x.length; i++) {
                x[i].classList.remove("active-shop-btn");
            }
            document.getElementById(id).classList.add("active-shop-btn");
        }

        function changeButtonBg(id){
            var i;
            var x = document.getElementsByClassName("shop-tab-btn");
            for (i = 0; i < x.length; i++) {
                x[i].classList.remove("active-shop-btn");
            }
            document.getElementById(id).classList.add("active-shop-btn");
        }

        function findGetParameter(parameterName) {
            var result = null,
                tmp = [];
            location.search
                .substr(1)
                .split("&")
                .forEach(function (item) {
                    tmp = item.split("=");
                    if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
                });
            return result;
        }
        function onLoadChangeTab(){
            let shop_type = findGetParameter("shop_type");
            let tab = findGetParameter("tab");

            if (shop_type == "ep") {
                openTab('ep_shop', 'ep-shop');

                if (tab == "weapons"){
                    openSubTab('ep_weapons', 'ep-weapons');
                } else if (tab == "crates"){
                    openSubTab('ep_crates', 'ep-crates');
                } else if (tab == "vfx"){
                    openSubTab('ep_vfx', 'ep-vfx');
                } else {
                    openSubTab('ep_normal', 'ep-normal');
                }
            } else if (shop_type == "zp") {
                openTab('zp_shop', 'zp-shop');

                if (tab == "weapons"){
                    openSubTab('zp_weapons', 'zp-weapons');
                } else if (tab == "crates"){
                    openSubTab('zp_crates', 'zp-crates');
                } else if (tab == "vfx"){
                    openSubTab('zp_vfx', 'zp-vfx');
                } else {
                    openSubTab('zp_normal', 'zp-normal');
                }
            } else {
                shop_type = "zp_shop";
                tab = "zp_normal";

                openTab(shop_type, 'zp-shop');
                openSubTab(tab, 'zp-normal');
            }
        }

        setTimeout(onLoadChangeTab, 0); // try again in 300 milliseconds
    </script>
@endsection