@extends('frontend.layouts.contentLayoutMaster')

@section('title', '變更密碼')
@section('active', 'change_password')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
@endsection

@section('page-styles')
<style>
    #sms-tab{
        float: right;
    }
    #password-tab{
        float: right;
    }
</style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-12 col-12">
            <form class="form form-horizontal" action="{{ Route('frontend.change_password.check', $user->id) }}" method="POST" id="main_form">
                @csrf
                @method('PATCH')
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body pb-0">
                            {{-- <ul class="nav nav-tabs justify-content-center" role="tablist">
                                <li class="nav-item">
                                    <a aria-controls="password" aria-selected="true" class="nav-link active" data-toggle="tab" href="#password_tab" id="password-tab" role="tab">
                                        <i class="bx bx-key align-middle"></i> 
                                        <span class="align-middle">舊密碼</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a aria-controls="sms" aria-selected="true" class="nav-link " data-toggle="tab" href="#sms_tab" id="sms-tab" role="tab">
                                        <i class='bx bx-message-dots' ></i>
                                        <span class="align-middle">簡訊驗證</span>
                                    </a>
                                </li>
                            </ul> --}}
                            <div class="tab-content">
                                <div aria-labelledby="password-tab" class="tab-pane active" id="password_tab" role="tabpanel">
                                    <div class="form-body">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <label>請輸入舊密碼</label>
                                            </div>
                                            <div class="col-md-10 form-group">
                                                <fieldset>
                                                    <div class="input-group toggle-password-show-input">
                                                        <input class="form-control target-input" id="password" name="password" placeholder="舊密碼" type="password" value="{{ old('password') }}">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text icon">
                                                                <i class='bx bx-show'></i>
                                                            </span>
                                                        </div>
                                                    </div>  
                                                </fieldset>
                                                @if ($errors->has('password')) 
                                                    @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('password') ]) 
                                                @endif
                                            </div>
                                            
                                            <div class="col-md-10 offset-md-2 col-xs-12">
                                                <button 
                                                    class="btn btn-link" 
                                                    type="button" 
                                                    href="#sms_tab" 
                                                    id="sms-tab" 
                                                    role="tab" 
                                                >忘記舊密碼？</button> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div aria-labelledby="sms-tab" class="tab-pane" id="sms_tab" role="tabpanel">
                                    <div class="form-body">
                                        <div class="row">
                                            <div class="col-md-12 form-group" style="margin-bottom: 30px">
                                                <div><label for="" style="font-size: 2em">1.</label></div>
                                                <button class="btn btn-success" type="button" id="send_sms_button" >寄送簡訊</button>
                                            </div>

                                            <div class="col-md-12">
                                                <label for="" style="font-size: 2em">2.</label>
                                            </div>
                                            <div class="col-md-2">
                                                <label>請輸入驗證碼</label>
                                            </div>
                                            <div class="col-md-10 form-group">
                                                <input class="form-control" id="sms_verify" name="sms_verify" placeholder="簡訊驗證碼" type="sms_verify" value="{{ old('sms_verify') }}" pattern="[0-9]*">
                                                @if ($errors->has('sms_verify')) 
                                                    @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('sms_verify') ]) 
                                                @endif
                                            </div>

                                            <div class="col-md-10 offset-md-2 col-xs-12">
                                                <button 
                                                    class="btn btn-link" 
                                                    type="button" 
                                                    href="#password_tab" 
                                                    id="password-tab" 
                                                    role="tab" 
                                                >使用舊密碼驗證</button> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-7 ml-lg-auto">
                                    
                                    <button class="btn btn-primary mr-1 mb-1" type="submit">驗證</button> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
 
@endsection

@section('vendor-scripts')
<script src="{{ asset('plugins/tw-city-selector/tw-city-selector.min.js') }}"></script>
<script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
@endsection

@section('page-scripts')
<script>

    const DefaultCounterSms = 60;
    const AjaxUrl = {
        'smsVerify': '{{ Route("ajax.frontend.change_password.smsVerify") }}'
    }    

    // Tab
    $('[role="tab"]').on('click', function() {
        let target = $(this).attr('href');
        $('.tab-pane').removeClass('active');
        $(target).addClass('active');
    });

    // 簡訊計時器
    let counterSmsSeconds = DefaultCounterSms;
    function counterSms(button) {

        counterSmsSeconds--;
        $('.counter-sms-number').text(counterSmsSeconds);
        if (counterSmsSeconds == 0) {
            
            button.attr('disabled', false);
            button.find('.counter-sms-number').remove();
            button.find('.button-animate-html').remove();
            counterSmsSeconds = DefaultCounterSms;
            return false;
        }

        setTimeout(() => {

            counterSms(button);
        }, 1000);
        
    }

    // 簡訊事件
    $('#send_sms_button').on('click', function() {
        let self = $(this);
        let loadingHtml = `
            <span class="spinner-border spinner-border-sm button-animate-html" role="status" aria-hidden="true"></span>
            <span class="counter-sms-number"> </span>
        `;

        self.attr('disabled', true).prepend(loadingHtml);
        counterSms(self);

        // 寄送簡訊驗證碼
        $.ajax({
            url: AjaxUrl.smsVerify,
            data: {},
            dataType: 'json',
            type: 'POST',
            success: function(response) {

            },
            complete: function(xhr) { 
                if (xhr.status == 429) {
                    swal('發送簡訊頻率過高', '請稍候再試。', 'warning');
                }
            },
        });
    });



</script>
@endsection