@extends('layouts.main')

@section('title','Profile')
@section('header','Profile')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/">Akun</a></li>
<li class="breadcrumb-item active">Profile</li>
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        <h3 class="card-title"> <strong>Profile</strong></h3>
    </div>
    <form method="POST" action="/web_api/user/update_profile/{{$user->id}}" class="form-update-profile">
    @csrf
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <label class="form-control-label">Foto</label>
                    <div class="form-group">
                        <img src="/images/users/{{$user->foto}}" width="40%" id="user_photo_edit_view" onclick="document.getElementById('user_photo_edit').click()" class="pointer">
                        <input type="file" id="user_photo_edit" name="user_photo_edit" class="d-none" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label for="name">Nama Lengkap</label> <small class="text-danger">*</small>
                        <input type="text" class="form-control" name="nama_lengkap" placeholder="Nama Lengkap" value="{{$user->nama_lengkap}}" required autofocus>
                        <input name="id" value="{{$user->id}}" hidden>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email" value="{{$user->email}}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="email">Telephone</label> <small class="text-danger">*</small>
                        <input type="number" step="1" class="form-control" name="telepon" placeholder="Telephone" required autofocus value="{{$user->telepon}}">
                    </div>
                    
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="cabang">Cabang</label>
                        <input type="cabang" class="form-control" name="cabang" placeholder="Cabang" value="{{$user->cabang->cabang}}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="email">Tanggal Lahir</label> <small class="text-danger">*</small>
                        <input type="date" class="form-control" name="tgl_lahir" value="{{$user->tgl_lahir}}" required autofocus>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label mt-3">Alamat</label> <small class="text-danger">*</small>
                        <textarea name="alamat" rows="2" class="form-control form-control-sm" required autofocus placeholder="Alamat">{{$user->alamat}}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label> <small>(Leave empty if you dont wish to change your password)</small>
                        <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="password_confirm">Password Confirm</label>
                        <input type="password" class="form-control" name="password_confirm" id="password_confirm" placeholder="Password Confirm">
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer" style="background-color: #fff;">
            <button type="submit" class="btn btn-primary btn-md float-right">Update</button>
        </div>
    </form>
</div>

@endsection
@push('custom-scripts')

<script>
    $(document).on('change', '#user_photo_edit', function(e){
        var target = $('#user_photo_edit_view'),
            src = $('#user_photo_edit');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).ready(function(e){
        $(document).on('submit', '.form-update-profile', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                id = ini.find('input[name=id]').val(),
                url = '/web_api/user/update_profile/'+id;
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                nama_lengkap: ini.find('input[name=nama_lengkap]').val(),
                tgl_lahir: ini.find('input[name=tgl_lahir]').val(),
                telepon: ini.find('input[name=telepon]').val(),
                alamat: ini.find('textarea[name=alamat]').val(),
                password: ini.find('input[name=password]').val(),
                password_confirm: ini.find('input[name=password_confirm]').val(),
            };
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
        
            function postData(datas){
                $.ajax({
                    url: url,
                    type: "post",
                    data: datas
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        $('#editData').modal('hide');
                        $('#user_photo_edit').val('');
                        successAlert(message);
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            
            var el_image = $('#user_photo_edit'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.foto = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 10){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran Foto tidak boleh lebih dari 10 MB!');
                    }else{
                        postData(post_data);
                    }
                };
            }else{
                postData(post_data);
            }
            
        });
    });
</script>

@endpush