@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@section('content')
<main class="main pt-0">
    <div class="container py-8">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="row align-items-center">
                    <form method="post" action="" enctype="multipart/form-data" class="col-12">
                    <div class="col-12 col-lg-11">
                        <div class="row align-items-center">
                            <div class="col-12 col-md-3">
                                <div class="avatar" style="background: url({{asset($member->avatar)}});background-size: cover;">
                                    <input id="file" name="avatar" type="file" onchange="upload(this)" class="d-none">
                                    <a class="btn-upload" href="javascript:void();" onclick="file.click()">
                                        <i class="fas fa-2x fa-camera"></i>
                                        <div>檔案上傳</div>
                                    </a>
                                </div>
                            </div>
                            <div class="col my-6 my-md-0">
                                <input type="text" name="name" value="{{$member->name}}" class="form-control form-control-lg mx-auto mx-md-0 px-0 font-weight-bold text-center text-md-left">
                            </div>
                            <div class="col-12 col-md-4 col-xl-3 text-right">
                                <div class="row no-gutters">
                                    <div class="col-12 col-md-6 mb-2 px-1">
                                        <a class="btn btn-block btn-outline-primary" href="">取消</a>
                                    </div>
                                    <div class="col-12 col-md-6 mb-2 px-1 order-first order-md-last">
                                        <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                        <button class="btn btn-primary btn-block" type="submit">儲存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="nav-secondary border-0">
        <div class="container">
            <div class="nav-light">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ route('member_member-info') }}">帳戶</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('member_save-school-list') }}">收藏頁面</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container pt-12">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="border p-6">
                    <form method="post" action="">
                        <div class="row">
                            <div class="col-12 col-md-9">
                        <div class="form-group row">
                            <label class="col-5 col-sm-3 col-form-label text-muted">手機號碼</label>
                            <div class="col-7 col-sm-9">
                                <input type="text" name="phone" value="{{$member->phone}}" class="form-control w-auto" style="background-color:#fff;" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-5 col-sm-3 col-form-label text-muted">電子郵件</label>
                            <div class="col-7 col-sm-9">
                                <input type="email" name="email" value="{{$member->email}}" class="form-control w-auto" style="background-color:#fff;" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-5 col-sm-3 col-form-label text-muted">密碼</label>
                            <div class="col-7 col-sm-9">
                                <a class="btn btn-outline-primary" href="" data-toggle="modal" data-target="#modal-pw-change">更改密碼</a>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-5 col-sm-3 col-form-label text-muted">想去的國家</label>
                            <div class="col-7 col-sm-9">
                                {!! $FrontendPresenter->getCountryCheckbox($member->country) !!}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-5 col-sm-3 col-form-label text-muted">興趣課程</label>
                            <div class="col-7 col-sm-9">
                                <div class="form-row">
                                    <div class="col-12 col-sm-4 col-md-3">
                                        <div class="custom-control custom-checkbox custom-control-inline my-2">
                                            <input type="checkbox" class="custom-control-input" name="interest[]" value="1" id="customCheck-city-1" @if (in_array(1, explode(',', $member->interest))) checked @endif>
                                            <label class="custom-control-label w-100" for="customCheck-city-1">語言</label>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-4 col-md-3">
                                        <div class="custom-control custom-checkbox custom-control-inline my-2">
                                            <input type="checkbox" class="custom-control-input" name="interest[]" value="2" id="customCheck-city-2" @if (in_array(2, explode(',', $member->interest))) checked @endif>
                                            <label class="custom-control-label w-100" for="customCheck-city-2">出國留學</label>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-4 col-md-3">
                                        <div class="custom-control custom-checkbox custom-control-inline my-2">
                                            <input type="checkbox" class="custom-control-input" name="interest[]" value="3" id="customCheck-city-3" @if (in_array(3, explode(',', $member->interest))) checked @endif>
                                            <label class="custom-control-label w-100" for="customCheck-city-3">學習藝術</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-5 col-sm-3 col-form-label text-muted">預計出發日</label>
                            <div class="col-7 col-sm-9">
                                    <div class="form-row">
                                        <div class="col-12 col-sm-6 col-md-3">
                                            <select name="register_departure_y" class="custom-select form-control px-0">
                                                <option value="">年</option>
                                                @for ($x = date('Y'); $x < date('Y') + 5; $x++)
                                                <option value="{{$x}}" @if (substr($member->departure, 0, 4) == $x) selected @endif>{{$x}}</option>
                                                @endfor
                                            </select>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-3">
                                            <select name="register_departure_m" class="custom-select form-control px-0">
                                                <option value="">月</option>
                                                @for ($x = 1; $x <= 12; $x++)
                                                <option value="{{$x}}" @if ((int)substr($member->departure, 4) == $x) selected @endif>{{$x}}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                            <div class="col-12 col-md-3">
                                <div class="row no-gutters">
                                    <div class="col-12 col-md-6 mb-2 px-1">
                                        <a class="btn btn-block btn-outline-primary" href="javascript:history.go(-1);">取消</a>
                                    </div>
                                    <div class="col-12 col-md-6 mb-2 px-1 order-first order-md-last">
                                        <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                        <button class="btn btn-primary btn-block" type="submit">儲存</button>
                                        {{-- <a class="btn btn-block btn-primary" href="">儲存</a> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@stop

@section('other_modal')
    @include('frontend.module.modal-pw-change')
@stop

@section('js')
<script>
$('#orm_change').submit(function (event) {
    event.preventDefault();
    $.ajax({
        url: '{{ route('member_pw-change') }}',
        data: $('#orm_change').serialize(),
        type: 'POST',
        success: function(response) {
            alert(response);
            location.reload();
        }
    });
});
</script>
@stop