@extends('mommy.layouts.contentLayoutMaster')

@section('title','個人資料')

@section('vendor-styles')

@endsection

@section('page-styles')

@endsection


@section('content')
    <section id="app">
        <div class="row match-height justify-content-center">
            <div class="col-md-10 col-12">
                <form class="form form-horizontal" action="{{ Route('mommy.profile.update') }}" method="POST">
                    @csrf
                    <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-12">
                                            <h5>帳號資訊</h5>
                                            <hr>
                                        </div>
                                        <div class="col-md-1">
                                            <h6 class="required-field">信箱</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            @{{ form.email }}
{{--                                            <input name="email" id="email" placeholder="信箱"--}}
{{--                                                   class="form-control"--}}
{{--                                                   type="text"--}}
{{--                                                   v-model="form.email">--}}
                                            @if ($errors->has('email'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('email') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6 class="">密碼</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <div class="input-group mb-3">
                                                <input name="password" id="password" placeholder="密碼"
                                                       class="form-control"
                                                       :type="passwordFieldType"
                                                       v-model="form.password">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary" type="button" @click="togglePasswordFieldType">
                                                        <i v-if="passwordFieldType == 'password'" class='bx bx-show'></i>
                                                        <i v-else class='bx bx-low-vision'></i>
                                                    </button>
                                                </div>
                                            </div>
                                            @if ($errors->has('password'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('password') ])
                                            @endif
                                        </div>


                                        <div class="col-md-12">
                                            <h5>基本資訊</h5>
                                            <hr>
                                        </div>

                                        <div class="col-md-1">
                                            <h6 class="required-field">團購主名稱</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="name" id="name" placeholder="姓名"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.name">
                                            @if ($errors->has('name'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('name') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>生日</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <date-flatpickr
                                                    date-format="Y-m-d"
                                                    id="birthday"
                                                    name="birthday"
                                                    v-model="form.birthday"
                                            ></date-flatpickr>
                                            @if ($errors->has('birthday'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('birthday') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6 class="required-field">聯絡人</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="contact_name" id="contact_name" placeholder="聯絡人"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.contact_name">
                                            @if ($errors->has('contact_name'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('contact_name') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6 class="required-field">聯絡電話</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="mobile" id="mobile" placeholder="聯絡電話"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.mobile">
                                            @if ($errors->has('mobile'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('mobile') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>統一編號</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="company_number" id="company_number" placeholder="統一編號"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.company_number">
                                            @if ($errors->has('company_number'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('company_number') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6 class="required-field">身分證字號</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="personal_id_number" id="personal_id_number" placeholder="身分證字號"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.personal_id_number">
                                            @if ($errors->has('personal_id_number'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('personal_id_number') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>公司名稱</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="company_name" id="company_name" placeholder="公司名稱"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.company_name">
                                            @if ($errors->has('company_name'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('company_name') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>國籍</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <div class="col-md-5 form-group">
                                                <select2 :options="configCountriesOptions" v-model="form.country" name="country"></select2>
                                                @if ($errors->has('country'))
                                                    @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('country') ])
                                                @endif
                                            </div>

{{--                                            <input name="country" id="country" placeholder="國籍"--}}
{{--                                                   class="form-control"--}}
{{--                                                   type="text"--}}
{{--                                                   v-model="form.country">--}}
                                            @if ($errors->has('country'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('country') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>戶籍地址</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <div class="city-selector-set d-flex justify-content-start justify-content-xs-between" id="city-selector-set-residence"></div>
                                            <div class="position-relative mt-1">
                                                <input type="text" id="residence_address" name="residence_address" v-model="form.residence_address" class="form-control">
                                            </div>
                                            @if ($errors->has('residence_county'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('residence_county') ])
                                            @endif
                                            @if ($errors->has('residence_district'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('residence_district') ])
                                            @endif
                                            @if ($errors->has('residence_zipcode'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('residence_zipcode') ])
                                            @endif
                                            @if ($errors->has('residence_address'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('residence_address') ])
                                            @endif
                                        </div>

                                        <div class="col-md-12">
                                            <h5>銀行資訊</h5>
                                            <hr>
                                        </div>

                                        <div class="col-md-1">
                                            <h6>銀行名稱</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <select2 :options="configBankOptions" v-model="form.bank_id" name="bank_id"></select2>
                                            @if ($errors->has('bank_id'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('bank_id') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>銀行分行</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <select2 :options="configBankBranchOptions" v-model="form.bank_branch_id" name="bank_branch_id"></select2>
                                            @if ($errors->has('bank_branch_id'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('bank_branch_id') ])
                                            @endif
                                        </div>
                                        <div class="col-md-1">
                                            <h6>戶名</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="bank_name" id="bank_name" placeholder="戶名"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.bank_name">
                                            @if ($errors->has('bank_name'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('bank_name') ])
                                            @endif
                                        </div>
                                        <div class="col-md-1">
                                            <h6>銀行帳號</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <input name="bank_account" id="bank_account" placeholder="銀行帳號"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.bank_account">
                                            @if ($errors->has('bank_account'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('bank_account') ])
                                            @endif
                                        </div>

                                        <div class="col-md-12">
                                            <h5>社交媒體</h5>
                                            <hr>
                                        </div>

                                        <div class="col-md-1">
                                            <h6>Facebook</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <input name="facebook_link" id="facebook_link" placeholder="Facebook 網址"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.facebook_link">
                                            @if ($errors->has('facebook_link'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('facebook_link') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>Instagram</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <input name="instagram_link" id="instagram_link" placeholder=" Instagram 網址"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.instagram_link">
                                            @if ($errors->has('instagram_link'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('instagram_link') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>Youtube</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <input name="youtube_link" id="youtube_link" placeholder="Youtube 網址"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.youtube_link">
                                            @if ($errors->has('youtube_link'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('youtube_link') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1">
                                            <h6>Tiktok</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <input name="tiktok_link" id="tiktok_link" placeholder="Tiktok 網址"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.tiktok_link">
                                            @if ($errors->has('tiktok_link'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('tiktok_link') ])
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                <div class="row justify-content-center">
                                    <button class="btn btn-primary mr-1 mb-1" type="submit" id="submit">送出</button>
                                    <button class="btn btn-light glow mr-1 mb-1" type="button">返回</button>
                                </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>
@endsection

@section('page-scripts')
    <script>
        const form = {
            'id': '{{old('id') ??  $administrator->id }}',
            'name': '{{ old('name') ?? $administrator->name }}',
            'account': '{{ old('account') ?? $administrator->account }}',
            'email': '{{ old('email') ?? $administrator->email }}',
            'birthday': '{{ old('birthday') ?? $administrator->mommy_profile->birthday }}',
            'contact_name': '{{ old('contact_name') ?? $administrator->mommy_profile->contact_name }}',
            'mobile': '{{ old('mobile') ?? $administrator->mommy_profile->mobile }}',
            'company_number': '{{ old('company_number') ?? $administrator->mommy_profile->company_number }}',
            'personal_id_number': '{{ old('personal_id_number') ?? $administrator->mommy_profile->personal_id_number }}',
            'company_name': '{{ old('company_name') ?? $administrator->mommy_profile->company_name }}',
            'country': '{{ old('country') ?? $administrator->mommy_profile->country }}',
            'residence_county': '{{ old('residence_county') ?? $administrator->mommy_profile->county }}',
            'residence_district': '{{ old('residence_district') ?? $administrator->mommy_profile->district }}',
            'residence_zipcode': '{{ old('residence_zipcode') ?? $administrator->mommy_profile->zipcode }}',
            'residence_address': '{{ old('residence_address') ?? $administrator->mommy_profile->address }}',
            'bank_id': '{{ old('bank_id') ?? $administrator->mommy_profile->bank_id }}',
            'bank_branch_id': '{{ old('bank_branch_id') ?? $administrator->mommy_profile->bank_branch_id }}',
            'bank_name': '{{ old('bank_name') ?? $administrator->mommy_profile->bank_name }}',
            'bank_account': '{{ old('bank_account') ?? $administrator->mommy_profile->bank_account }}',
            'facebook_link': '{{ old('facebook_link') ?? $administrator->mommy_profile->social_medias['facebook_link'] }}',
            'instagram_link': '{{ old('instagram_link') ?? $administrator->mommy_profile->social_medias['instagram_link'] }}',
            'youtube_link': '{{ old('youtube_link') ?? $administrator->mommy_profile->social_medias['youtube_link'] }}',
            'tiktok_link': '{{ old('tiktok_link') ?? $administrator->mommy_profile->social_medias['tiktok_link'] }}',
        };

        const configBanks = {!! $banks !!};
        const configBankbranches = {!! $bank_branches !!};
        const configCountries = {!! $countries !!};
    </script>
    <script src="{{ mix('assets/js/mommy/profile.js') }}"></script>
@endsection