@extends('layout.basic.main')
@section('title', '送信予約')
@push('js')
    <script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
    <link rel="stylesheet" href="/css/send_all.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">
    <link rel="stylesheet" href="/css/msg_template/add_group.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/chat/schedule_send.css?v={{config("sns-line.version")}}">
    <style lang="css">


    </style>
@endpush
@section('content')
    <article class="">
        <div class="mt-5" id="schedule-send" v-cloak>
            <div class="flex items-center">
                <div class="text-[20px] font-semibold text-[#222222]">送信予約</div>
                <div class="text-[14px] text-[#888888] font-light ml-[19px]">
                    <a class="underline  font-light text-[14px]" href="/basic/chat-v3">1:1チャット</a> / <a class="text-[14px]  font-light">送信予約</a>
                </div>
            </div>
            <div class="border-line mt-[12px] mb-[15px]"></div>
            <div class="text-[14px] text-[#222222] font-semibold">
                送信日時
            </div>
            <div class="d-flex align-items-center mt-[10px] box-setting-time">
                <div class="w-input-date"
                     style="position: relative; display: inline-block; width: 200px; margin-right: 10px">
                    <input type="date"
                           v-model="date_send"
                           min="{{ now()->toDateString() }}"
                           id="input-send-day"
                           class="form-control datepicker showpicker text-center input-border input-date-hide"
                    >
                    <i class="far fa-calendar showpicker icon-datetime"></i>
                    <span class="text-danger" style="display: none;"></span>
                    <span class="view_date" id="showpicker-hide">@{{ formatDateFlDay(date_send) }}</span>
                </div>
                <div class="w-input-time"
                     style="position: relative; display: inline-block; width: 120px;">
                    <input type="text" v-model="time_send"
                           class=" text-[#222222] form-control timepicker input-border text-center text-[14px] ">
                    <i class="fal fa-clock icon-datetime"></i>
                </div>
            </div>
            <div class="text-[14px] text-[#222222] font-semibold mt-[40px]">
                メッセージ登録
            </div>
            <div class="flex items-center justify-between mt-[13px] mb-[15px]">
                <div>
                    <button @click="addTemplate"
                            class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_action_add_mess">
                        <i class="fal fa-plus text-[18px] mr-[7px]"></i>メッセージ追加
                    </button>
                    <button
                            @click="showModalConfirmAddTemplate"
                            class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_add_from_temp ">
                        <i class="fal fa-plus  text-[18px]  mr-[7px]"></i>テンプレートから追加
                    </button>
                </div>
                <div>
                    <button type="button"  @click="viewTemplateDetailPreviewAll"
                            :disabled="(items.length == 0) ? true : false"
                            class="btn btn-sns-line btn-sns-line-outline-default btn_combine">
                        プレビュー・テスト
                    </button>
                    <button type="button"
                            :disabled="(items.length == 0) ? true : false"
                            v-on:click="openModalChildSort()"
                            class="btn btn-sns-line btn-sns-line-outline-default btn_sort">
                        並べ替え
                    </button>
                    <button type="button"
                            :disabled="(items.length == 0) ? true : false"
                            v-on:click="openDelayMessage()"
                            :class="{'on': is_delay_message}"
                            class="btn btn-sns-line btn-sns-line-outline-default btn_option_send !font-medium">
                        送信オプション
                    </button>
                    <button type="button" :disabled="(selected.length == 0) ? true : false"
                            :class=" selected.length > 0 ? '!text-[#FFFFFF] bg-[#F44336]' : ''"
                            @click="deleteTemplateSelect(selected)"
                            class="btn btn-sns-line btn-sns-line-outline-default btn_delete_many">
                        一括削除
                    </button>
                </div>

            </div>
            <table class="table tbl_setting_action ">
                <tbody>
                <tr>
                    <th style="width: 3%;">
                        <label class="c-checkbox"><input type="checkbox" name="" v-model="selectAll" value="">
                            <span class="checkmark"></span>
                        </label>
                    </th>
                    <th class="text-center" style="width: 20%; font-size: 16px !important; font-weight: 500;">タイプ</th>
                    <th class="text-center" style="width: 60%; font-size: 16px !important; font-weight: 500;">内容</th>
                    <th style="width: 22%; padding-left: 25px; font-size: 16px !important; font-weight: 500; border-left: 1px solid rgb(221, 221, 221);">
                        操作
                    </th>
                </tr>
                </tbody>
                <tbody style="border-top: none;">
                <tr v-for="(item, index) in items">
                    <td>
                        <label class="c-checkbox">
                            <input type="checkbox" name="" :value="item.id" v-model="selected" >
                            <span class="checkmark"></span>
                        </label>
                    </td>
                    <td class="!text-[16px]">
                        @{{ getTextJP(item.type) }}
                    </td>
                    <td class="message !font-medium !text-[16px]" v-if="item.type == 'text'">
                        <div style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis; font-size: 16px; color: #2B2F36; font-weight: 500;">
                         @{{item.content|shortContent}}
                        </div>
                    </td>
                    <td class="message " v-if="item.type == 'image'" >
                        <div class="media">
                            <div class="media-right" @click="showModalPreviewTemplateChild(item.id)">
                                <img style="font-weight: 500; font-size: 16px;"
                                     :src="
                                                    item.content && item.content.startsWith('http') ? item.content : ( item.image_server ? item.image_server : '