@props([
    'title' => 'Block Title',
    'items' => [
        ['value' => 'item1', 'icon' => '📍', 'label' => 'Item 1'],
    ],
    'gridColumns' => [
        'default' => 5,
        'tablet' => 3,
        'mobile' => 2
    ],
    'initiallyOpen' => false,
    'componentId' => null,
    'disabled' => false,
    'selected' => [],
    'seq' => 0
])

@php
    $uniqueId = $componentId ?? 'diary-block-' . uniqid();
@endphp

<div id="{{ $uniqueId }}-container" class="moodDiary-container {{$seq === 1 ? 'rounded-up' : ''}} {{$seq === -1 ? 'rounded-down' : ''}}" data-diary-container="{{ $uniqueId }}">
    <div id="{{ $uniqueId }}-header" class="moodDiary-header">
        <div class="moodDiary-title">{{ $title }}</div>
        <div class="moodDiary-arrow"></div>
    </div>
    <div class="moodDiary-content {{ $initiallyOpen ? 'open' : '' }}">
        <div class="moodDiary-grid">
            @foreach($items as $item)
                <div class="moodDiary-option {{ in_array($item['value'], $selected) ? 'selected' : '' }}" id="{{ $uniqueId }}-option" data-item="{{ $item['value'] }}">
                    <div class="moodDiary-icon">{{ $item['icon'] }}</div>
                    <div class="moodDiary-label">{{ $item['label'] }}</div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="moodDiary-values">
        @foreach($selected as $item)
            <input type="hidden" name="diary[{{ $uniqueId }}][]" value="{{ $item }}">
        @endforeach
    </div>
</div>

<script>
$(document).ready(function() {
    const disabled = @json($disabled);
    $('#{{ $uniqueId }}-header').on('click', function() {
        const containerId = $(this).closest('.moodDiary-container').attr('id');
        $('#' + containerId + ' .moodDiary-content').toggleClass('open');
        $('#' + containerId + ' .moodDiary-arrow').toggleClass('open');
    });

    $('#{{ $uniqueId }}-container .moodDiary-option').on('click', function() {
        if (disabled) {
            return;
        }
        
        $(this).toggleClass('selected');
        
        const container = $(this).closest('.moodDiary-container');
        const containerId = container.data('diary-container');
        
        const selectedItems = container.find('.moodDiary-option.selected').map(function() {
            return $(this).data('item');
        }).get();
        
        container.find('.moodDiary-values').html(
            selectedItems.map(item => 
                `<input type="hidden" name="diary[${containerId}][]" value="${item}">`
            ).join('')
        );
    });
});
</script>

<style>
    .moodDiary-container {
        font-family: system-ui, -apple-system, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
        background-color: #f3f3f3;

        border: 1px solid #c7c7c7;
        border-bottom: 0;
    }

    .moodDiary-container.rounded-up {
        border: 1px solid #c7c7c7;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

    .moodDiary-container.rounded-down {
        border: 1px solid #c7c7c7;
        border-radius: 0 0 8px 8px;   
    }

    .moodDiary-header {
        padding: 16px 24px;
        cursor: pointer !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
    }

    .moodDiary-title {
        color: #2c3e50;
        font-weight: 500;
    }

    .moodDiary-arrow {
        transition: transform 0.2s ease;
        background: url('https://medoblako.ru/newdesign/img/continue-arrow_black.svg') no-repeat center center;
        background-size: contain;
        width: 24px;
        height: 24px;
    }

    .moodDiary-arrow.open {
        transform: rotate(90deg);
    }

    .moodDiary-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .moodDiary-content.open {
        max-height: 1000px;
    }

    .moodDiary-grid {
        display: grid;
        grid-template-columns: repeat({{ $gridColumns['default'] }}, 1fr);
        gap: 16px;
        padding: 15px 24px;
    }

    @media (max-width: 768px) {
        .moodDiary-grid {
            grid-template-columns: repeat({{ $gridColumns['tablet'] }}, 1fr);
        }
    }

    @media (max-width: 480px) {
        .moodDiary-grid {
            grid-template-columns: repeat({{ $gridColumns['mobile'] }}, 1fr);
            gap: 12px;
            padding: 0 16px 16px;
        }
    }

    .moodDiary-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 12px;
        border-radius: 12px;
        background: white;
        transition: all 0.2s ease;
    }

    .moodDiary-option:hover {
        transform: scale(1.05);
        border-color: #4CAF50;
    }

    .moodDiary-option.selected {
        background-color: #4CAF50;
        border-color: #4CAF50;
        color: white;
    }

    .moodDiary-icon {
        width: 32px;
        height: 32px;
        background: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .selected .moodDiary-icon {
        background: white;
    }

    .moodDiary-label {
        font-size: 14px;
        text-align: center;
        line-height: 1.2;
    }
</style>