@extends('layout.basic.main')
{{--tab list items--}}
@if( $tab == 'list-item' && $typePayment == 0)
    @section('title', '単品商品（一覧）')
@endif
@if( $tab == 'list-item' && $typePayment != 0)
    @section('title', '継続商品（一覧）')
@endif

@if( $tab == 'sales-history' && $typePayment == 0)
    @section('title', '単品商品（販売履歴）')
@endif
@if( $tab == 'sales-history' && $typePayment != 0)
    @section('title', '継続商品（販売履歴）')
@endif

@if( $tab == 'setting')
    @section('title', '商品販売（各種設定）')
@endif

@if( $tab == 'add-item' && $typePayment == 0)
    @section('title', '単品商品（作成）')
@endif
@if( $tab == 'add-item' && $typePayment != 0)
    @section('title', '継続商品（作成）')
@endif

@if( $tab == 'edit-item' && $typePayment == 0)
    @section('title', '単品商品（編集）')
@endif
@if( $tab == 'edit-item' && $typePayment != 0)
    @section('title', '継続商品（編集）')
@endif

@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <style>
        .tab-list-items {
            display: flex;
            padding: 0px 15px;
            margin-left: -15px;
            background-color: #08BF5A;
            border-radius: 5px;
            margin-top: 20px;
        }
        .tab-list-items li {
            height: 100%;
            position: relative;
        }
        .tab-list-items li a {
            font-size: 17px;
            line-height: 55px;
            color: white !important;
            padding: 25px;
            font-weight: bold;
        }

        .tab-list-items .active-list-item {
            background-color: #009141;
        }

        .tab-list-items li img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-top: 1px;
            margin-left: -1px;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid" style="padding-right: 0">
        <div class="row">
            <div class="col-xs-12">
                <ul class="tab-list-items">
                    <li @if($tab == 'list-item') class="active-list-item" @endif>
                        <img src="/img_product/line-product.png" alt="">
                        <a href="{{ route('sales.index', ['tab' => 'list-item']) }}">商品一覧</a>
                    </li>
                    <li @if($tab == 'sales-history') class="active-list-item" @endif>
                        <img src="/img_product/line-product.png" alt="">
                        <a id="clickListHistory" href="#">販売履歴</a>
                    </li>
                    <li @if($tab == 'setting') class="active-list-item" @endif>
                        <img src="/img_product/line-product.png" alt="">
                        <a href="{{ route('sales.index', ['tab' => 'setting']) }}">各種設定</a>
                    </li>
                    <li>
                        <img src="/img_product/line-product.png" alt="">
                        <a href=""></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="@if($tab == 'sales-history') col-xs-10 @else col-xs-12 @endif  "  >
                @includeWhen($tab == 'list-item', 'basic.sales.v2.list-items-v2')
                @includeWhen($tab == 'add-item' || $tab == 'edit-item', 'basic.sales.v2.add-single-item')
                @includeWhen($tab == 'setting', 'basic.sales.v2.setting')
                @includeWhen($tab == 'sales-history', 'basic.sales.v2.list-order-history')
            </div>
        </div>
    </div>
{{--    @include('layout.modal_setting.modal_select_action')--}}
@endsection
@push('js')
    <script>
        $('#clickListHistory').click(function (e) {
            e.preventDefault();
            localStorage.removeItem('listOrderHistoryV2')
            window.location.href = '{{ route('sales.index', ['tab' => 'sales-history']) }}';
        });
    </script>
@endpush