@extends('layouts.location_app')
@section('title', 'Feedback')
@section('content')

<style>
.feedback-container {
    background: #fafbfc;
    min-height: 100vh;
    padding: 2rem 0;
    width: 100%;
}

.feedback-header {
    background: white;
    color: #2c3e50;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.feedback-header h2 {
    margin: 0;
    font-weight: 500;
    font-size: 1.75rem;
    color: #2c3e50;
}

.feedback-header p {
    margin: 0.5rem 0 0 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.search-container {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #f8f9fa;
}

.search-input:focus {
    outline: none;
    border-color: #5cab9a;
    background: white;
    box-shadow: 0 0 0 3px rgba(92, 171, 154, 0.1);
}

.search-input::placeholder {
    color: #adb5bd;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 1rem;
}

.search-wrapper {
    position: relative;
}

.task-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    background: white;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.task-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #5cab9a;
}

.task-card.hidden {
    display: none;
}

.location-info {
    margin-bottom: 1.5rem;
}

.location-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.feedback-text {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.feedback-date {
    color: #5cab9a;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feedback-date i {
    font-size: 0.875rem;
}

.submission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #5cab9a;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: white;
    color: #5cab9a;
    transition: all 0.2s ease;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.primary-btn:hover {
    background: #5cab9a;
    color: white;
    text-decoration: none;
}

.primary-btn i {
    font-size: 0.875rem;
}

.submission-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.submission-group-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.case-item:hover {
    border-color: #5cab9a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.case-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.case-id {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
}

.case-date {
    font-size: 0.8rem;
    color: #6c757d;
}

.case-actions {
    display: flex;
    gap: 0.5rem;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.empty-state i {
    font-size: 2.5rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.empty-state h4 {
    color: #495057;
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin: 0;
    color: #6c757d;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    display: none;
}

.no-results i {
    font-size: 2.5rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.no-results h4 {
    color: #495057;
    margin-bottom: 0.5rem;
}

.no-results p {
    margin: 0;
    color: #6c757d;
}

@media (max-width: 768px) {
    .feedback-container {
        padding: 1rem 0;
    }
    
    .feedback-header {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .feedback-header h2 {
        font-size: 1.5rem;
    }
    
    .search-container {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .task-card {
        padding: 1rem;
    }
    
    .submission-actions {
        justify-content: flex-start;
    }
}

</style>

<div class="feedback-container">
    <div class="container-fluid">
        <div class="feedback-header text-center">
            <h2>Feedback</h2>
            <p>Review and manage feedback submissions</p>
        </div>
        
        <div class="d-flex flex-column gap-2 justify-content-between align-items-center mx-auto w-100" style="max-width: 85%;">
            <div class="search-container w-100">
                <div class="search-wrapper w-100" style="max-width: 100%;">
                    <i class="fa fa-search search-icon"></i>
                    <input type="text" id="feedbackSearch" class="search-input" placeholder="Search feedback by location name, feedback text, or case ID..." style="padding-left: 2.5rem;">
                </div>
            </div>
            
            @if($feedbacks->count() > 0)
                @foreach ($feedbacks as $feedback)
                    @php
                        $cases = $feedback->cases();
                        $involvedCases = collect();
                        $otherCases = collect();
                        
                        foreach ($cases as $case) {
                            $involvedLocations = $case->link_case_with_form?->getInvolvedLocations();
                            $locationInvolved = $involvedLocations && $involvedLocations->contains('id', $location->id);
                            
                            if ($locationInvolved) {
                                $involvedCases->push($case);
                            } else {
                                $otherCases->push($case);
                            }
                        }
                        
                        // Create searchable text
                        $searchableText = strtolower($location->trading_name . ' ' . strip_tags($feedback->feedback_location));
                        if ($involvedCases->count() > 0) {
                            $searchableText .= ' ' . $involvedCases->pluck('id')->implode(' ');
                        }
                        if ($otherCases->count() > 0) {
                            $searchableText .= ' ' . $otherCases->pluck('id')->implode(' ');
                        }
                    @endphp

                    <div class="task-card w-100" data-searchable="{{ $searchableText }}">
                        <div class="location-info">
                            <div class="location-name">{{$location->trading_name}}</div>
                            <div class="feedback-text">{!! $feedback->feedback_location !!}</div>
                            <div class="feedback-date">
                                <i class="fas fa-calendar-alt"></i>
                                Feedback Date: {{ $feedback->created_at ? $feedback->created_at->format('M d, Y \a\t g:i A') : 'N/A' }}
                            </div>
                        </div>

                        @if($involvedCases->count() > 0)
                            <div class="submission-group">
                                <div class="submission-group-title">Site submission ({{ $involvedCases->count() }})</div>
                                @foreach ($involvedCases as $case)
                                    <div class="case-item">
                                        <div class="case-info">
                                            <div class="case-id">Case ID: {{ $case->id ?? 'N/A' }}</div>
                                            <div class="case-date">Created: {{ $case->created_at ? $case->created_at->format('M d, Y') : 'N/A' }}</div>
                                        </div>
                                        <div class="case-actions">
                                            <a href="{{ route('be_spoke_forms.be_spoke_form.records_view', ['form_id' => $case->link_case_with_form->id]) }}"
                                                class="primary-btn">
                                                <i class="fas fa-eye"></i>
                                                View
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if($otherCases->count() > 0)
                            <div class="submission-group mt-1">
                                <div class="submission-group-title">Other Cases Submissions ({{ $otherCases->count() }})</div>
                                @foreach ($otherCases as $case)
                                    <div class="case-item">
                                        <div class="case-info">
                                            <div class="case-id">Case ID: {{ $case->id ?? 'N/A' }}</div>
                                            <div class="case-date">Created: {{ $case->created_at ? $case->created_at->format('M d, Y') : 'N/A' }}</div>
                                        </div>
                                        <div class="case-actions">
                                            <a href="{{route('be_spoke_forms.be_spoke_form.records_view_submission', ['form_id' => $case->link_case_with_form->id])}}" 
                                               class="primary-btn">
                                                <i class="fas fa-eye"></i>
                                                View
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endforeach
            @else
                <div class="empty-state">
                    <i class="fas fa-comment-slash"></i>
                    <h4>No feedback available</h4>
                    <p>There are currently no feedback submissions to display.</p>
                </div>
            @endif
            
            <div class="no-results w-100">
                <i class="fas fa-search"></i>
                <h4>No results found</h4>
                <p>Try adjusting your search terms or browse all feedback.</p>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#feedbackSearch').on('input', function() {
        var searchTerm = $(this).val().toLowerCase().trim();
        var hasVisibleCards = false;
        
        if (searchTerm === '') {
            $('.task-card').removeClass('hidden').show();
            $('.no-results').hide();
            return;
        }
        
        $('.task-card').each(function() {
            var searchableText = $(this).data('searchable');
            if (searchableText && searchableText.includes(searchTerm)) {
                $(this).removeClass('hidden').show();
                hasVisibleCards = true;
            } else {
                $(this).addClass('hidden').hide();
            }
        });
        
        if (hasVisibleCards) {
            $('.no-results').hide();
        } else {
            $('.no-results').show();
        }
    });
    
    // Clear search when pressing Escape key
    $('#feedbackSearch').on('keydown', function(e) {
        if (e.key === 'Escape') {
            $(this).val('');
            $(this).trigger('input');
        }
    });
});
</script>

@if(Session::has('success'))
<script>
    alertify.defaults.notifier.delay = 10;
    alertify.success("{{ Session::get('success') }}");
</script>
@endif

@if(Session::has('error'))
<script>
    alertify.defaults.notifier.delay = 10;
    alertify.error("{{ Session::get('error') }}");
</script>
@endif

@endsection