@extends('admin.main')
@include('widgets.datetime_picker')
@inject('format', 'App\Presenters\NumberPresenter')
@section('content')
    <section id="basic-input">
        <form class="formValidation" method="post" action="" data-is-update="{{ !empty($data) }}" data-redirect="{{ route('admin.member.show', $data->id ?? null) }}">
            <div class="row style-member-edit">
                <div class="col-12 col-sm-7">
                    <div class="media mb-2">
                        <a class="mr-1" href="javascript:void(0);">
                            <img id="avatar" src="{{ $data->avatar ?? '' ? storage_assets($data->avatar) : asset('bimg/avatar.jpg') }}" alt="users view avatar" class="users-avatar-shadow rounded-circle" height="64" width="64">
                            <input class="hidden" type="file" name="avatar">
                        </a>
                        @if ($data)
                            <div class="media-body pt-25">
                                <h4 class="media-heading">
                                    <span class="users-view-name">{{ $data->name ?? '' }}</span>
                                </h4>
                                <span>ID:</span>
                                <span class="users-view-id">{{ $data->id ?? '' }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">會員資訊</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 md-6">
                                    @if ($data)
                                        <fieldset class="form-group">
                                            <label>會員註冊類型</label>
                                            <p class="form-control-static">
                                                {{ $format->userType($data->type) }}
                                            </p>
                                        </fieldset>
                                    @endif
                                </div>

                                <div class="col-6 md-6">
                                    <fieldset class="form-group">
                                        <label for="account">群組</label>
                                        <select class="form-control" name="gid">
                                            <option value="">無</option>
                                            @foreach($groups as $group)
                                                <option value="{{ $group->id }}" {{ $data && $data->gid == $group->id ? 'selected' : '' }}>{{ $group->name }}</option>
                                            @endforeach
                                        </select>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="account">帳號</label>
                                        <input type="text" class="form-control" id="account" name="account" value="{{ $data->account ?? '' }}" required/>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="password">密碼</label>
                                        <input type="password" class="form-control" id="password" name="password" value="" {{ $data ? '' : 'required' }}/>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="birthday">生日</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1"><i class='bx bx-calendar'></i></span>
                                            </div>
                                            <input type="text" id="birthday" class="form-control pickadate-months-year" placeholder="Select Date"
                                                   value="{{ $data->birthday ?? '' }}" name="birthday">
                                        </div>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label>性別</label>
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="gender-1" name="gender" value="1" {{ !$data || (int)$data->gender === 1 ? 'checked' : '' }}>
                                                        <label for="gender-1">男</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="gender-2" name="gender" value="2" {{ $data && (int)$data->gender === 2 ? 'checked' : '' }}>
                                                        <label for="gender-2">女</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                        </ul>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label>狀態</label>
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="status-enable" name="status" value="1" {{ !$data || $data->status ? 'checked' : '' }}>
                                                        <label for="status-enable">啟用</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="status-disable" name="status" value="0" {{ $data && !$data->status ? 'checked' : '' }}>
                                                        <label for="status-disable">停用</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                        </ul>
                                    </fieldset>
                                </div>

                                <div class="col-6 md-6">
                                    <fieldset class="form-group">
                                        <label for="name">會員姓名</label>
                                        <input type="text" id="name" class="form-control" name="name" value="{{ $data->name ?? '' }}" required/>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="mobile">聯絡電話</label>
                                        <input type="text" id="name" class="form-control" name="mobile" value="{{ $data->mobile ?? '' }}" required/>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="email">email</label>
                                        <input type="email" id="email" class="form-control" name="email" value="{{ $data->email ?? '' }}"/>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label>地址</label>
                                        <div class="form-inline">
                                            <select class="form-control county" name="county">
                                                <option value="">請選擇</option>
                                            </select>
                                            <select class="form-control ml-1 district" name="district">
                                                <option value="">請選擇</option>
                                            </select>
                                        </div>
                                        <input class="form-control mt-1" type="text" name="address" value="{{ $data->address ?? '' }}"
                                               placeholder="請填寫地址"/>
                                    </fieldset>
                                </div>

                                @if ($data)
                                    <div class="col-6 md-6">
                                        <fieldset class="form-group">
                                            <label>最後修改時間</label>
                                            <p class="form-control-static">
                                                {{ $data->updated_at }}
                                            </p>
                                        </fieldset>
                                    </div>
                                    <div class="col-6 md-6">
                                        <fieldset class="form-group">
                                            <label>建立時間</label>
                                            <p class="form-control-static">
                                                {{ $data->created_at }}
                                            </p>
                                        </fieldset>
                                    </div>
                                @endif

                                <div class="col-md-12 border">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title">
                                                收貨人清單
                                            </h4>
                                        </div>
                                        <div class="card-body repeater-default">
                                            <div data-repeater-list="shippingAddress">
                                                <div class="item" data-repeater-item>
                                                    <div class="row justify-content-between">
                                                        <div class="col-3 mb-1">
                                                            <label for="">收貨人 </label>
                                                            <input type="text" class="form-control" name="name">
                                                            <br>
                                                            <div class="form-group custom-control custom-switch custom-switch-shadow custom-control-inline">
                                                                <p class="mb-0">是否設為預設</p>
                                                                <input type="checkbox" class="custom-control-input shippingAddress-checked" id="" name="is_default" value="1">
                                                                <label class="custom-control-label shippingAddress-label" for=""></label>
                                                            </div>
                                                        </div>
                                                        <div class="col-3 mb-1">
                                                            <label for="">電話</label>
                                                            <input type="text" class="form-control" name="phone">
                                                        </div>

                                                        <div class="col-4 mb-1">
                                                            <label for="">地址</label>
                                                            <div class="form-inline">
                                                                <select class="form-control repeaterCounty" name="county">
                                                                    <option value="">請選擇</option>
                                                                </select>
                                                                <select class="form-control ml-1 repeaterDistrict" name="district">
                                                                    <option value="">請選擇</option>
                                                                </select>
                                                           </div>
                                                            <input class="form-control mt-1" type="text" name="address" placeholder="請填寫地址"/>
                                                            <input type="hidden" name="id" value="{{ $row->id ?? '' }}">
                                                        </div>

                                                        <div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
                                                            <button class="btn btn-danger text-nowrap px-1" data-repeater-delete type="button"> <i class="bx bx-x"></i>
                                                                刪除
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="col p-0">
                                                    <button class="btn btn-success" data-repeater-create type="button"><i class="bx bx-plus"></i>
                                                        新增
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @checkPerm(MEMBER_EDIT)
                                <button class="btn btn-primary mt-1" type="submit">{{ $data ? '更新' : '新增' }}</button>
                            @endcheckPerm
                            <a class="btn btn-light mt-1" href="{{ route('admin.member.list') }}">返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection
@push('js')
    <script src="{{ asset('vendor/forms/repeater/jquery.repeater.min.js') }}"></script>
    <script src="{{ asset('js/city.js') }}"></script>
    <script>
        $(function () {
            let shippingAddress = @json($shippingAddress);
            $('.pickadate-months-year').pickadate({
                selectYears: 80,
                selectMonths: true,
                format: 'yyyy-mm-dd',
                max: new Date(),
                today: false,
                clear: false,
            });

            $('.county').cityInit({
                target: $('.district'),
                county: '{{ $data->county ?? '' }}',
                district: '{{ $data->district ?? '' }}'
            });

            $('#avatar').click(function () {
                $(this).next('input').click();
            });

            $('input[name=avatar]').change(function (e) {
                const [file] = this.files;
                if (file) {
                    $('#avatar').attr('src', URL.createObjectURL(file));
                }
            });

            let $repeater = $('.repeater-default').repeater({
                show: function () {
                    let k = $(this).index();
                    $(this).find('.shippingAddress-checked').attr('id', 'is_default_' + k);
                    $(this).find('.shippingAddress-label').attr('for', 'is_default_' + k);

                    $(this).slideDown();
                    $(this).find('.repeaterCounty').cityInit({
                        target: $(this).find('.repeaterDistrict'),
                        county: shippingAddress[k] ? shippingAddress[k].county : '',
                        district: shippingAddress[k] ? shippingAddress[k].district : ''
                    });
                },
                hide: function (deleteElement) {
                    Swal.fire({
                        text: "確定要刪掉此筆資料?",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                    }).then(function (result) {
                        if (result.value) {
                            $(this).slideUp(deleteElement);
                        }
                    });
                }
            });
            $repeater.setList(shippingAddress);

            $(document).on('change', '.shippingAddress-checked', function () {
                if ($(this).val()) {
                    $('.shippingAddress-checked').not($(this)).prop('checked', false);
                }
            });

        });
    </script>
@endpush