@inject('sentinel', 'Cartalyst\Sentinel\Native\Facades\Sentinel')
<style type="text/css">
    .bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{
        color:white;
    }
</style>

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-red-sunglo">
            <button type="button" class="close" data-dismiss="modal"></button>
            <h4 class="modal-title font-white"><i class="fa fa-calendar-check-o"></i> 請選擇以下資料</h4>
        </div>
        <div class="modal-body">
            <table>
                <tr>    
                    <td style="vertical-align:text-top;">
                        <label style="font-weight:bold">&nbsp;&nbsp;扣點類型 </label>
                        <input id="text_cost_type" type="text" readonly style="margin-left:20px;font-size:8px;color:red;border: 0px solid;" value="(尚未選擇扣點方式)">
                        <div style="margin-top:30px;">
                            @if( ($inst->point_type == "free" || $inst->point_type == "any") && $card_type != 'mooncard')
                            <button class="btn blue" onclick="btn_cost_type(1)" style="width:60px;height:25px;padding:0px 0px 0px 0px;">贈點點數</button>
                            @else
                            <label class="label label-sm label-default">贈點點數</label>
                            @endif <label class="label label-sm label-success" style="margin-left:10px;width:70px;">&nbsp;{{$point_free}}&nbsp;</label><br>
                        </div>
                        <div style="margin-top:10px;">
                            @if( ($inst->point_type == "buy" || $inst->point_type == "any") && $card_type != 'mooncard')
                            <button class="btn blue" onclick="btn_cost_type(2)" style="width:60px;height:25px;padding:0px 0px 0px 0px;">購點點數</button>
                            @else
                            <label class="label label-sm label-default">購點點數</label>
                            @endif <label class="label label-sm label-success btn_cost_type" style="margin-left:10px;width:70px;">&nbsp;{{$point_buy}}&nbsp;</label>
                        </div>
                        <div style="margin-top:10px;">
                            @if( $inst->point_type == "any" && $card_type != 'mooncard')
                            <button class="btn blue" onclick="btn_cost_type(3)" style="width:60px;height:25px;padding:0px 0px 0px 0px;">不限制</button>
                            @else
                            <label class="label label-sm label-default">不限制</label>
                            @endif
                        </div>
                        <div style="margin-top:10px;">
                            @if( $card_type == 'mooncard')
                            <button class="btn blue" onclick="btn_cost_type(4)" style="width:60px;height:25px;padding:0px 0px 0px 0px;">月卡消費</button>
                            @else
                            <label class="label label-sm label-default">月卡消費</label>
                            @endif
                        </div>
                    </td>
                    <td>
                        <label style="font-weight:bold">&nbsp;&nbsp;&nbsp;預約人數</label><input id="text_select_people" type="text" readonly style="margin-left:20px;font-size:8px;color:red;border: 0px solid;width:180px;" value="(尚未選擇預約人數)"><br>
                        @if( $card_type == 'mooncard')
                            <button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=1>1</button>
                            <script>document.getElementById("text_select_people").value="選擇的人數為:1";</script>
                            <script>document.getElementById("reservation_person").value="1";</script>
                        @else
                        <button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=1>1</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=2>2</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=3>3</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=4>4</button><br><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=5>5</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=6>6</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=7>7</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=8>8</button><br><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=9>9</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=10>10</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=11>11</button><button class='btn blue btn_person' style='font-size:10px;width:62px;height:25px;margin:4px;padding:0px 0px 0px 0px;' value=12>12</button><br>                        @endif
                    </td>
                    
                </tr>
            </table>

            <input type="hidden" id="point_type" value="{{$inst->point_type}}">
            <input type="hidden" id="cost_type">
            <input type="hidden" id="username" value="0">
            <input type="hidden" id="user" value="{{$user}}">
            <input type="hidden" id="reservation_date">
            <input type="hidden" id="reservation_section">
            <input type="hidden" id="reservation_person">
            <input type="hidden" id="inst_uid" value="{{$inst_uid}}">
            <input type="hidden" id="inst_type" value="{{$inst_type}}">
            <input type="hidden" id="card_token" value={{csrf_token()}}>
        </div>
        <div class="modal-footer">
            <button id="btn_inst_submit_new" type="button" class="btn default" style="margin-right:32%;width:180px;background:#00AA55;color:white;">下一步</button>
            <button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
    });
