
<?php $__env->startSection('title','KM BackOffice'); ?>
<?php $__env->startSection('content'); ?>
<div class="main-content">
    <?php echo $__env->make('layouts/partials/back/header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    
    <main>
        <div class="banner">
            <span class="fas <?php echo e($page['data']['icon']); ?>"></span>
            <span><?php echo e($page['data']['name']); ?></span>
        </div>
        <div class="container" id="blade">
            <?php if($user['status'] == true): ?>
            <div class="container py-5">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="row">
                            <div class="card mb-4">
                                <div class="card-body text-center">
                                    <img id="main_pic" src="<?php echo e(asset('../storage/km/profile/'.$user['data']['photo'])); ?>" alt="avatar"
                                        class="rounded-circle img-fluid"
                                        style="width:250px; height:250px; object-fit:cover;">
                                    <h5 class=" my-3"><?php echo e($user['data']['fullname_th']); ?></h5>
                                    <p class="text-muted mb-1">สิทธิ์ <?php echo e($user['data']['user_roles'][0]['name']); ?>

                                    </p>
                                    <div class="d-flex justify-content-center mb-2">
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#photoModal">
                                            เปลี่ยนภาพโปรไฟล์
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="txtorange-1 text-center">
                                <h5>ข้อมูลการติดต่อ</h5></strong>
                            </div>
                            <hr class="line1">
                            <div class="card mb-4 mb-lg-0">
                                <div class="card-body p-0">
                                    <ul class="list-group list-group-flush rounded-3">
                                        <li
                                            class="list-group-item d-flex justify-content-between align-items-center p-3">
                                            <i class="fas fa-at fa-lg text-info"></i>
                                            <?php if(isset($user['data']['email'])): ?>
                                            <p class="mb-0"><?php echo e($user['data']['email']); ?></p>
                                            <?php else: ?>
                                            <p class="mb-0">-</p>
                                            <?php endif; ?>
                                        </li>
                                        <li
                                            class="list-group-item d-flex justify-content-between align-items-center p-3">
                                            <i class="fab fa-line fa-lg text-success"></i>
                                            <?php if(isset($user['data']['lineid'])): ?>
                                            <p class="mb-0"><?php echo e($user['data']['lineid']); ?></p>
                                            <?php else: ?>
                                            <p class="mb-0">-</p>
                                            <?php endif; ?>
                                        </li>
                                        <li
                                            class="list-group-item d-flex justify-content-between align-items-center p-3">
                                            <i class="fas fa-phone fa-lg text-primary"></i>
                                            <?php if(isset($user['data']['cellphone'])): ?>
                                            <p class="mb-0"><?php echo e($user['data']['cellphone']); ?></p>
                                            <?php else: ?>
                                            <p class="mb-0">-</p>
                                            <?php endif; ?>
                                        </li>
                                        <li
                                            class="list-group-item d-flex justify-content-between align-items-center p-3">
                                            <i class="fas fa-phone-square fa-lg text-warning"></i>
                                            <?php if(isset($user['data']['telephone'])): ?>
                                            <p class="mb-0"><?php echo e($user['data']['telephone']); ?></p>
                                            <?php else: ?>
                                            <p class="mb-0">-</p>
                                            <?php endif; ?>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <br>
                        <?php if(count($user['data']['expertises']) > 0): ?>
                        <div class="row">
                            <div class="txtorange-1 text-center">
                                <h5>ความเชี่ยวชาญ</h5></strong>
                            </div>
                            <hr class="line1">
                            <div class="card mb-4 mb-lg-0">
                                <div class="card-body p-0">
                                    <ul class="list-group list-group-flush rounded-3">
                                        <?php $__currentLoopData = $user['data']['expertises']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $exp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <li class="list-group-item">
                                            <input class="form-check-input me-1" type="checkbox" checked disabled>
                                            <?php echo e($exp['name']); ?>

                                        </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                    <div class="col-lg-8">
                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">ชื่อ-นามสกุล</p>
                                        <p class="mb-0">(ภาษาไทย)</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <p class="text-muted mb-0"><?php echo e($user['data']['fname_th']); ?> <?php echo e($user['data']['lname_th']); ?></p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">ชื่อ-นามสกุล</p>
                                        <p class="mb-0">(ภาษาอังกฤษ)</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <p class="text-muted mb-0"><?php echo e($user['data']['fname_eng']); ?> <?php echo e($user['data']['lname_eng']); ?></p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">ชื่อผู้ใช้งาน</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <p id="username" class="text-muted mb-0"><?php echo e($user['data']['username']); ?></p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">เลขบัตรประชาชน</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <?php if(isset($user['data']['idcard'])): ?>
                                        <p class="text-muted mb-0"><?php echo e($user['data']['idcard']); ?></p>
                                        <?php else: ?>
                                        <p class="text-muted mb-0">-</p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">วันเกิด</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <?php if(isset($user['data']['birthdate'])): ?>
                                        <p class="text-muted mb-0">
                                            <?php echo e(formatDateThaiFull($user['data']['birthdate'])); ?>

                                        </p>
                                        <?php else: ?>
                                        <p class="text-muted mb-0">-</p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">อายุ</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <?php if(isset($user['data']['birthdate'])): ?>
                                        <p class="text-muted mb-0">
                                            <?php echo e(\Carbon\Carbon::parse($user['data']['birthdate'])->diff(\Carbon\Carbon::now())->format('%y ปี')); ?>

                                        </p>
                                        <?php else: ?>
                                        <p class="text-muted mb-0">-</p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">เพศ</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <?php if(isset($user['data']['gender'])): ?>
                                        <?php if($user['data']['gender'] == 1): ?>
                                        <p class="text-muted mb-0">หญิง</p>
                                        <?php else: ?>
                                        <p class="text-muted mb-0">ชาย</p>
                                        <?php endif; ?>
                                        <?php else: ?>
                                        <p class="text-muted mb-0">-</p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">หน่วยงาน</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <p class="text-muted mb-0"><?php echo e($user['data']['organization']['name']); ?></p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p class="mb-0">ตำแหน่งงาน</p>
                                    </div>
                                    <div class="col-sm-9">
                                        <?php if(isset($user['data']['position'])): ?>
                                        <p class="text-muted mb-0"><?php echo e($user['data']['position']); ?></p>
                                        <?php else: ?>
                                        <p class="text-muted mb-0">-</p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <?php if(count($user['data']['education']) > 0): ?>
                            <div class="col-md-6">
                                <div class="card mb-4 mb-md-0">
                                    <div class="card-header">
                                        ประวัติการศึกษา
                                    </div>
                                    <div class="card-body">
                                        <?php $__currentLoopData = $user['data']['education']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $edu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <p class="mb-1" style="font-size: .77rem;">ปีที่จบการศึกษา:
                                            <?php echo e($edu['year_end']); ?></p>
                                        <p class="mt-4 mb-1" style="font-size: .77rem;">ระดับการศึกษา:
                                            <?php echo e($edu['level']); ?></p>
                                        <p class="mt-4 mb-1" style="font-size: .77rem;">สถาบันการศึกษา:
                                            <?php echo e($edu['university']); ?></p>
                                        <p class="mt-4 mb-1" style="font-size: .77rem;">วุฒิการศึกษา:
                                            <?php echo e($edu['degrees']); ?></p>
                                        <p class="mt-4 mb-1" style="font-size: .77rem;">สาขาวิชา:
                                            <?php echo e($edu['branch']); ?>

                                        </p>
                                        <?php if(!$loop->last): ?>
                                        <hr>
                                        <?php endif; ?>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>
                            <?php if(count($user['data']['experience']) > 0): ?>
                            <div class="col-md-6">
                                <div class="card mb-4 mb-md-0">
                                    <div class="card-header">
                                        ประสบการณ์การทำงาน
                                    </div>
                                    <div class="card-body">
                                        <?php $__currentLoopData = $user['data']['experience']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $work): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <p class="mb-1" style="font-size: .77rem;">ระยะเวลา:
                                            <?php echo e($work['year_start']); ?> - <?php echo e($work['year_end']); ?></p>
                                        <p class="mt-4 mb-1" style="font-size: .77rem;">รายละเอียดงาน:
                                            <?php echo e($work['position']); ?></p>
                                        <p class="mt-4 mb-1" style="font-size: .77rem;">สถานที่ทำงาน:
                                            <?php echo e($work['place']); ?></p>
                                        <?php if(!$loop->last): ?>
                                        <hr>
                                        <?php endif; ?>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </main>
