@extends('frontend.layouts.contentLayoutMaster')

@section('title', '領取註冊好禮券')
@section('active', 'signup_gift')

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

@section('page-styles')
<style>    
    .required-star::after {
        content: ' *';
        color:red;
    }
</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.signup_gift.update', $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">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label class="required-star">姓名</label>
                                    </div>
                                    <div class="col-md-10 form-group">
                                        <input class="form-control" id="name" name="name" placeholder="姓名" type="text" value="{{ old('name', optional($user->profile)->name) }}">
                                        @if ($errors->has('name')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('name') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-2">
                                        <label class="required-star">性別</label>
                                    </div>
                                    <div class="col-md-10 form-group">
                                        <select class="form-control" id="gender" name="gender">
                                            @foreach ($genders as $key => $value)
                                                <option value="{{ $key }}" {{ $key == old('gender', optional($user->profile)->gender ) ? 'selected' : '' }} >{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        
                                        @if ($errors->has('gender')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('gender') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-2">
                                        <label>電話</label>
                                    </div>
                                    <div class="col-md-10 form-group">
                                        @if (isset($user->mobile))
                                            {{ $user->mobile }}
                                        @endif

                                        @if ($errors->has('mobile')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('mobile') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-2">
                                        <label class="required-star">信箱</label>
                                    </div>
                                    <div class="col-md-10 form-group">
                                        <input class="form-control" id="email" name="email" placeholder="請輸入Email" type="text" value="{{ old('email', $user->email) }}">
                                        @if ($errors->has('email')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('email') ]) 
                                        @endif
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <label class="required-star">生日</label>
                                    </div>
                                    <div class="col-md-10 form-group">
                                        @if (isset($user->profile) && $user->profile->birthday)
                                            {{ $user->profile->birthday->format('Y/m/d') }}
                                        @else
                                            <input class="form-control flatpickr2" id="birthday" name="birthday" placeholder="生日" type="text" value="{{  old('birthday', optional($user->profile)->birthday ) }}">    
                                        @endif

                                        @if ($errors->has('birthday')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('birthday') ]) 
                                        @endif
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <label>住址</label>
                                    </div>
                                    <div class="col-md-10 form-group">
                                        <div class="city-selector-set d-flex justify-content-start justify-content-xs-between"></div>

                                        @if ($errors->has('county')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('county') ]) 
                                        @endif
                                        @if ($errors->has('district')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('district') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-10 offset-md-2 form-group">
                                        <input class="form-control" id="address" name="address" placeholder="地址" type="text" value="{{ old('address', optional($user->profile)->address ) }}">
                                        @if ($errors->has('address')) 
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('address') ]) 
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-10 ml-lg-auto">
                                    <button class="btn btn-primary mr-1 mb-1" type="button" id="submit_button">更新 & 驗證信箱</button> 
                                    
                                    <a href="{{ Route('frontend.profile') }}">
                                        <button class="btn btn-light mr-1 mb-1" type="button">下次登入再填寫</button> 
                                    </a>
                                </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>

    new TwCitySelector({
        el: '.city-selector-set',
        hasZipcode: true,
        hiddenZipcode: true,
        countyValue: '{{ old("county", optional($user->profile)->county ) }}', 
        districtValue: '{{ old("district", optional($user->profile)->district ) }}', 
        countyFieldName: 'county', 
        districtFieldName: 'district', 
        zipcodeFieldName: 'zipcode' 
    });

    flatpickr("#birthday", {
        enableTime: false,
        dateFormat: "Y/m/d",
        maxDate:'today'
    });

    // 更新
    $('#submit_button').on('click', function() {
        let main_form = $('#main_form');
    
        return swal({
            'title':'表單送出前，請先確認信箱',
            'html': `請確認您的信箱是否為：${$('#email').val()}`,
            'type': 'warning',
            'showCancelButton': true,
            'confirmButtonText': '更新',
            'cancelButtonText': '再編輯',
        }).then(function(response) {
            if (response.value === true) {

                main_form.submit();
            }

            return false;
        });
    });
</script>    
@endsection