@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_detiles.png') }}');">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="order_summay p-0">
                            <h2 class="pro_duct_title">My Profile</h2>
                            <h3 class="pro_duct_title">Basic info</h3>
                        </div>
                        <div class="row">
                            <div class="col-lg-2 col-md-2 col-sm-12 col-12">
                                <div class="checkout_product_user_info" id="photo">
                                    <div class="upload_profile">
                                        <img src="{{ $user->employee_profile_image ? asset('storage/profile_image/' . $user->employee_profile_image) : asset('assets/images/user_profile.png') }}"
                                            class="upload_pic" id="userImageShow">
                                    </div>
                                    <div class="rs__new_upload_img">
                                        <input type="file" class="form-control" name="profile_image" id="profile_image"
                                            accept="image/png, image/jpeg, image/jpg">
                                        <span><i class="fa-solid fa-cloud-arrow-up me-2"></i> Upload</span>
                                        <input type="hidden" id="userData" name="userData">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-10 col-md-10 col-sm-12 col-12">
                                <div class="checkout_product_user_info">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label">Employee Name</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->employee_name ?? '' }}" disabled>
                                            </div>
                                        </div>

                                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Employee Code</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->employee_code ?? '' }}" disabled>
                                            </div>
                                        </div>

                                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Position Code</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->position_code ?? '' }}" disabled>
                                            </div>
                                        </div>

                                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Designation</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->designation ?? '' }}" disabled>
                                            </div>
                                        </div>

                                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Zone</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->employee_state ?? '' }}" disabled>
                                            </div>
                                        </div>

                                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">HQ</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->employee_hq ?? '' }}" disabled>
                                            </div>
                                        </div>

                                        <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Area</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $user->employee_address ?? '' }}" disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="order_summay p-0">
                                    <h2 class="pro_duct_title">Card Details</h2>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="checkout_box">
                                    <div class="order_summay">
                                        <div class="row">
                                            <div class="col-auto me-auto">
                                                <h2 class="pro_duct_title">Own Card Details</h2>
                                            </div>
                                            <div class="col-auto">
                                                <h5 class="">My Balance
                                                    <img src="{{ asset('assets/images/coin.png') }}">
                                                    {{ Auth::user()->total_points ?? 0 }}
                                                </h5>
                                            </div>
                                        </div>

                                        <div class="red_card mb-0">
                                            <img src="{{ asset('assets/images/card-coin.png') }}" class="card_coin">
                                            <div class="card_logo">
                                                <img src="{{ asset('assets/images/logo.png') }}">
                                            </div>
                                            <ul>
                                                @php
                                                    $cardNumber = $cardDetails['card_number'] ?? '';
                                                    $maskedCardNumber = $cardNumber
                                                        ? str_repeat('*', strlen($cardNumber) - 4) .
                                                            substr($cardNumber, -4)
                                                        : '**** **** **** ****';
                                                    $formattedCardNumber = trim(chunk_split($maskedCardNumber, 4, ' '));

                                                    $cardNumber = preg_replace('/\D/', '', $cardDetails['card_number']);
                                                    $cardNumber = trim(chunk_split($cardNumber, 4, ' '));
                                                @endphp
                                                <li>
                                                    <img src="{{ asset('assets/images/card.png') }}">
                                                    <span class="masked">{{ $formattedCardNumber }}</span>
                                                    <span
                                                        class="full d-none">{{ $cardNumber ?: '0000 0000 0000 0000' }}</span>
                                                    <a href="javascript:void(0);" class="text-dark ms-2 toggle-card">
                                                        <i class="fa-solid fa-eye"></i>
                                                    </a>
                                                </li>

                                                <li>
                                                    Expiry date :
                                                    {{ !empty($cardDetails['card_date']) ? date('m/y', strtotime($cardDetails['card_date'])) : 'MM/YY' }}
                                                </li>
                                                <li>
                                                    <img src="{{ asset('assets/images/card-name.png') }}">
                                                    {{ Auth::user()->employee_name ?? 'N/A' }}
                                                </li>
                                                <li>
                                                    <img src="{{ asset('assets/images/number.png') }}">
                                                    {{ Auth::user()->employee_code ?? 'N/A' }}
                                                </li>
                                            </ul>

                                            <div class="balance_row" style="background: #ffe5e7;">
                                                <h5 style="opacity: 0;">My Balance</h5>
                                                <span style="opacity: 0;">
                                                    <img src="{{ asset('assets/images/coin.png') }}">
                                                    {{ Auth::user()->total_points ?? 0 }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Family Card Details --}}
                            @if ($user->employee_relation)
                                <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                                    <div class="checkout_box">
                                        <div class="order_summay">
                                            <h2 class="pro_duct_title">
                                                Family Card Details : ({{ Auth::user()->employee_relation ?? 'Relation' }})
                                            </h2>
                                            <div class="red_card mb-0">
                                                <img src="{{ asset('assets/images/card-coin.png') }}" class="card_coin">
                                                <div class="card_logo">
                                                    <img src="{{ asset('assets/images/logo.png') }}">
                                                </div>
                                                <ul>
                                                    <li>
                                                        <img src="{{ asset('assets/images/card.png') }}">
                                                        <span class="masked">{{ $formattedCardNumber }}</span>
                                                        <span
                                                            class="full d-none">{{ $cardNumber ?: '1234 5678 9012 3456' }}</span>
                                                        <a href="javascript:void(0);" class="text-dark ms-2 toggle-card">
                                                            <i class="fa-solid fa-eye"></i>
                                                        </a>
                                                    </li>

                                                    <li>
                                                        Expiry date :
                                                        {{ !empty($cardDetails['card_date']) ? date('m/y', strtotime($cardDetails['card_date'])) : 'MM/YY' }}
                                                    </li>
                                                    <li>
                                                        <img src="{{ asset('assets/images/card-name.png') }}">
                                                        {{ Auth::user()->employee_relation_name ?? 'N/A' }}
                                                    </li>
                                                    <li>
                                                        <img src="{{ asset('assets/images/number.png') }}">
                                                        {{ Auth::user()->employee_code ?? 'N/A' }}
                                                    </li>
                                                </ul>
                                                <div class="balance_row" style="background: #ffe5e7;">
                                                    <h5 style="opacity: 0;">My Balance</h5>
                                                    <span style="opacity: 0;">
                                                        <img src="{{ asset('assets/images/coin.png') }}">
                                                        {{ Auth::user()->total_points ?? 0 }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div> <!--  wrapper end  -->
        <!-- //wrapper-end -->

        <!-- Modal -->
        <div id="uploadimageModal" class="modal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false"
            data-aos="fade-in">
            <div class="modal-dialog modal-dialog-centered modal-md ">
                <div class="modal-content ">
                    <div class="d-flex justify-content-end border-bottom-0 py-3 px-3">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            id="cropModalClose"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <div class="col-md-12 text-center">
                                <div id="image_demo" class="responsive"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <div class="d-lg-flex d-md-flex justify-content-center">
                            <button class="btn btn-default imgRotate me-3 mt-3 p-3" data-rotate="-90" type="submit"><i
                                    class="fas fa-undo" aria-hidden="true"></i></button>
                            <button class="btn btn-default imgRotate me-3 mt-3 p-3" data-rotate="90" type="submit"><i
                                    class="fas fa-redo" aria-hidden="true"></i></button>
                            <button class="btn btn-default   mt-3 crop_image p-3">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('js')
        <script>
            @if (Auth::user())
                var carts = @json($carts);
                var orders = carts.map(function(cart) {
                    return {
                        product_id: cart.product_id,
                        product_quantity: cart.quantity,
                        product_size: cart.size
                    };
                });
                localStorage.setItem('orders', JSON.stringify(orders));

                var totalOrders = orders.length;
                $('#cart_items').html(totalOrders);
            @endif
        </script>

        <script>
            $(document).ready(function() {
                $('.toggle-card').click(function() {
                    var $li = $(this).closest('li');
                    $li.find('.masked').toggleClass('d-none');
                    $li.find('.full').toggleClass('d-none');

                    var $icon = $(this).find('i');
                    $icon.toggleClass('fa-eye fa-eye-slash');
                });
            });
        </script>


        <script>
            let hasCroppedImage = false;

            // Crop Image
            boundaryWidth = 300;
            boundaryHeight = 300;

            viewportWidth = 200;
            viewportHeight = 200;

            $image_crop = $('#image_demo').croppie({
                viewport: {
                    width: viewportWidth,
                    height: viewportHeight,
                    type: 'square',
                },
                boundary: {
                    height: boundaryHeight,
                    width: boundaryWidth,
                },
                showZoomer: true,
                enableExif: true,
                enableOrientation: true
            });

            $(document).on('click', '.imgRotate', function(e) {
                e.preventDefault();
                const angle = parseInt($(this).data('rotate'));
                $image_crop.croppie('rotate', angle);
            });


            $(document).on('change', '#profile_image', function() {
                handleImageInput('profile_image', 'userImageShow', 'userData', 'profile_image',
                    "{{ route('userImage.crop') }}");
            });


            function handleImageInput(fileInputId, previewImgId, hiddenInputId, folderName, cropRoute) {
                const fileInput = $(`#${fileInputId}`)[0];
                const file = fileInput.files[0];
                const ext = file.name.split('.').pop().toLowerCase();

                if (!['png', 'jpg', 'jpeg'].includes(ext)) {
                    $.notify('Invalid file type! Only PNG, JPG, and JPEG are allowed.', "error");
                    $(`#${previewImgId}`).attr('src', '{{ asset('assets/images/user_profile.png') }}');
                    $(`#${hiddenInputId}`).val('');
                    fileInput.value = "";
                    return false;
                }

                if (file.size > 5 * 1024 * 1024) {
                    $.notify('File size must be less than or equal to 5 MB.', "error");
                    $(`#${previewImgId}`).attr('src', '{{ asset('assets/images/user_profile.png') }}');
                    $(`#${hiddenInputId}`).val('');
                    fileInput.value = "";
                    return false;
                }

                const reader = new FileReader();
                reader.onload = function(event) {
                    $image_crop.croppie('bind', {
                        url: event.target.result
                    }).then(function() {
                        $('#uploadimageModal').modal('show');
                        $('.crop_image').off('click').on('click', function() {
                            cropAndUploadImage(cropRoute, previewImgId, hiddenInputId, folderName);
                        });
                        hasCroppedImage = false;
                    });
                };
                reader.readAsDataURL(file);
                $('#uploadimageModal').modal('show');

            }


            function cropAndUploadImage(route, previewImgId, hiddenInputId, folderName) {
                $(".crop_image").html('Uploading.....').attr('disabled', true);
                $('.loader').fadeIn(500);
                var croppieResultHeight = '1000';
                var croppieResultWidth = '1000';

                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: {
                        height: croppieResultHeight,
                        width: croppieResultWidth
                    },
                }).then(function(base64) {
                    $.ajax({
                        url: route,
                        type: "POST",
                        data: {
                            image: base64,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            $('.loader').fadeOut(500);
                            hasCroppedImage = true;

                            let parsed = JSON.parse(response);
                            $('#uploadimageModal').modal('hide');
                            let imagePath = `/storage/${folderName}/${parsed}`;
                            $(`#${previewImgId}`).attr('src', imagePath);
                            $(`#${hiddenInputId}`).val(parsed);

                            $(".crop_image").html('Save').attr('disabled', false);
                            $.notify('Image cropped successfully!', "success");
                        },
                        error: function(xhr) {
                            $('.loader').fadeOut();
                            $(".crop_image").html('Save').attr('disabled', false);
                            const msg = xhr.responseJSON?.error ||
                                'An error occurred while processing your request.';
                            $.notify(msg, "error");
                        }
                    });
                });
            }


            $('#cropModalClose').click(function() {
                if (!hasCroppedImage) {
                    @if (isset($data))
                        $('#userImageShow').attr('src', '{{ asset('storage/profile_image/') }}/' +
                            "{{ $data }}");
                    @else
                        $('#userImageShow').attr('src', '{{ asset('assets/images/user_profile.png') }}');
                    @endif
                    $('#profile_image').val('');
                    $.notify('Image crop is required before upload.', "error");
                }
            });
        </script>
    @endsection