@props([
    'name' => 'avatar',
    'label' => 'Foto de Perfil',
    'required' => false,
    'defaultFile' => '',
    'width' => 300,
    'height' => 300,
])

@php
    $inputId = 'cropper_' . Str::random(8);
    $modalId = 'modal_' . Str::random(8);
@endphp

@pushonce('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" />
    <style>
        .cropper-container-wrapper {
            max-height: 400px;
            overflow: hidden;
        }
        .preview-avatar-cropper {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #ddd;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .preview-avatar-cropper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
@endpushonce

<div class="form-group avatar-cropper-wrapper">
    @if($label)
        <label class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
            {{ $label }}
            @if($required) <span class="text-danger">*</span> @endif
        </label>
    @endif

    <div class="d-flex align-items-center">
        {{-- Preview visual --}}
        <div class="preview-avatar-cropper mr-3" onclick="document.getElementById('{{ $inputId }}').click()">
            <img id="view_{{ $inputId }}" src="{{ $defaultFile ?: 'https://www.w3schools.com/howto/img_avatar.png' }}" alt="Avatar Preview">
        </div>

        <div>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="document.getElementById('{{ $inputId }}').click()">
                <i class="fas fa-upload mr-1"></i> Seleccionar Imagen
            </button>
            <p class="text-muted small mt-1 mb-0">Recomendado: {{ $width }}x{{ $height }} px</p>
        </div>
    </div>

    {{-- Input real (File) --}}
    <input type="file" id="{{ $inputId }}" class="d-none" accept="image/*">

    {{-- Input oculto que enviará el Base64 al servidor --}}
    <input type="hidden" name="{{ $name }}" id="hidden_{{ $inputId }}" {{ $required && !$defaultFile ? 'required' : '' }}>

    {{-- Modal de Cropping --}}
    <div class="modal fade" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-crop-alt mr-2"></i>Recortar Imagen</h5>
                </div>
                <div class="modal-body p-0">
                    <div class="cropper-container-wrapper">
                        <img id="image_{{ $modalId }}" style="max-width: 100%;">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="crop_{{ $modalId }}">Recortar y Guardar</button>
                </div>
            </div>
        </div>
    </div>
</div>

@pushonce('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
@endpushonce

@push('js')
<script>
$(function() {
    let $input = $('#{{ $inputId }}');
    let $modal = $('#{{ $modalId }}');
    let $image = document.getElementById('image_{{ $modalId }}');
    let cropper;

    $input.on('change', function(e) {
        let files = e.target.files;
        let done = function(url) {
            $input.val('');
            $image.src = url;
            $modal.modal('show');
        };

        if (files && files.length > 0) {
            let reader = new FileReader();
            reader.onload = function(e) {
                done(reader.result);
            };
            reader.readAsDataURL(files[0]);
        }
    });

    $modal.on('shown.bs.modal', function() {
        cropper = new Cropper($image, {
            aspectRatio: {{ $width / $height }},
            viewMode: 1,
            autoCropArea: 1,
        });
    }).on('hidden.bs.modal', function() {
        cropper.destroy();
        cropper = null;
    });

    $('#crop_{{ $modalId }}').on('click', function() {
        let canvas = cropper.getCroppedCanvas({
            width: {{ $width }},
            height: {{ $height }},
        });

        canvas.toBlob(function(blob) {
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                let base64data = reader.result;
                $('#hidden_{{ $inputId }}').val(base64data);
                $('#view_{{ $inputId }}').attr('src', base64data);
                $modal.modal('hide');
            }
        });
    });
});
</script>
@endpush