@extends('layouts.base')
@section('title', '创建活动')
@section('content')
    <style>
        .rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
        .rightlist #app{margin-left:30px;}
        .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
        .el-form-item__label{padding-right:30px;}
        .el-button{margin-right:30px;}
        .attribute-label{display:inline-block;padding:20px 20px 20px 7%;}
        /* .el-textarea__inner{height:400px;margin:30px 5%;width:80%;} */
        /* 上传图片 */
        .avatar-uploader .el-upload {margin-top:15px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
        .avatar-uploader .el-upload:hover {border-color: #409EFF;}
        .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
        .avatar {width: 178px;height: 178px;display: block;}
        .el-upload-tip{width:178px;margin:0;padding:0;color:#999;text-align:center;}
        input[type=file] {display: none;}
        .avatar-uploader-box{position:relative;width:200px;}
        .el-icon-circle-close{position:absolute;top:10px;right:0;color:#999;}
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
        .tip{color:#999;font-size:12px;}

        .add-tip{font-size:14px;font-weight:600;}
        .add-tip span{margin:0 15px;cursor:pointer;color:#409EFF}
        .upload-box:hover {
            border-color: #29ba9c;
            color: #29ba9c;
        }
        .upload-box {
            width: 150px;
            height: 150px;
            display: flex;
            cursor: pointer;
            border: 1px dashed #dde2ee;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            flex-direction: column;
        }
        .upload-boxed {
            width: 150px;
            height: 150px;
            position: relative;
            border-radius: 5px;
        }
        .upload-boxed-text {
            position: absolute;
            bottom: 0;
            line-height: 32px;
            color: #fff;
            text-align: center;
            width: 100%;
            background: #000;
            opacity: 0.7;
            border-radius: 0px 0px 5px 5px;
        }
        .upload-boxed-list {
            display: flex;
            position: relative;
            border-radius: 5px;
            flex-wrap: wrap;
        }
        .upload-boxed-list-a {
            width:150px;
            height:150px;
            margin:0 10px 5px 0;
            position: relative;


        }
        .upload-boxed-list-a .el-icon-close {
            position: absolute;
            top: -5px;
            right: -5px;
            color: #fff;
            background: #333;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>

    <div id="app-add">
        <template>
            <el-form ref="form" :model="form" :rules="rules" v-loading="loading" label-width="15%">
                <el-tabs type="card" v-model="activeName" style="padding: 20px">
                    <el-tab-pane label="基础设置" name="base_set">@include('Yunshop\ShareActivity::base-set')</el-tab-pane>
                    <el-tab-pane label="活动信息" name="activity_info">@include('Yunshop\ShareActivity::activity-info')</el-tab-pane>
                    <el-tab-pane label="分享设置" name="share_set">@include('Yunshop\ShareActivity::share-set')</el-tab-pane>
                </el-tabs>

                <el-form-item>
                    <a href="#">
                        <el-button type="success" @click="submitForm('form')">提交</el-button>
                    </a>
                    <a href="#">
                        <el-button @click="goBack()">返回列表</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </template>
        <!--弹框上传图片-->
        <el-dialog :visible.sync="centerDialogVisible" width="65%" center>
            <el-tabs v-model="activeName2" type="card">
                <el-tab-pane label="上传图片" name="first">
                <div
                    style="text-align: center"
                    class="submit_Img"
                    v-loading="submit_loading"
                >
                    <el-upload
                    class="avatar-uploader"
                    action="{{ yzWebFullUrl('plugin.share-store-activity.admin.activity.upload') }}"
                    accept="image/*"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                    :before-upload="beforeUpload"
                    >
                    <div class="avatar_box" v-if="uploadImg">
                        <img :src="uploadImg" class="avatar" />
                    </div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                </el-tab-pane>
                <el-tab-pane label="提取网络图片" name="second">
                <el-input
                    v-model="uploadImg"
                    placeholder="请输入网络图片地址"
                    style="width:90%"
                ></el-input>
                <!-- <el-button @click="transform(uploadImg)" v-loading="submit_loading">转换</el-button> -->
                </el-tab-pane>
                <el-tab-pane label="浏览图片" name="third">
                <div>
                    <el-radio-group v-model="radio1" size="medium" @change="chooseYear">
                    <el-radio-button label="不限"></el-radio-button>
                    <el-radio-button label="2019">2019年</el-radio-button>
                    <el-radio-button label="2018">2018年</el-radio-button>
                    <el-radio-button label="2017">2017年</el-radio-button>
                    <el-radio-button label="2016">2016年</el-radio-button>
                    </el-radio-group>
                </div>

                <div style="margin-top: 10px;">
                    <el-radio-group v-model="radio2" size="small" @change="chooseMonth">
                    <el-radio-button label="不限"></el-radio-button>
                    <el-radio-button label="1">1月</el-radio-button>
                    <el-radio-button label="2">2月</el-radio-button>
                    <el-radio-button label="3">3月</el-radio-button>
                    <el-radio-button label="4">4月</el-radio-button>
                    <el-radio-button label="5">5月</el-radio-button>
                    <el-radio-button label="6">6月</el-radio-button>
                    <el-radio-button label="7">7月</el-radio-button>
                    <el-radio-button label="8">8月</el-radio-button>
                    <el-radio-button label="9">9月</el-radio-button>
                    <el-radio-button label="10">10月</el-radio-button>
                    <el-radio-button label="11">11月</el-radio-button>
                    <el-radio-button label="12">12月</el-radio-button>
                    </el-radio-group>
                </div>

                <div id="upload-img" class="imgList" v-loading="submit_loading">
                    <div class="avatar-uploader-box" v-for="img in ImgList">
                    <img
                        @click="chooseTheImg(img.thumb_url)"
                        :src="img.thumb_url"
                        class="avatar"
                    />
                    <i
                        class="el-icon-circle-close"
                        @click="deleteImg(img.id)"
                        title="点击清除图片"
                    ></i>
                    </div>
                </div>

                <el-pagination
                    style="margin-top: 10px;text-align: right"
                    background
                    @current-change="currentChange"
                    :page-size="pageSize"
                    :current-page.sync="current_page"
                    :total="total"
                    layout="prev, pager, next"
                >
                </el-pagination>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureImg">确 定 </el-button>
            </span>
        </el-dialog>
        <!--end-->
        <!--弹框选择图片-->
        <el-dialog :visible.sync="goods_show" width="60%" center  title="选择商品">
            <div>
                <div>
                    <el-form :inline="true" :model="search_goods" class="demo-form-inline">
                        <el-form-item label="">
                            <el-input v-model="search_goods.goods_id"  placeholder="商品ID"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="search_goods.goods_name" placeholder="商品标题"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                        <el-button type="primary" @click="searchGoods(1)">搜索</el-button>
                        </el-form-item>
                    </el-form>
                    
                </div>
                <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto" id="goods-list">
                    <el-table-column label="ID" prop="id" align="center" width="150px">
                        <template slot-scope="scope">
                            <el-radio v-model="choosed_goods_id" :label="scope.row.id">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品ID" prop="id" align="center" width="150px"></el-table-column>
                    <el-table-column label="商品">
                        <template slot-scope="scope">
                            <div style="display:flex;align-items: center">
                                <div style="margin-right:10px">
                                    <el-image :src="scope.row.thumb" style="width:50px;height:50px"></el-image>
                                </div>
                                <div style="flex:1">
                                    <div style="color:#333;font-weight:500">[[scope.row.title]]</div>
                                    <div>
                                        <span style="color:red">￥[[scope.row.price]]</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="text-decoration:line-through;color:#888">￥[[scope.row.price]]</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    
                </el-table>
                <!-- 分页 -->
                <div v-show="goods_total>1">
                    <el-row>
                        <el-col align="right">
                            <el-pagination layout="prev, pager, next,jumper" @current-change="searchGoods" :total="total"
                                :page-size="goods_per_size" :current-page="goods_current_page" background
                                v-loading="loading"></el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="goods_show = false">取 消</el-button>
                <el-button type="primary" @click="sureGoods">确 定 </el-button>
            </span>
        </el-dialog>
        <!--end-->
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script> 
    <script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script>
    <script>
        var app = new Vue({
            el: '#app-add',
            delimiters: ['[[', ']]'],
            data() {
                let set = {!! $set ?: '{}' !!};
                let isDiyForm = {!! $isDiyForm ?: '{}' !!};
                let activity_id = {!! $id ?: '{}' !!};
                console.log(set);
                if(set.countdown_time) {
                    set.countdown_time[0] = set.countdown_time[0]*1000;
                    set.countdown_time[1] = set.countdown_time[1]*1000;
                }
                console.log(set.countdown_time);
                let obj = {};
                if(set.goods_id) {
                    obj.id = set.goods_id;
                }
                if(set.goods_title) {
                    obj.title = set.goods_title;
                }
                if(set.goods_thumb) {
                    obj.thumb = set.goods_thumb;
                }
                return {
                    //是否显示弹框
                    centerDialogVisible: false,
                    content:'',
                    ImgList: [],
                    activeName2: "first",
                    uploadImg: "",
                    chooseImg: "",
                    uploadImg1:"",//富文本框上传图片
                    radio1: "不限", //年
                    radio2: "不限", //月
                    loading : false,
                    pageSize: 0,
                    current_page: 0,
                    total: 0,
                    submit_loading:"",
                    form : {
                        'name' : '',
                        'color' : '#409EFF',
                        'status' : 0,
                        'is_background' : 1,
                        'button' : 0,
                        'audio_link' : '',
                        'service_qr' : '', // 客服二维码
                        'service_mobile' : '', // 客服电话
                        'order_list' : '', // 购买列表
                        'award_list' : '', // 奖励列表
                        'countdown_time' : [new Date().getTime(), new Date().getTime() + 7 * 24 * 3600 * 1000],
                        'thumb_url' : '',
                        'background_thumb' : '',
                        'background_thumb_url' : '',
                        'share_title' : '',
                        'share_content' : '',
                        'share_thumb' : '',
                        'agreement' : '',
                        'poster_open' : 0,
                        'poster_type' : '1',
                        'poster' : 0,
                        ...set
                    },
                    goods : [],
                    isDiyForm : isDiyForm,
                    diyform : [],
                    diyform_info : set.diyform_id ? '[DiyID:' + set.diyform_id + '][名称:' + set.diyform_title + ']' : '',
                    good : set.goods_id ? '[GID:' + set.goods_id + '][商品名称:' + set.goods_title + ']' : '',
                    imageUrl : set.goods_thumb ? set.goods_thumb : '{}',
                    id : activity_id,
                    activeName : 'base_set',

                    goods_show:false,
                    goods_list:[],
                    search_goods:{},
                    choosed_goods:obj,
                    choosed_goods_id:'',
                    goods_total:1,
                    goods_current_page:1,
                    goods_per_size:1,
                    poster_title:set.new_poster ? set.new_poster.title : '请选择',
                    activityPostersList:[],//拓客活动海报


                    rules: {
                        name: [
                            { required: true, message: '请输入活动名称', trigger: 'blur' },
                        ],
                    },
                }
            },
            mounted: function () {
                window.addEventListener('beforeunload', e => {
                    window.onbeforeunload =null
                });
            },
            created(){
                this.currentChange(1);
                this.activityPosters();
            },
            methods:{
                addContent(name,index) {
                    console.log(this.$refs[name]);
                    let ref = this.$refs[name];
                    let words = "";
                    words ="(" + '会员昵称' + ")";
                    console.log(words)
                    this.insertInputTxt(name,words)
                },

                insertInputTxt(ref,words) {
                    let name = "";
                    name = this.$refs[ref].$refs.textarea;
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    this.form[ref] = name.value;
                },
                loadGoods(query) {
                    console.log(query)
                    if (query !== '') {
                        this.loading = true;
                        this.$http.get("{!! yzWebUrl('plugin.share-store-activity.admin.activity.get-goods', ['keyword' => '']) !!}" + query).then(response => {
                            this.goods = response.data.data,
                            this.loading = false;
                    }, response => {
                            console.log(response);
                        });
                    } else {
                        this.goods = [];
                    }
                },
                loadDiyform(query) {
                    console.log(query)
                    if (query !== '') {
                        this.loading = true;
                        this.$http.get("{!! yzWebUrl('plugin.share-store-activity.admin.diy-form.getListByTitle', ['keyword' => '']) !!}" + query).then(response => {
                            console.log(response.data.data);
                            this.diyform = response.data.data,
                                this.loading = false;
                        }, response => {
                            console.log(response);
                        });
                    } else {
                        this.diyform = [];
                    }
                },
                chooseTheImg(img) {
                    this.form[this.chooseImg] = img;
                    this.centerDialogVisible = false;
                },
                chooseYear(year) {
                    this.currentChange(1);
                },
                chooseMonth(month) {
                    this.currentChange(1);
                },
                openUpload(str) {
                    this.chooseImg = str;
                    console.log(this.chooseImg)
                    this.uploadImg = "";
                    this.centerDialogVisible = true;
                },
                sureImg() {
                    this.form[this.chooseImg] = this.uploadImg;
                    this.centerDialogVisible = false;
                },
                uploadSuccess(res, file) {
                    if (res.result === 1) {
                        this.uploadImg = res.data.thumb_url;
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                // 富文本上传图片
                uploadSuccess1(res, file) {
                    if (res.result === 1) {
                        this.uploadImg1 = '';
                        this.uploadImg1 = res.data.thumb_url;
                        this.$message.success("上传成功！");
                        // this.insert();
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                beforeUpload(file) {
                    this.submit_loading = true;
                    const isLt2M = file.size / 1024 / 1024 < 4;
                    if (!isLt2M) {
                        this.$message.error("上传图片大小不能超过 4MB!");
                        this.submit_loading = false;
                    }
                    return isLt2M;
                },
                clearImg(str) {
                    this.form[str] = "";
                },
                deleteImg(id) {
                    this.submit_loading = true;
                    this.$http
                        .post("{!! yzWebFullUrl('plugin.share-store-activity.admin.activity.delLocalImg') !!}", { id: id })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.$message.success("系统删除成功");
                            this.currentChange(1);
                            this.submit_loading = false;
                        } else {
                            this.$message.error("删除出错");
                            this.submit_loading = false;
                        }
                        })
                        .catch(err => {
                        console.error(err);
                        this.submit_loading = false;
                        });
                },
                
                currentChange(val) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.share-store-activity.admin.activity.getLocalList') !!}",{ page: val, year: this.radio1, month: this.radio2 })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.total = response.data.data.list.total;
                            this.ImgList = response.data.data.list.data;
                            this.current_page = response.data.data.list.current_page;
                            this.pageSize = response.data.data.list.per_page;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                        this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },
                // 转化网络地址
                transform(url) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.share-store-activity.admin.activity.fetch') !!}",{ url:url })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.$message.success("转化成功！");
                            this.uploadImg = response.data.thumb_url
                        } else {
                            this.$message.error(response.data.msg);
                            this.uploadImg = "";
                        }
                        this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },

                // 添加关键词
                addContent(name,index) {
                    console.log(this.$refs[name]);
                    let ref = this.$refs[name];
                    let words = "";
                    words ="(" + '会员昵称' + ")";
                    console.log(words)
                    this.insertInputTxt(name,words)
                },

                insertInputTxt(ref,words) {
                    let name = "";
                    name = this.$refs[ref].$refs.textarea;
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    this.form[ref] = name.value;
                },

                // beforeUpload(file) {
                //     this.loading = true;
                //     const isLt2M = file.size / 1024 / 1024 < 2;
                //     if (!isLt2M) {
                //         this.$message.error('上传图片大小不能超过 2MB!');
                //         this.loading = false;
                //     }
                //     return isLt2M;
                // },
                // uploadMainSuccess (res, file){
                //     if (res.result == 1) {
                //         this.form.thumb = res.data.thumb;
                //         this.form.thumb_url = res.data.thumb_url;
                //         this.$message.success("上传成功！");
                //     } else {
                //         this.$message.error(res.msg);
                //     }
                //     this.loading = false;
                // },
                // uploadMainSuccess2 (res, file){
                //     if (res.result == 1) {
                //         this.form.background_thumb = res.data.thumb;
                //         this.form.background_thumb_url = res.data.thumb_url;
                //         this.$message.success("上传成功！");
                //     } else {
                //         this.$message.error(res.msg);
                //     }
                //     this.loading = false;
                // },
                // clearImg () {
                //     this.form.thumb = "";
                //     this.form.thumb_url = "";
                // },
                // clearImg2 () {
                //     this.form.background_thumb = "";
                //     this.form.background_thumb_url = "";
                // },
                openGoods() {
                    this.goods_show = true;
                    this.choosed_goods_id = this.form.goods_id;
                },
                changeGoods(val,val1) {
                    console.log(val,val1)
                },
                searchGoods(val) {
                    let loading = this.$loading({target:document.querySelector("#goods-list"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebUrl('plugin.share-store-activity.admin.activity.get-goods') !!}",{page:val,keyword:this.search_goods.goods_name,goods_id:this.search_goods.goods_id}).then(response => {
                        if(response.data.result == 1) {
                            this.goods_list = response.data.data.data,
                            this.goods_list.forEach((item,index) => {
                                item.title = this.escapeHTML(item.title)
                            });
                            this.goods_total = response.data.data.total;
                            this.goods_current_page = response.data.data.current_page;
                            this.goods_per_size = response.data.data.per_page;
                            this.loading = false;
                        }
                        else {
                            this.$message.error(response.data.msg)
                        }
                        
                        loading.close();
                    }, response => {
                        console.log(response);
                        loading.close();
                    });
                },
                sureGoods() {
                    this.form.goods_id = this.choosed_goods_id;
                    this.choosed_goods = {};
                    let obj = this.goods_list.find((item,index) => {
                        return item.id == this.choosed_goods_id;
                    })
                    this.choosed_goods = obj;
                    console.log(this.choosed_goods);
                    this.goods_show = false;
                },
                clearImg(name) {
                    this.form[name] = "";
                    this.choosed_goods = {};
                    this.choosed_goods_id = "";
                    this.$forceUpdate();
                },
                activityPosters(e){
                    //let loading = this.loading("加载拓客活动海报中...");
                    this.$http.post("{!! yzWebFullUrl('plugin.share-store-activity.admin.activity.getActivityPosters') !!}").then(({data:{result,data,msg}})=>{
                        // loading.close();
                        if(result == 1){
                            this.activityPostersList = data;
                        }else this.$message.error(msg);
                    });
                },
                changePosters(e){
                    this.form.background_url = e.background_url
                    this.form.poster_id = e.id
                    this.poster_title = e.title
                    this.form.new_poster = ''
                },
                goBack() {
                    history.back(-1);
                },
                submitForm(form) {
                        if(this.form.countdown_time){
                            this.form.countdown_time[0] = Math.round(this.form.countdown_time[0]/1000).valueOf();
                            this.form.countdown_time[1] = Math.round(this.form.countdown_time[1]/1000).valueOf();
                        }
                        else{
                            this.form.countdown_time = [];
                            this.form.countdown_time.push(new Date().getTime()/1000,(new Date().getTime() + 7 * 24 * 3600 * 1000)/1000)
                        }
                        delete(this.form.goods)
                        delete(this.form.browse_count)
                        delete(this.form.end_time)
                        delete(this.form.diy_form)
                        delete(this.form.browse)
                        delete(this.form.diyform_title)
                        delete(this.form.goods_thumb)
                        delete(this.form.goods_title)
                        delete(this.form.created_at)
                        delete(this.form.updated_at)
                        delete(this.form.has_one_good)
                        console.log(this.form);
                        this.$refs[form].validate((valid) => {
                            if (valid) {
                                this.loading = true;
                                this.$http.post("{!! yzWebFullUrl('plugin.share-store-activity.admin.activity.add') !!}",{'form':this.form, 'id':this.id}).then(response => {
                                    if (response.data.result) {
                                    this.$message({message: "操作成功",type: 'success'});
                                    window.location.href='{!! yzWebFullUrl('plugin.share-store-activity.admin.activity.index') !!}';
                                }
                            else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.loading = false;
                                }
                            },response => {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.loading = false;
                                });
                            } else {
                                console.log('error submit!!');
                        return false;
                    }
                    });
                },
                // 字符转义
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");;
                },
            },
        });
    </script>
    <style>
        /*弹窗上传图片*/
        #upload-img .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }

        #upload-img .avatar-uploader-box {
            position: relative;
            margin: 20px 0 0 10px;
            width: 110px;
        }

        #upload-img .el-icon-circle-close {
            position: absolute;
            top: -7px;
            right: 1px;
            color: #999;
        }

        .imgList {
            display: flex;
            flex-wrap: wrap;
            margin: 10px auto;
        }
    </style>
@endsection