</div>
<!-- Modal -->
<div class="modal fade" id="photoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    เปลี่ยนภาพโปรไฟล์
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formImg" name="formImg" class="needs-validation" novalidate>
                <div class="modal-body">
                    <div class="mb-3 text-center">
                        <img id="pic" alt="avatar" class="rounded-circle img-fluid" src="<?php echo e(asset('../storage/km/profile/'.$user['data']['photo'])); ?>"
                            style="width:300px; height:300px; object-fit:cover;">
                    </div>
                    <div class="mb-3">
                        <input id="in_img" name="in_img" class="form-control" type="file" accept="image/png, image/jpeg"
                            required>
                        <small style="font-size: 12px;">*** รองรับไฟล์ภาพ(.jpg/.png) ขนาดไม่เกิน 1080x1080 px <br>และน้อยกว่า 3 MB</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="save_img" type="submit" class="btn btn-primary">บันทึก</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#pic').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

var _URL = window.URL || window.webkitURL;
$("#in_img").change(function() {
    // readURL(this);
    var file, img, fileType, fsize;
    file = this.files[0];
    fileType = file['type'];
    validImageTypes = ['image/jpeg', 'image/png'];
    fsize = file.size;
    size = Math.round((fsize / 1024));
    console.log(fsize);
    
    if (validImageTypes.includes(fileType)) {
        img = new Image();
        img.onload = function() {
            // alert((this.width == 2500) && (this.height == 730));
            if ((this.width > 1080) && (this.height > 1080)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'คำเตือน',
                    text: 'กรุณาใช้ภาพขนาดไม่เกิน 1080 x 1080 px',
                });
                $("#in_img").val("");
                $('#pic').attr("src", "<?php echo e(asset('image/personal01.png')); ?>");
                return false;
            }else if ((this.width < 300) && (this.height < 300)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'คำเตือน',
                    text: 'กรุณาใช้ภาพขนาดมากกว่า 300 x 300 px',
                });
                $("#in_img").val("");
                $('#pic').attr("src", "<?php echo e(asset('image/personal01.png')); ?>");
                return false;
            }else{
                if (size > 3072) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'คำเตือน',
                        text: 'กรุณาใช้ภาพขนาดไม่เกิน 3 MB',
                    });
                    $("#in_img").val("");
                    $('#pic').attr("src", "<?php echo e(asset('image/personal01.png')); ?>");
                    return false;
                }
            }
        };
        img.onerror = function() {
            $("#profile").val("");
            Swal.fire({
                icon: 'warning',
                title: 'คำเตือน',
                text: "กรุณาอัพโหลดไฟล์ภาพ (jpg, png) เนื่องจากเป็นไฟล์ประเภท" + file.type,
            });
        };
        img.src = _URL.createObjectURL(file);
        readURL(this);
    }else{
        $("#profile").val("");
        Swal.fire({
            icon: 'warning',
            title: 'คำเตือน',
            text: "กรุณาอัพโหลดไฟล์ภาพ (jpg, png)",
        });
    }
});

