{{-- Phase 1b: Memos Tab --}}
<div class="project-box p-3 mb-3">
    <div class="row">
        {{-- Add Memo Form --}}
        <div class="col-md-4">
            <div class="project-box p-3 mb-3">
                <h6 class="fw-semibold mb-3">Add New Memo</h6>
                <form id="add-memo-form" data-url="{{ route('my-merchants.memos.store', $data->id) }}">
                    @csrf
                    <div class="project-form w-100 mb-3">
                        <label for="memo_type">Memo Type <span class="text-danger">*</span></label>
                        <select name="memo_type" id="memo_type" class="form-control select2 no-search" required>
                            @foreach($memoTypes as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="project-form w-100 mb-3">
                        <label for="memo_text">Memo Text <span class="text-danger">*</span></label>
                        <textarea name="memo_text" id="memo_text" class="form-control" rows="5" required placeholder="Enter memo..."></textarea>
                    </div>
                    <button type="submit" class="green-btn-inner waves-effect w-100">
                        <i class="bx bx-save me-1"></i> Save Memo
                    </button>
                </form>
            </div>
        </div>

        {{-- Memo List --}}
        <div class="col-md-8">
            {{-- Type filter tabs --}}
            <ul class="nav nav-pills nav-sm mb-3 gap-1" id="memoTypeTabs">
                <li class="nav-item">
                    <button class="nav-link active btn btn-sm" data-memo-filter="all">All</button>
                </li>
                @foreach($memoTypes as $key => $label)
                <li class="nav-item">
                    <button class="nav-link btn btn-sm" data-memo-filter="{{ $key }}">{{ $label }}</button>
                </li>
                @endforeach
            </ul>

            <div id="memo-list">
                @forelse($memos as $memo)
                <div class="card border mb-2 memo-card" data-memo-type="{{ $memo->memo_type }}">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                {!! $memo->memo_type_badge !!}
                                <span class="ms-2 text-muted small">
                                    <i class="bx bx-user me-1"></i>{{ $memo->user_name }}
                                </span>
                            </div>
                            <span class="text-muted small">
                                {{ $memo->created_at ? \App\Helpers\Helper::showdate($memo->created_at, true) : '—' }}
                            </span>
                        </div>
                        <p class="mb-0 text-dark">{{ $memo->memo_text }}</p>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-4" id="memo-empty-msg">
                    <i class="bx bx-message-alt-detail fs-3 d-block mb-2"></i>
                    No memos yet. Add the first one.
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
(function($){
    // Filter memo cards by type
    $(document).on('click', '[data-memo-filter]', function(){
        const filter = $(this).data('memo-filter');
        $('[data-memo-filter]').removeClass('active');
        $(this).addClass('active');
        if (filter === 'all') {
            $('.memo-card').show();
        } else {
            $('.memo-card').hide();
            $(`.memo-card[data-memo-type="${filter}"]`).show();
        }
    });

    // Submit new memo with validation
    $('#add-memo-form').on('submit', function(e){
        e.preventDefault();
        const $form = $(this);

        // Validate required fields using global form-validation functions
        var hasInvalid = false;
        $form.find(requiredSelector).each(function(){
            var $field = $(this);
            if (!validateField($field, $field.val())) {
                showRequiredTooltip($field, '');
                hasInvalid = true;
            } else {
                clearFieldStyling($field);
            }
        });
        if (hasInvalid) return;

        const url  = $form.data('url');
        const data = $form.serialize();
        $.post(url, data, function(res){
            if (res.status === 200 || res.status === 'success') {
                showSuccessToast('Memo saved successfully.');
                window.location.href = window.location.href.split('?')[0] + '?tab=memos';
            } else {
                showErrorToast(res.message || 'Error saving memo.');
            }
        }).fail(function(){
            showErrorToast('Failed to save memo. Please try again.');
        });
    });
})(jQuery);
</script>
@endpush