@extends('admin.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('admin.mommy.update', $administrator->id) }}"
                      method="POST">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" id="id" name="id" v-model="form.id">
                    <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">
                                            <input name="account" id="account" placeholder="帳號"
                                                   class="form-control"
                                                   type="text"
                                                   v-model="form.account">
                                            @if ($errors->has('account'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('account') ])
                                            @endif
                                        </div>
                                        <div class="col-md-1">
                                            <h6>密碼</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-1">
                                            <h6 class="required-field">信箱</h6>
                                        </div>
                                        <div class="col-md-5 form-group">
                                            <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-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">
                                            <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>

                                        <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>團媽等級</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <select2 :options="configRanksOptions" v-model="form.rank" name="rank"></select2>
                                            @if ($errors->has('rank'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('rank') ])
                                            @endif
                                        </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 class="col-md-12">
                                            <h5>其他資訊</h5>
                                            <hr>
                                        </div>

                                        <div class="col-md-1">
                                            <h6>驗證狀態</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            <span class="{{ $administrator->mommy->verify_status_class }}">
                                                {{ $administrator->mommy->verify_status_text }}
                                            </span>
                                        </div>

                                        <div class="col-md-1">
                                            <h6>建立時間</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            {{ $administrator->created_at->format('Y/m/d H:i:s') }}
                                        </div>

                                        <div class="col-md-1">
                                            <h6>更新時間</h6>
                                        </div>
                                        <div class="col-md-11 form-group">
                                            {{ $administrator->updated_at->format('Y/m/d H:i:s') }}
                                        </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>

                                    @if($administrator->mommy->isPending())
                                        <button class="btn btn-success mr-1 mb-1" type="button"
                                                @click="setVerifyStatus({{$verify_status_choices['verified']}})">審核
                                        </button>
                                        <button class="btn btn-danger mr-1 mb-1" type="button"
                                                @click="setVerifyStatus({{$verify_status_choices['reject']}})">拒絕
                                        </button>
                                    @endif

                                    <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 }}',
            'rank': '{{ old('bank_account') ?? $administrator->mommy->rank }}',
            '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 !!};
        const configRanks = {!! $ranks !!};
        const setVerifyStatusApi = '{{ route('ajax.admin.mommy.setVerifyStatus', $administrator->id) }}';
    </script>
    <script src="{{ mix('assets/js/admin/mommy/form.js') }}"></script>
@endsection