@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Profile'])
    <div class="card shadow-lg mx-4 card-profile">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        {{-- photo profile --}}
                        <img src="{{ asset('/storage' . '/' . $user_login->image) }}" alt="profile_image"
                            class="w-100 border-radius-lg shadow-sm">
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 class="mb-1">
                            {{ $user_login->firstname }}
                        </h5>
                        <p class="mb-0 font-weight-bold text-sm">
                            {{ session('username') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md">
                <form role="form" method="post" action="{{ URL::to('profile/update') }}" id="profile-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Informasi Akun</p>
                            <hr class="horizontal dark mt-0">
                            {{-- alert --}}
                            @include('components.alert')
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Username</label>

                                        <p class="px-2"><label for="example-text-input"
                                                class="form-control-label text-primary">{{ session('username') }}</label>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Email address</label>
                                        <input class="form-control" type="email" name="profile_email"
                                            value="{{ $user_login->email }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">First name</label>
                                        <input class="form-control" type="text" name="profile_firstname"
                                            value="{{ $user_login->firstname }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Last name</label>
                                        <input class="form-control" type="text" name="profile_lastname"
                                            value="{{ $user_login->lastname }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="col-sm-auto">
                                        <div class="position-relative">
                                            <div>
                                                <label for="file-input" style="left: -5px !important;" id="ProfileImageedit"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="" aria-hidden="true"
                                                        data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                                                    <span class="sr-only">Edit Image</span>
                                                </label>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('/storage' . '/' . $user_login->image) }}"
                                                        id="preview" alt="image" data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        class="w-30 border-radius-lg shadow-sm">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" value="{{ $user_login->image }}"
                                        id="ProfileImage" name="profile_image" style="display: none;">
                                    <p class='text-primary text-xs pt-2 mb-0'>Maksimal Size :
                                        <b>2048 KB</b>
                                    </p>
                                    <p class='text-primary text-xs pt-1'>Format Image :
                                        <b>PNG,JPG,JPEG</b>
                                    </p>
                                    <script>
                                        ProfileImage.onchange = evt => {
                                            const [file] = ProfileImage.files;
                                            if (file) {
                                                // Open crop dialog instead of direct preview
                                                openProfileCropDialog(file);
                                            }
                                        }
                                        $('#ProfileImageedit').click(function() {
                                            $('input[name="profile_image"]').click();
                                        });
                                    </script>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer">
                            <div class="d-flex align-items-center">
                                <button class="btn btn-primary btn-sm"
                                    onclick="event.preventDefault(); document.getElementById('profile-form').submit();">Simpan</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Avatar Crop Modal --}}
    <div class="modal fade" id="profileCropModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true"
        style="z-index: 10500;">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 440px;">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 16px; overflow: hidden;">
                <div class="modal-header border-0 py-3 px-4" style="background: #e8f6f6;">
                    <h6 class="modal-title mb-0" style="color: #008080;">Edit Foto</h6>
                    <button type="button" class="btn-close" id="btnProfileCropCancel"></button>
                </div>
                <div class="modal-body p-0" style="background: #f7fbfb;">
                    <div class="d-flex justify-content-center align-items-center"
                        style="height: 360px; overflow: hidden;">
                        <img id="profileCropImage" src="" style="display: block; max-width: 100%;">
                    </div>
                </div>
                <div class="modal-footer border-0 py-3 px-4 d-flex justify-content-between" style="background: #e8f6f6;">
                    <button type="button" class="btn btn-sm btn-link text-decoration-none" style="color: #008080;"
                        id="btnProfileCropReset">
                        <i class="fas fa-undo me-1"></i> Reset
                    </button>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm px-3" id="btnProfileCropCancelBottom"
                            style="background: transparent; color: #6c757d; border: none;">Batal</button>
                        <button type="button" class="btn btn-sm px-4 text-white" id="btnProfileCropApply"
                            style="background: #008080; border-radius: 8px;">Terapkan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Cropper.js --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
    <style>
        #profileCropModal .cropper-view-box {
            border-radius: 50%;
            outline: none;
            box-shadow: 0 0 0 1px rgba(0, 128, 128, 0.45);
        }

        #profileCropModal .cropper-face {
            border-radius: 50%;
            background-color: transparent;
        }

        #profileCropModal .cropper-dashed,
        #profileCropModal .cropper-line,
        #profileCropModal .cropper-point {
            display: none !important;
        }

        #profileCropModal .cropper-modal {
            background: rgba(0, 128, 128, 0.22);
        }

        #profileCropModal .cropper-crop-box {
            border-radius: 50%;
        }
    </style>
    <script>
        let _pageCropper = null;

        function openProfileCropDialog(file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const imgEl = document.getElementById('profileCropImage');
                imgEl.src = e.target.result;

                const cropModalEl = document.getElementById('profileCropModal');
                const cropModal = new bootstrap.Modal(cropModalEl, {
                    backdrop: 'static'
                });
                cropModal.show();

                $(cropModalEl).off('shown.bs.modal.crop').on('shown.bs.modal.crop', function() {
                    if (_pageCropper) {
                        _pageCropper.destroy();
                        _pageCropper = null;
                    }
                    _pageCropper = new Cropper(imgEl, {
                        aspectRatio: 1,
                        viewMode: 1,
                        dragMode: 'move',
                        cropBoxResizable: false,
                        cropBoxMovable: false,
                        guides: false,
                        center: false,
                        highlight: false,
                        background: false,
                        autoCropArea: 0.85,
                        toggleDragModeOnDblclick: false,
                    });
                });
            };
            reader.readAsDataURL(file);
        }

        function closeCropDialog() {
            if (_pageCropper) {
                _pageCropper.destroy();
                _pageCropper = null;
            }
            const cropModal = bootstrap.Modal.getInstance(document.getElementById('profileCropModal'));
            if (cropModal) cropModal.hide();
        }

        $(function() {
            // Cancel
            $('#btnProfileCropCancel, #btnProfileCropCancelBottom').on('click', function() {
                closeCropDialog();
                // Reset file input
                document.getElementById('ProfileImage').value = '';
            });

            // Reset crop
            $('#btnProfileCropReset').on('click', function() {
                if (_pageCropper) _pageCropper.reset();
            });

            // Apply crop
            $('#btnProfileCropApply').on('click', function() {
                if (!_pageCropper) return;

                const canvas = _pageCropper.getCroppedCanvas({
                    width: 512,
                    height: 512,
                    imageSmoothingQuality: 'high',
                });

                // Show cropped preview
                document.getElementById('preview').src = canvas.toDataURL('image/png');

                // Convert canvas to File and set on file input via DataTransfer
                canvas.toBlob(function(blob) {
                    if (!blob) return;
                    const croppedFile = new File([blob], 'avatar.png', {
                        type: 'image/png'
                    });
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(croppedFile);
                    document.getElementById('ProfileImage').files = dataTransfer.files;
                    closeCropDialog();
                }, 'image/png', 0.95);
            });
        });
    </script>
@endsection