@extends('admin.master')

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <form id="EditForm" class="form-horizontal" method="post"
                  action="{{ url('/backend/dataManagement/track/store') }}" enctype="multipart/form-data">
                {{ csrf_field() }}
                <div class="panel _panel-primary">
                    <div class="panel-heading _panel-heading">
                        <h4 class="panel-title m-0">{{ ($operdata == "") ? "新增 " : "修改 " }}議程資料</h4>
                    </div>
                    <div class="panel-body row">
                        <div>
                            <table class="table" style="border-collapse:collapse;">
                                <tbody class="msgTbody">

                                <input type="hidden" id="id" value="{{$id}}"/>
                                
                                <!-- 欄位：議程資料設定 -->
                                <tr class="msgTemplate">
                                    <td class="header-require col-xl-2">議程資料設定</td>
                                    <td>
                                        <div id="imgmapcontent-tab1">
                                            <input type="hidden" id="tab1MenuFlag"/>
                                            <input type="hidden" id="tab1ImagemapModelType" value="m1">
                                            <input type="hidden" id="tab1ImagemapImgSize" value='{"width":800,"height":800}'>
                                            
                                            <!-- 表格本體 -->
                                            <table class="table" id="DetailsView1" style="border-collapse:collapse;">
                                                <tbody>
                                                <!-- 序號 -->
                                                @if ($operdata == "")
                                                    <!-- Insert Mode -->
                                                    <input type="hidden" name="mode" id="mode" value="insert"/>
                                                @else
                                                    <!-- Edit Mode -->
                                                    <input type="hidden" name="mode" id="mode" value="edit"/>
                                                    <tr>
                                                        <td class="col-xl-2">序號</td>
                                                        <td>
                                                            <input name="id" type="hidden" value="{{ $operdata['id'] }}" id="id"/>
                                                            {{ $operdata['id'] }}
                                                        </td>
                                                    </tr>
                                                @endif                                
                                                    <!-- 欄位：標題 -->
                                                    <!-- ALL Mode -->
                                                    <tr>
                                                        <td class="header-require col-xl-2">trackNo</td>
                                                        <td>
                                                            <div class="col-xl-3 nopadding">
                                                                @if ($operdata == "")
                                                                    <input name="trackNo" type="text" value="" maxlength="100"
                                                                        id="trackNo" class="form-control">
                                                                @else
                                                                    <input name="trackNo" type="text"
                                                                        value="{{ $operdata['trackNo'] }}" maxlength="100"
                                                                        id="trackNo" class="form-control">
                                                                @endif
                                                                <label class="error" for="trackNo"></label>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <!-- 欄位：說明 -->
                                                    <!-- ALL Mode -->
                                                    <tr>
                                                        <td class="header-require col-xl-2">trackTitle</td>
                                                        <td>
                                                            <div class="col-xl-3 nopadding">
                                                                @if ($operdata == "")
                                                                    <input name="trackTitle" type="text" value="" maxlength="500"
                                                                        id="trackTitle"
                                                                        class="form-control">
                                                                @else
                                                                    <input name="trackTitle" type="text"
                                                                        value="{{ $operdata['trackTitle'] }}"
                                                                        maxlength="500" id="trackTitle" class="form-control">
                                                                @endif
                                                                <label class="error" for="trackTitle"></label>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <!-- 欄位：說明 -->
                                                    <!-- ALL Mode -->
                                                    <tr>
                                                        <td class="header-require col-xl-2">trackLimit</td>
                                                        <td>
                                                            <div class="col-xl-3 nopadding">
                                                                @if ($operdata == "")
                                                                    <input name="trackLimit" type="text" value="" maxlength="500"
                                                                        id="trackLimit"
                                                                        class="form-control">
                                                                @else
                                                                    <input name="trackLimit" type="text"
                                                                        value="{{ $operdata['trackLimit'] }}"
                                                                        maxlength="500" id="trackLimit" class="form-control">
                                                                @endif
                                                                <label class="error" for="trackLimit"></label>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        
                                            <hr>

                                        </div>
                                    </td>
                                </tr>

                                <!-- 下控制按鈕 -->
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>
                                        <div style="text-align: right">
                                            <input type="button" id="btnSave" value="儲存" class="btn btn-primary" style="margin-right: 5px;">
                                            <input type="button" id="btnBackToList" value="返回" class="btn btn-secondary">
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="ajax-spinner" style="display:none;">
        <img src="{{ asset('assets/images/backend_spinner.svg') }}" />
    </div>

    <link rel="stylesheet" href="{{url('assets/resize-controller/project/resizeControl.css')}}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        /* --------------- 全域 --------------- */

        .msgTemplate div.form-group _form-group {
            margin: 0;
        }

        .tab-content {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        /* --------------- Imagemap --------------- */

        .imagemap-model-small-container {
            display: flex;
            flex-wrap: wrap;
        }

        .imagemap-model-small-container .imagemap-model-small {
            width: 80px;
            height: 55px;
            margin: 10px;
        }

        .imagemap-model-small-container .table {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .imagemap-model-small-container .table td {
            background-color: #cecece;
            color: #ffffff;
            border: 1px solid #858484;
        }

        .imagemap-model-small-container > .imagemap-model-small.active td {
            border-color: #6c62f3;
            border-width: 2px;
        }

        /* --------------- imagemap-model --------------- */

        .imagemap-model {
            width: 240px;
            height: 166px;
        }

        .imagemap-model > table {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .imagemap-model > table > tbody td {
            background-color: #bfbfbf;
            color: #ffffff;
            vertical-align: middle;
        }

        .imagemap-model > table > tbody td.active {
            background-color: #58ae58;
        }

        .imagemap-model > table > tbody td:not(.active):hover {
            background-color: #898989c9;
            cursor: default;
        }

        /* --------------- uri 綁定標籤 ----------------- */

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #5897fb;
            border-radius: 10px;
            color: white;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            border-right: unset;
            color: #fff;
            font-size: 1.2em;
            left: 1px;
            top: 3px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
            background-color: #5897fb;
            color: #fff;
        }

        .select2-selection.select2-selection--multiple {
            min-height: 24px;
        }

        .select2-container--default .select2-search--inline .select2-search__field {
            min-height: 24px;
            font-size: 14px;
        }

        /* --------------- AJAX upload --------------- */

        .image-preview-wrapper{
            position: relative;
            cursor: pointer;
        }
        .spinner-wrapper {
            position: absolute;
            opacity: 0;
            margin: 0;
            padding: 0;
            /*left: 50%;*/
            /*top: 50%;*/
            transform: translate(-50%, -50%);

            width: 100px;
            height: 100px;
            background-image: url(/assets/images/backend_spinner.svg);
            background-size: 50px;
            background-repeat: no-repeat;
            background-position: center;
        }
        .opacity-1 {
            opacity: 1;
        }
    </style>
@endsection

@section('extjs')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{url('assets/js/jquery.mousewheel-3.0.6.min.js')}}"></script>
    <script src="{{url('assets/js/jquery.mCustomScrollbar.min.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
    <script src="{{url('assets/resize-controller/project/index.js')}}"></script>
    <script>
        var imagemapBoxes = {};

        $(document).ready(function () {
            // 下控制按鈕 儲存
            $("#btnSave").click(function () {
                
                finishEdit();
            });

            // 下控制按鈕 返回
            $("#btnBackToList").click(function () {
                location.href = '/backend/dataManagement/track';
            });

        });

        // 完成編輯
        function finishEdit() {

            $.blockUI({
                message: $('#ajax-spinner'),
                css: {
                    backgroundColor: 'transparent',
                    border: '0'
                },
            });

            $.ajax({
                type: "POST",
                url: '/backend/dataManagement/track/store',
                data: {
                    "operateMode": $("#mode").val(),
                    "trackNo": $("#trackNo").val(),
                    "trackTitle": $("#trackTitle").val(),
                    "trackLimit": $("#trackLimit").val(),
                    "_token":"{{ csrf_token() }}",

                    "id": $("#id").val(),
                },
                success: function(result) {
                    
                    if (result.code === 0) {
                        alert('儲存成功');
                        location.href = '/backend/dataManagement/track';
                    } else {
                        alert(result.message);
                    }
                },
                fail: function(jqXHR, textStatus) {
                    console.log(jqXHR);
                    console.log(textStatus);
                },
                complete: function() {
                    $.unblockUI();
                }
            });
        }

    </script>
@endsection