var $imgForm = $("#formImg");
$imgForm.validate({
    rules: {
        in_img: {
            required: true,
        }
    },
    messages: {
        in_img: {
            required: "กรุณาเลือกรูปภาพ",
        }
    },
    submitHandler: function() {
        $(".loader").show();
        var profile = $('#in_img').prop('files')[0];
        var username = $("#username").text();
        var src = $('#main_pic').prop('src').split('/');
        var oldImg = src[src.length - 1];
        // var oldImg = $('#main_pic').prop('src');

        var form_data = new FormData();
        form_data.append('profile', profile);
        form_data.append('username', username);
        form_data.append('oldImg', oldImg);

        $.ajax({
            type: "post",
            url: 'profile/changePhoto',
            data: form_data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            processData: false,
            contentType: false,
            cache: false,
            success: function(data) {
                // console.log("post login. [ " + data.status + "/" + data.message + " ]");
                // window.location = "login";
                $(".loader").hide();
                $('#photoModal').modal('hide');
                if (data.status == true) {
                    Swal.fire({
                        icon: 'success',
                        title: 'เปลี่ยนภาพโปรไฟล์สำเร็จ',
                        allowOutsideClick: false,
                        focusConfirm: true,
                        confirmButtonText: 'ตกลง',
                    }).then((result) => {
                        if (result.value) {
                            $(".loader").show();
                            window.location = "profile";
                        }
                    })
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'คำเตือน',
                        text: JSON.stringify(data.message),
                    });
                }
            },
        });
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
        // Add the `invalid-feedback` class to the error element
        error.addClass("invalid-feedback");

        // Add `has-feedback` class to the parent div.form-group
        // in order to add icons to inputs
        // element.parents(".col-sm-5").addClass("has-feedback");

        if (element.prop("type") === "checkbox") {
            error.insertAfter(element).addClass("invalid-feedback");
        } else {
            error.insertAfter(element);
        }

        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            element = $("#select2-" + elem.attr("id") + "-container").parent();
            error.insertAfter(element).addClass("invalid-feedback");
        } else {
            error.insertAfter(element);
        }

        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if (!element.next("span")[0]) {
            $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                .insertAfter(element);
        }
    },
    success: function(label, element) {
        // Add the span element, if doesn't exists, and apply the icon classes to it.
        // console.log(element);
        $(element).addClass("is-valid");
        if (!$(element).next("span")[0]) {
            $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter(
                $(element));
        }
    },
    highlight: function(element, errorClass, validClass) {
        // $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
        // $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().addClass("is-invalid");
        } else {
            elem.addClass("is-invalid");
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        // $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
        // $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().removeClass("is-invalid");
        } else {
            elem.removeClass("is-invalid");
        }
    }
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.back.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\km-web\resources\views/backOffice/profile.blade.php ENDPATH**/ ?>