@extends('frontend3')

@section('content')
    <form method="post" action="{{ url('user/update') }}" enctype="multipart/form-data">
        <div id="siteContent" class="site-content">
            <div class="container">
                <div class="user-profile-edit-section ht-depth-1 mt-12 mb-48">
                    <div class="section-header">
                        <h1 class="section-header__title text-center">Cập nhật thông tin cá nhân</h1>
                    </div>
                    <div class="section-content">
                        {!! csrf_field() !!}
                        <div class="form-group text-center mb-24">
                            <div class="avatar-wrapper">
                                <div class="avatar-image">
                                    <div class="image-wrap ht-rectangle ratio-11">
                                        <div class="ht-inner ht-bgcover" id="image-preview"
                                             style="background-image: url('{{ $user->image }}')"></div>
                                    </div>
                                </div>
                                <label class="cs-pt mt-12"><input type="file" name="image" class="hidden" id="image-input2">Thay đổi ảnh
                                    đại
                                    diện</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Họ (*)</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            @if(!empty($user->first_name))
                                                <input type="text" class="form-control" name="first_name"
                                                       value="{{ $user->first_name }}">
                                            @else
                                                <input type="text" class="form-control" name="first_name"
                                                       value="{{ old('first_name') }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Tên (*)</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            @if(!empty($user->last_name))
                                                <input type="text" class="form-control" name="last_name"
                                                       value="{{ $user->last_name }}">
                                            @else
                                                <input type="text" class="form-control" name="last_name"
                                                       value="{{ old('last_name') }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Ngày sinh</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            @if(empty($user->birthday))
                                                <input type="text" class="form-control datepicker" name="birthday"
                                                       value="{{ old('birthday') }}">
                                            @else
                                                <input type="text" class="form-control datepicker" name="birthday"
                                                       value="{{$user->birthday }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Giới tính</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <select class="form-control" name="gender">


                                                @if(!empty($user->gender))
                                                    <option @if(strtolower($user->gender) == strtolower('Nam')) selected @endif value="Nam">Nam</option>
                                                    <option @if(strtolower($user->gender) == strtolower('Nữ')) selected @endif value="Nữ">Nữ</option>
                                                    <option @if(strtolower($user->gender) == strtolower('Khác')) selected @endif value="Khác">Khác</option>
                                                @else
                                                    <option @if(strtolower(old('gender')) == strtolower('Nam')) selected @endif value="Nam">Nam</option>
                                                    <option @if(strtolower(old('gender')) == strtolower('Nữ')) selected @endif value="Nữ">Nữ</option>
                                                    <option @if(strtolower(old('gender')) == strtolower('Khác')) selected @endif value="Khác">Khác</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Số điện thoại (*)</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            @if(!empty($user->phone))
                                                <input type="text" class="form-control" name="phone"
                                                       value="{{ $user->phone }}" @if($user->status_phone) disabled @endif >
                                            @else
                                                <input type="text" class="form-control" name="phone"
                                                       value="{{ old('phone') }}" @if($user->status_phone) disabled @endif>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Email</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            @if(empty($user->email))
                                                <input type="text" class="form-control" name="email"
                                                       value="{{  old('email') }}">
                                            @else
                                                <input type="text" class="form-control" name="email"
                                                       value="{{ $user->email }}" @if($user->status_email) disabled @endif>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">


                            <div class="col-xs-12 col-md-6 more-pd">
                                @if(\App\Components\Functions::checkDisplayType())
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Loại người dùng (*)</label>
                                            </div>
                                        </div>

                                        @if(!empty($user->type))
                                            <div class="col-xs-8">
                                                <select class="form-control select2" name="type" disabled>
                                                    <option value="" selected="">Chọn loại người dùng</option>
                                                    <option value="{{ \App\User::OWNER }}"
                                                            @if($user->type == \App\User::OWNER) selected="" @endif>Chủ
                                                        trọ
                                                    </option>
                                                    <option value="{{ \App\User::RENTER }}"
                                                            @if($user->type == \App\User::RENTER) selected="" @endif>
                                                        Người thuê
                                                    </option>
                                                </select>
                                            </div>
                                        @else
                                            <div class="col-xs-8">
                                                <select class="form-control select2" name="type">
                                                    <option value="" selected="">Chọn loại người dùng</option>
                                                    <option value="{{ \App\User::OWNER }}"
                                                            @if(old('type') == \App\User::OWNER) selected="" @endif>Chủ
                                                        trọ
                                                    </option>
                                                    <option value="{{ \App\User::RENTER }}"
                                                            @if(old('type') == \App\User::RENTER) selected="" @endif>
                                                        Người thuê
                                                    </option>
                                                </select>
                                            </div>
                                        @endif

                                    </div>
                                </div>
                                @endif
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Tỉnh / thành phố</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <select class="form-control select2" name="province_id" id="province">
                                                <option selected="">Chọn tỉnh / thành phố</option>

                                                @php $cities = \App\Components\Functions::getProvinces(); @endphp
                                                @foreach($cities as $city)
                                                    <option @if($city->provinceid == $user->province_id) selected=""
                                                            @endif value="{{ $city->provinceid }}">{{ $city->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Quận / huyện</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <select class="form-control select2" name="district_id" id="district">
                                                <option selected="">Chọn quận / huyện</option>

                                                @if(!empty($user->district_id))
                                                    @php $districts = DB::table('district')->where('provinceid', $user->province_id)->get(); @endphp
                                                @endif

                                                @if(!empty($districts))
                                                    @foreach($districts as $district)
                                                        <option @if($district->districtid == $user->district_id) selected=""
                                                                @endif value="{{ $district->districtid }}">{{ $district->name }}</option>
                                                    @endforeach
                                                @endif

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Xã / phường</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <select class="form-control select2" name="ward_id" id="ward">
                                                <option selected="">Chọn xã / phường</option>

                                                @if(!empty($user->ward_id))
                                                    @php $wards = DB::table('ward')->where('districtid', $user->district_id)->get(); @endphp
                                                @endif

                                                @if(!empty($wards))
                                                    @foreach($wards as $ward)
                                                        <option @if($ward->wardid == $user->ward_id) selected=""
                                                                @endif value="{{ $ward->wardid }}">{{ $ward->name }}</option>
                                                    @endforeach
                                                @endif

                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md-6 more-pd">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <div class="label-container">
                                                <label>Địa chỉ chi tiết</label>
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                        <textarea name="address" rows="6" class="form-control"
                                                  style="max-height: 126px;">{{ $user->address }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section-footer">
                        <div class="row">
                            {{--<div class="col-xs-5 col-sm-3 col-sm-offset-2 col-md-2 col-md-offset-3">--}}
                                {{--<a href="#" class="btn ht-btn-default ma-4 btn-block">Hủy</a>--}}
                            {{--</div>--}}
                            <div class="col-xs-7 col-sm-6 col-md-4 col-sm-offset-2 col-md-2 col-md-offset-4">
                                <button type="submit" class="btn ht-btn-primary ma-4 btn-block">Cập nhật</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>
@endsection

@push('scripts')

<script>

    function readURL2(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image-preview').css({
                    'background-image' : "url("+e.target.result+")"
                });
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#image-input2").change(function () {
        readURL2(this);
    });

    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy',
        language: 'vi',
        autoclose: true,
    });

    $(document).on('change', '#province', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'province'
            },
            dataType: 'html',
            success: function (response) {
                $('#district').html(response);
                $('#ward').html('');

            }
        });
    });

    $(document).on('change', '#district', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'district'
            },
            dataType: 'html',
            success: function (response) {
                $('#ward').html(response);

            }
        });
    });

</script>
@endpush