@php
    $currentPage = $sam_govs->currentPage();
    $rowNumberOffset = ($currentPage - 1) * $sam_govs->perPage();
@endphp
@foreach ($sam_govs as $index => $sam_gov)
    @php
        // $dom = new \DOMDocument();
        // @$dom->loadHTML($sam_gov->innerhtml);
        // $crawler = new \Symfony\Component\DomCrawler\Crawler($dom->saveHTML());
        // $history = $dom->getElementById('history');
        // $count = isset($history) ? $history->getElementsByTagName('li')->length - 1 : 0;
        $count = $sam_gov->innerhtml;
    @endphp
    <div style="display: flex;justify-content: space-between;" data-sam-id="{{ $sam_gov->id }}">
        <div>
            <span>ID: {{ $rowNumberOffset + $index + 1 }}</span>&nbsp;&nbsp;&nbsp;<span>Date:
                {{ \Carbon\Carbon::now()->timezone('America/Los_Angeles')->format('M d, Y g:i A') }}</span>
            <h5><a style="text-decoration: none;" target="_blank"
                    href="{{ route('sam-gov.view-html', $sam_gov->id) }}">{{ $sam_gov->subject_line }}</a>
            </h5>
            <h6><strong>Notice ID: {{ $sam_gov->Notice_ID }}</strong></h6>

            <div class="container mt-4">
                <div class="row">
                    <div class="col-4">
                        <div class="box">
                            <strong>Department/Ind.Agency</strong><br>{{ $sam_gov->Department }}
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box"><strong>Set
                                Aside</strong><br>{{ $sam_gov->Original_Set_Aside }}
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box"><strong>NAICS</strong><br>{{ $sam_gov->NAICS_Code }}
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box"><strong>Updated Date</strong><br>
                            {{ \Carbon\Carbon::parse($sam_gov->updated_date)->timezone('America/Los_Angeles')->format('M d, Y g:i A') }}
                            <strong>{{ $count > 0 ? '(' . $count . ')' : '' }}</strong>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box"><strong>Published Date</strong><br>
                            {{ $sam_gov->Published_Date ? \Carbon\Carbon::parse($sam_gov->Published_Date)->timezone('America/Los_Angeles')->format('M d, Y g:i A') : 'N/A' }}
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box"><strong>Due Date</strong><br>
                            {{ $sam_gov->Due_Date ? \Carbon\Carbon::parse($sam_gov->Due_Date)->timezone('America/Los_Angeles')->format('M d, Y g:i A') : 'N/A' }}
                        </div>
                    </div>

                    <div class="col-4">
                        <div class="box"><strong>Place of
                                Performance</strong><br>{{ $sam_gov->Place_of_Performance }}
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box"><strong>Notice
                                Type</strong><br>{{ $sam_gov->Contract_Opportunity_Type }}
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="box">
                            <strong>Sub-Tier</strong><br>
                            @php
                                // Check if sFub_tier exists and is not empty
                                if (!empty($sam_gov->subtier)) {
                                    echo $sam_gov->subtier;
                                } else {
                                    echo 'Sub-tier information not available.';
                                }
                            @endphp
                        </div>
                    </div>

                </div>
            </div>
            @php
                $textNode = $sam_gov->description;
                // Check if the string is not empty instead of counting
                if (!empty($textNode)) {
                    $text = $textNode; // No need for ->text() as it's already a string
    $trimmedText = mb_strlen($text) > 300 ? mb_substr($text, 0, 300) : $text;
} else {
    $trimmedText = 'No description available.';
                }
            @endphp

            <br>
            <p style="word-break: break-word;width: 95%;">{{ $trimmedText }}</p>

        </div>
        <div class="">
            {{-- Status Update Section --}}
            @if ($sam_gov->assignedUser && auth()->user()->id == $sam_gov->assignedUser->id)
                <form action="{{ route('sam-gov.status', $sam_gov->id) }}" method="POST" class="status-form">
                    @csrf
                    @method('PUT')
                    <select name="status" class="form-control mb-2 status-select"
                        style="background-color: {{ $sam_gov->status_color }}">
                        <option value="Select Status" {{ $sam_gov->status === 'Select Status' ? 'selected' : '' }}>
                            Select Status
                        </option>
                        <option value="Pending" {{ $sam_gov->status === 'Pending' ? 'selected' : '' }}>Pending</option>
                        <option value="Quote Requested" {{ $sam_gov->status === 'Quote Requested' ? 'selected' : '' }}>
                            Quote Requested
                        </option>
                        <option value="Quote Received" {{ $sam_gov->status === 'Quote Received' ? 'selected' : '' }}>
                            Quote Received
                        </option>
                        <option value="Waiting for Info"
                            {{ $sam_gov->status === 'Waiting for Info' ? 'selected' : '' }}>
                            Waiting for Info
                        </option>
                        <option value="Submitted" {{ $sam_gov->status === 'Submitted' ? 'selected' : '' }}>Submitted
                        </option>
                        <option value="Won" {{ $sam_gov->status === 'Won' ? 'selected' : '' }}>Won</option>
                        <option value="Lost" {{ $sam_gov->status === 'Lost' ? 'selected' : '' }}>Lost</option>
                    </select>
                </form>
            @else
                <select style="opacity: 0.7; color:black;" class="form-select" disabled>
                    <option value="Select Status" {{ $sam_gov->status === 'Select Status' ? 'selected' : '' }}>
                        Select Status
                    </option>
                    <option value="Pending" {{ $sam_gov->status === 'Pending' ? 'selected' : '' }}>Pending</option>
                    <option value="Quote Requested" {{ $sam_gov->status === 'Quote Requested' ? 'selected' : '' }}>
                        Quote Requested
                    </option>
                    <option value="Quote Received" {{ $sam_gov->status === 'Quote Received' ? 'selected' : '' }}>
                        Quote Received
                    </option>
                    <option value="Waiting for Info" {{ $sam_gov->status === 'Waiting for Info' ? 'selected' : '' }}>
                        Waiting for Info
                    </option>
                    <option value="Submitted" {{ $sam_gov->status === 'Submitted' ? 'selected' : '' }}>Submitted
                    </option>
                    <option value="Won" {{ $sam_gov->status === 'Won' ? 'selected' : '' }}>Won</option>
                    <option value="Lost" {{ $sam_gov->status === 'Lost' ? 'selected' : '' }}>Lost</option>
                </select>
            @endif

            {{-- Attachments Download --}}
            @if ($sam_gov->attachments)
                <a target="_blank" href="{{ url('download/' . $sam_gov->id) }}">
                    <button class="btn btn-primary btn-sm mt-2 px-3">Download</button>
                </a><br>
            @endif

            <br>

            {{-- Assignment Form --}}
            <form action="{{ route('sam-gov.assign', $sam_gov->id) }}" method="POST">
                @csrf
                @method('PUT')
                @if (auth()->user()->id === optional($sam_gov->assignedUser)->id ||
                        !$sam_gov->assignedUser ||
                        auth()->user()->isAdmin() ||
                        auth()->user()->isSalesModerator())
                    <select name="assigned_user" class="form-control mb-2">
                        <option value="">Select User</option>
                        @foreach ($users as $user)
                            @if (auth()->user()->isAdmin() || auth()->user()->isSalesModerator())
                                @if ($user->isSalesRep() || $user->isAdmin() || $user->isSalesModerator())
                                    <option value="{{ $user->id }}"
                                        {{ optional($sam_gov->assignedUser)->id === $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endif
                            @else
                                @if (auth()->id() === $user->id || optional($sam_gov->assignedUser)->id === $user->id)
                                    <option value="{{ $user->id }}"
                                        {{ optional($sam_gov->assignedUser)->id === $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="btn btn-primary btn-sm me-2">Assign</button>
                        <button type="submit" name="unassign" value="true"
                            class="btn btn-danger btn-sm">Unassign</button>
                    </div>
                @else
                    <select class="form-control mb-2" disabled>
                        <option value="">Select User</option>
                        @foreach ($users as $user)
                            @if (auth()->user()->isAdmin() || auth()->user()->isSalesModerator())
                                <option value="{{ $user->id }}"
                                    {{ optional($sam_gov->assignedUser)->id === $user->id ? 'selected' : '' }}>
                                    {{ $user->name }}
                                </option>
                            @else
                                @if (auth()->id() === $user->id || optional($sam_gov->assignedUser)->id === $user->id)
                                    <option value="{{ $user->id }}"
                                        {{ optional($sam_gov->assignedUser)->id === $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endif
                            @endif
                        @endforeach
                    </select>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="btn btn-primary btn-sm me-2" disabled>Assign</button>
                        <button type="submit" name="unassign" value="true" class="btn btn-danger btn-sm"
                            disabled>Unassign</button>
                    </div>
                @endif
            </form>

            <button type="submit" class="btn btn-primary btn-sm mt-2">Upload To Bitrix</button>
        </div>


    </div>
    <hr>
@endforeach
<div class="mt-4">
    {{ $sam_govs->appends(request()->query())->links('pagination::bootstrap-5') }}
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Status color mapping
        const statusColors = {
            'Pending': '#ffef96',
            'Quote Requested': '#ff7b25',
            'Quote Received': '#b0aac0',
            'Waiting for Info': '#b1cbbb',
            'Submitted': '#87bdd8',
            'Won': '#99ff99',
            'Lost': '#ff9999'
        };

        // Initialize status colors from localStorage
        document.querySelectorAll('.status-select').forEach(select => {
            const statusForm = select.closest('.status-form');
            const samId = statusForm ? statusForm.action.split('/').slice(-1)[0] : null;

            if (samId) {
                const storedColor = localStorage.getItem(`statusColor-${samId}`);
                if (storedColor) {
                    select.style.backgroundColor = storedColor;
                } else if (select.value in statusColors) {
                    select.style.backgroundColor = statusColors[select.value];
                }
            }
        });

        // Handle status updates
        document.querySelectorAll('.status-form').forEach(form => {
            const select = form.querySelector('.status-select');
            const samId = form.action.split('/').slice(-1)[0];

            // Change to 'change' event for immediate feedback
            select.addEventListener('change', async (e) => {
                const formData = new FormData(form);
                const selectedColor = statusColors[select.value] || '';

                try {
                    // Show loading state
                    const originalText = select.selectedOptions[0].text;
                    select.disabled = true;

                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector(
                                'meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        },
                        body: formData
                    });

                    const data = await response.json();

                    if (data.success) {
                        // Update color immediately
                        select.style.backgroundColor = selectedColor;
                        // Store in localStorage
                        localStorage.setItem(`statusColor-${samId}`, selectedColor);

                        // Show success feedback
                        select.disabled = false;
                        showToast(`Status changed to ${select.value}`);
                    }
                } catch (error) {
                    console.error('Error:', error);
                    select.disabled = false;
                    select.value = e.target.dataset.prevValue || '';
                    showToast('Error updating status', 'error');
                }
            });

            // Store previous value for error recovery
            select.addEventListener('focus', (e) => {
                e.target.dataset.prevValue = e.target.value;
            });
        });

        // Handle assignment updates
        document.querySelectorAll('form[action*="sam-gov.assign"]').forEach(form => {
            const samId = form.action.split('/').slice(-1)[0];
            const assignBtn = form.querySelector('[type="submit"]');
            const unassignBtn = form.querySelector('[name="unassign"]');

            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const formData = new FormData(form);
                const isUnassign = formData.has('unassign');
                const button = isUnassign ? unassignBtn : assignBtn;
                const originalText = button.innerHTML;

                try {
                    // Show loading state
                    button.disabled = true;
                    button.innerHTML =
                        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...';

                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector(
                                'meta[name="csrf-token"]').content,
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    });

                    const data = await response.json();

                    if (data.success) {
                        // Update the UI
                        const userSelect = form.querySelector('[name="assigned_user"]');
                        if (userSelect) {
                            userSelect.value = isUnassign ? '' : data.assigned_user;
                        }

                        // Update status select availability
                        const statusSelect = form.closest('div[style*="display: flex"]')
                            .querySelector('.status-select');
                        if (statusSelect) {
                            statusSelect.disabled = !(data.assigned_user ===
                                "{{ auth()->id() }}");
                        }

                        // Clear color if unassigned
                        if (isUnassign) {
                            localStorage.removeItem(`statusColor-${samId}`);
                        }

                        showToast(isUnassign ? 'Successfully unassigned' :
                            'Assignment updated');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    showToast('Error updating assignment', 'error');
                } finally {
                    button.disabled = false;
                    button.innerHTML = originalText;
                }
            });
        });

        // Simple toast notification
        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.style.position = 'fixed';
            toast.style.bottom = '20px';
            toast.style.right = '20px';
            toast.style.padding = '10px 20px';
            toast.style.background = type === 'error' ? '#ff4444' : '#4CAF50';
            toast.style.color = 'white';
            toast.style.borderRadius = '4px';
            toast.style.zIndex = '1000';
            toast.textContent = message;

            document.body.appendChild(toast);

            setTimeout(() => {
                toast.style.transition = 'opacity 0.5s';
                toast.style.opacity = '0';
                setTimeout(() => toast.remove(), 500);
            }, 3000);
        }
    });
</script>