@extends('setting.layouts.layout')
@section('title',trans('phrase_setting.title'))
@section('script_css')
@endsection
@section('script_buttom')
    <script src="/assets/js/admin/index.js"></script>

    <script language="javascript">
        var searhCondition = "&phrase_content={{ $phrase_content }}&phrase_type={{ $phrase_type }}";
        var baseURL = location.protocol + '//' + location.host + location.pathname;
        var lastPage = '{{ $dataList -> lastPage() }}';

        function doAction(type, button)
        {
            switch(type)
            {
                case "toPage":
                    if(parseInt($("#page").val()) > lastPage)
                        $("#page").val(lastPage);

                    window.location = baseURL + "?page=" + $("#page").val() + searhCondition;
                    return;
                case "firstPage":
                    window.location = baseURL + "?page=1" + searhCondition;
                    return;
                case "prePage":
                    if((parseInt($("#page").val()) - 1) < 1)
                        return;

                    window.location = '{{ $dataList -> previousPageUrl() }}' + searhCondition;
                    return;
                case "nextPage":
                    if((parseInt($("#page").val()) + 1) > lastPage)
                        return;

                    window.location = '{{ $dataList -> nextPageUrl() }}' + searhCondition;
                    return;
                case "lastPage":
                    window.location = '{{ $dataList -> url($dataList -> lastPage()) }}' + searhCondition;
                    return;
                case "search":
                    $("#page").val(1);
                    $("#dataForm").attr("action", baseURL);
                    $("#dataForm").attr("target", "");
                    break;
                case "clearSearchCondition":
                    cleanupForm(button);
                    return;
                case "create":
                    $("#dataForm").attr("action", baseURL + "/create");
                    $("#dataForm").attr("target", "_blank");
                    break;
                case "update":
                    $("#dataForm").attr("action", baseURL + "/update");
                    $("#dataForm").attr("target", "_blank");
                    break;
                case "destroy":
                    $("#dataForm").attr("action", baseURL + "/deleteAction");
                    $("#dataForm").attr("target", "");
                    break;
                default:
                    alert("{{ trans('common.parameter_error') }}");
                    return false;
            }

            $("#dataForm").submit();
        }

        function setKey(key) {
            $("#key").attr("value", key);
        }

        $(document).ready(function() {
            $('div[data-action]').on('click', function() {
                doAction($(this).attr('data-action') , this);
            });

            $('a[data-action]').on('click', function() {
                doAction($(this).attr('data-action') , this);
            });

            $('button[data-action]').on('click', function() {
                doAction($(this).attr('data-action') , this);
            });

            $('input[data-action]').on('keyup', function(e) {
                if(e.keyCode == 13)
                    doAction($(this).attr('data-action'), this);
            });

            $('input[data-action]').on('focus', function(e) {
                $(this).select();
            });

            $('#datatable-buttons_wrapper.dataTables_info').hide();
            
            $('select').select2();
        });
    </script>
@endsection
@section('buttons')
@endsection
@section('content')
    @inject('CommonPresenter','App\Presenter\CommonPresenter')
    <form name="dataForm" id="dataForm" method="post" enctype="multipart/form-data">
        @include('components.validationErrorMessage')
        {!! csrf_field() !!}
        <input type="hidden" name="key" id="key">
    <div class='block-r'>
        <div class='centBoxs'>
            <div class='boxsFull'>
                <p class="t-blue-20 p-d-30">{{ trans('phrase_setting.title') }}</p>
                <a class='btn-outline-blue icon-add order-r' data-action="create">&nbsp;{{ trans('phrase_setting.create_phrase') }}</a>
            </div>

            <div class='boxsFull'>
                <p class='t-r-15 text-l p-d-10'>{{ trans('common.key') }}</p>
                <label>
                    <input class='input-f in-w-40' type="" name="phrase_content" value="{{ $phrase_content }}" placeholder="{{ trans('common.search_key') }}">
                </label>
                
                <label>
                    <select class="form-control" name="phrase_type" required>
                        <option value="null">{{ trans('common.unselected') }}</option>
                        @foreach($quotationTypeList as $list)
                            <option value="{{ $list -> system_code_key }}" @if($phrase_type == $list -> system_code_key) selected @endif>{{ $list -> system_code_value }}</option>
                        @endforeach
                    </select>
                </label>
                
                
                <a class='btn-half-blue icon-search' data-action="search">&nbsp;{{ trans('common.search') }}</a>
            </div>

            <!-- 按下搜尋後會出現的元件。開始 -->
            <i class='splitLine_bl'></i>
            <div class='boxsFull'>
                <p class="t-black-20 p-d-30">{{ trans('common.search_result') }}</p>
            </div>
            <!-- 按下搜尋後會出現的元件。結束 -->

            <div class='boxsFull'>
                <div class='table-header'>
                    <p class='table-box10'>片語類別</p>
                    <p class='table-box30'>{{ trans('phrase_setting.phrase_name') }}</p>
                    <p class='table-box50'>{{ trans('phrase_setting.phrase_content') }}</p>
                    <p class='table-box10'>{{ trans('common.action') }}</p>
                </div>
                @foreach($dataList as $list)
                    <div class='table-body'>
                        <p class='table-box10 text'>
                        @foreach($quotationTypeList as $type)
                            @if($list -> phrase_type == $type -> system_code_key) {{  $type -> system_code_value }} @endif
                        @endforeach
                        </p>
                        <p class='table-box30 text'>{!! $CommonPresenter -> getShortenText($list -> phrase_name) !!}</p>
                        <p class='table-box50 text'>{!! $CommonPresenter -> getShortenText($list -> phrase_content) !!}</p>
                        <p class='table-box10'>
                            @if( session('ACTION_UPDATE') == 'ENABLED')
                                <i class="iconLink linkGrey icon-create" onclick="setKey('{{ $list -> phrase_id }}');doAction('update');"></i>
                            @endif
                            @if( session('ACTION_DELETE') == 'ENABLED')
                                    <button type="button" class='iconLink linkGrey icon-trash-2 m-l-10 showModel' onclick="setKey('{{ $list -> phrase_id }}')"; data-id='{{  $list -> phrase_id }}' data-remover="{{ $list -> phrase_name }}"></button>
                            @endif
                        </p>
                    </div>
                @endforeach
                <div class='boxsFull m-td-25'>
                    <div class='numBox'>
                        <p class='t-page'>Page</p>
                        <label>
                            <input class='input-f in-w-10' type="" id="page" data-action="toPage" value="{{ $dataList -> currentPage() }}">
                        </label>
                        <p class='t-page'>of {{ $dataList -> lastPage() }}</p>
                        <div class="numL icon-chevron-down" data-action="prePage"></div>
                        <div class="numR icon-chevron-down" data-action="nextPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
@endsection