@extends('admin.layouts.contentLayoutMaster')

@section('title','活動資料')

@section('vendor-styles')

@endsection

@section('page-styles')
    <style>
        .step-pills {
            justify-content: space-evenly !important;
        }

        .tox-notifications-container {
            display: none;
        }
    </style>
@endsection

@section('content')
    <section id="app">
        <div class="row match-height justify-content-center">
            <div class="col-md-12 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <ul class="nav nav-tabs justify-content-center" role="tablist">
                                <li class="nav-item">
                                    <a aria-controls="step1" aria-selected="true" class="nav-link active"
                                       data-toggle="tab" href="#step1_tab" id="step1-tab" role="tab">
                                        <i class="bx bx-calendar align-middle"></i>
                                        <span class="align-middle">步驟一：基本資料</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a aria-controls="step2" aria-selected="true" class="nav-link " data-toggle="tab"
                                       href="#step2_tab" id="step2-tab" role="tab">
                                        <i class="bx bx-package align-middle"></i>
                                        <span class="align-middle"> 步驟二：產品與優惠</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div aria-labelledby="step1-tab" class="tab-pane active" id="step1_tab" role="tabpanel">
                                    @include('admin.activity.tab.step1')
                                </div>
                                <div aria-labelledby="step2-tab" class="tab-pane " id="step2_tab" role="tabpanel">
                                    @include('admin.activity.tab.step2')
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row justify-content-center">
                                <button class="btn btn-primary mr-1 mb-1" type="button" @click="store">儲存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('admin.activity.modals.products')
        @include('admin.activity.modals.promotions')
        @include('admin.activity.modals.try_products')
    </section>
@endsection


@section('vendor-scripts')

@endsection

@section('page-scripts')
    <script>
        const Action = 'create';
        const AjaxUrl = {
            'getProduct': '{{ Route("ajax.admin.activity.get.products") }}',
            'uploadImage': '{{ Route("ajax.admin.activity.upload_image") }}',
            'store': '{{ Route("ajax.admin.activity.store") }}'
        };
        const Freights = {!! $freights !!}.reduce((acc, freight) => {
            const groupByKey = freight.type.split('_')[1];
            if (!acc[groupByKey]) {
                acc[groupByKey] = [];
            }
            acc[groupByKey].push(freight);
            return acc;
        }, {});

        const FormFreights = {!! $freights !!}.map(freight => {
            let {code, type, name, fee} = freight;
            return {code, type, name, fee};
        });
        const Firms = {!! $firms !!};
        const Roles = {!! old("roles", $roles_json) ?: "{}" !!};
        const FirmId = 1;
        const PromotionCategories = {!! $promotionCategories !!};
        const Promotions = {!! $promotions !!};
        const Mommies = {!! $mommies !!};
        const Products = {!! $products !!};

        let tryOutAt = '{{ $now->copy()->format('Y-m-d 00:00')  }}';
        let publishStartAt = '{{ $now->copy()->addDays(1)->format('Y-m-d 00:00')  }}';
        let publishEndAt = '{{ $now->copy()->addDays(8)->format('Y-m-d 00:00')  }}';
        let freightAt = '{{ $now->copy()->addDays(15)->format('Y-m-d 00:00')  }}';
        let checkAt = '{{ $now->copy()->addDays(22)->format('Y-m-d 00:00')  }}';
    </script>
    <script src="{{ mix('assets/js/admin/activity/form.js')}}"></script>
@endsection