</script>
<script type="text/javascript">
    var btn_cost_type = function($i){
        $p_t = $('#point_type').val();
        $txt = "";
        $txt2 = "";
        if($i == 1 && ($p_t == "buy" || $p_t == "any")){
            $('#cost_type').val("free");
            $('#text_cost_type').val("選擇的扣點為:贈點點數");
        }else if($i == 2 && ($p_t == "buy" || $p_t == "any")){
            $('#cost_type').val("buy");
            $('#text_cost_type').val("選擇的扣點為:購點點數");
        }else if($i == 3 && $p_t == "any"){
            $('#cost_type').val("any");
            $('#text_cost_type').val("選擇的扣點為:不限制");
        }else if($i == 4){
            $('#cost_type').val("monthcard-any");
            $('#text_cost_type').val("選擇的扣點為:月卡消費");
        }else{
            $('#cost_type').val('');
            $('#text_cost_type').val("(尚未選擇扣點方式)");
            toastr['error']('此公設不支援您選擇的扣點方式。');
        }
    }
    $('#item_selectpicker').change(function(){
        var multipleValues = $("#item_selectpicker").val() || [];
        $('input[id="username"]').val( multipleValues.join( "," ) );
    });
    $('#item_pawns').change(function(){
        var pawns_value = $("#item_pawns").val();
        $('input[id="pawnname"]').val(pawns_value);
    });

    $(document).on('click','.keyboard-num-inst',function(){
        var $this = $(this),
            character = $this.attr('num');
        $('#other_cash').val($('#other_cash').val() + character);
        var $cash = $('#person_num').val() * $('#other_cash').val();
        $('#input_other_cash').val($cash);
    });
    $(document).on('click','.btn_person',function(){
        var person = document.getElementById("reservation_person");
        var select_people = document.getElementById("text_select_people");
        person.value = $(this).attr('value');
        if($(this).attr('value') != 999){
            select_people.value = "選擇的人數為:" + $(this).attr('value');    
        }else{
            select_people.value = "選擇的是:包廂";
        }
    });

    $(document).on('click','#btn_backspace',function(){
        var str = $("#other_cash").val();
        var position = document.getElementById('other_cash').selectionStart-1;

        str = str.substr(0, position) + '' + str.substr(position + 1);
        $("#other_cash").val(str);
        var $cash = $('#person_num').val() * $('#other_cash').val();
        $('#input_other_cash').val($cash);
    });
    $('#btn_inst_submit_new').click(function(){
        document.getElementById('btn_inst_submit_new').disabled='disabled';
        $('#btn_inst_submit_new').attr('visibility','hidden');
        var inst_input_error = false;
        var box_person = ($('#reservation_person').val()>0)?"0":"1";
        if($('#cost_type').val() == ""){
            toastr['error']('扣點類型尚未選擇');
            document.getElementById('btn_inst_submit_new').disabled='';
            inst_input_error = true;
        }
        if($('#reservation_person').val() == ""){
            toastr['error']('預約人數尚未選擇');
            input_error = true;
        }
        if(!inst_input_error){
            $.ajax({
                type : 'POST',
                url : '{{route("console::inst_submit_new")}}',
                data : {
                    inst_id : $('#inst_uid').val(),
                    user_id : $('#user').val(),
                    // date : $('#reservation_date').val(),
                    // time_section : $('#reservation_section').val(),
                    is_box : box_person,
                    person : $('#reservation_person').val(),
                    point_type : $('#cost_type').val(),
                    input_other_cash : $('#input_other_cash').val(),
                    platform : 'console',
                    undertake : '{{ $sentinel::check()->id }}',
                    desc : ""
                },
                success : function(sendback){
                    toastr['success'](sendback);
                    $('#modal_function_inst_checkout').modal('hide');
                },
                error : function(sendback){
                    document.getElementById('btn_inst_submit_new').disabled='';
                    toastr['error']('連線異常，請重新整理後再嘗試。');
                }
            });
        }else{
            document.getElementById('btn_inst_submit_new').disabled='';
            toastr['error']('以下欄位請務必選擇');
        }
    });
</script>