@extends('layouts.page') <!-- Extend your layout here -->
<link rel="stylesheet" href="{{ asset('asset/css/style.css') }}">
@section('title', 'Issues') <!-- Set the page title dynamically -->
@section('content')
    @php
        $pageName = 'Issues'; // Set the dynamic page name
    @endphp
    @include('session-message')

    <!-- Stats Banner (mirrors the dashboard's welcome banner) -->
    <div class="issues-banner">
        <div>
            <h2>Here's a quick look at how your issues are moving today.</h2>

        </div>
        <div class="issues-stat-group">
            <div class="issues-stat-pill">
                <i class="bi bi-clipboard2-check"></i>
                <span>
                    <span class="stat-value">{{ $allCount ?? 0 }}</span>
                    <span class="stat-label">All</span>
                </span>
            </div>
            <div class="issues-stat-pill">
                <i class="bi bi-hourglass-split"></i>
                <span>
                    <span class="stat-value">{{ $openCount ?? 0 }}</span>
                    <span class="stat-label">Open</span>
                </span>
            </div>
            <div class="issues-stat-pill">
                <i class="bi bi-check2-circle"></i>
                <span>
                    <span class="stat-value">{{ $closedCount ?? 0 }}</span>
                    <span class="stat-label">Closed</span>
                </span>
            </div>
        </div>
    </div>

    <!-- Page Heading -->
    <div class="form-section">
        <section>
            <!-- Flex container for buttons -->
            <div class="issues-toolbar mb-2">
                <!-- Add issue Button -->
                @if(Auth::user()->org_id != 1)
                    <a href="{{ route('issue.create') }}" class="btn btn-outline-primary">
                        <i class="bi bi-clipboard2-plus"></i> Add Issue
                    </a>
                @endif
                <!-- Button to Open Modal -->
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                        data-bs-target="#searchModal">
                    <i class="bi bi-search"></i> Open Search
                </button>
                @if(Auth::user()->hasRole('admin') || Auth::user()->hasRole('super_admin') || Auth::user()->hasRole('support_software')|| Auth::user()->hasRole('support_hardware') || Auth::user()->hasRole('support_tech'))
                    <form action="{{ route('export.issues') }}" method="GET" class="m-0">
                        <input type="hidden" name="search" value="{{ request('search') }}">
                        <input type="hidden" name="functionality" value="{{ request('functionality') }}">
                        <button type="submit" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-download"></i> Export CSV
                        </button>
                    </form>
                @endif
                @include('issue.searchModal')
                <form action="{{ route('issue.index') }}" method="GET" class="m-0">
                    <button type="submit" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-arrow-clockwise"></i> Clear
                    </button>
                </form>
            </div>
            <!-- Filter pills -->
            <div class="d-flex flex-row flex-wrap align-items-center mb-2">
                @include('issue.issueFilterDropdown')
            </div>
        </section>
        @if($issues->isEmpty())
            <div class="d-flex flex-column justify-content-center align-items-center h-screen">
                <img src="{{ asset('asset/empty-box.png') }}" style="width: 100px; height: 100px;" alt="No Issues">
                <p class="fs-5 text-secondary mt-3">No Issues</p>
            </div>
        @else
            <div class="table-card mt-4">
                <div class="responsive-table">
                    <table class="custom-table">
                        <thead>
                        <tr>
                            <th>SL No.</th>
                            <th>TITLE</th>
                            <th>ISSUE TYPE</th>
                            <th>REPORTED BY</th>
                            <th>ASSIGNEE</th>
                            <th>STATUS</th>
                            <th>CREATED AT</th>
                            <th>LAST REPLY</th>
                            @if(\Illuminate\Support\Facades\Auth::user()->hasRole('super_admin'))
                                <th>Action</th>
                            @endif
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($issues as $issue)
                            <tr style="cursor: pointer;" onclick="window.location='{{ route('issue.show', $issue->id) }}'">
                                <td>{{ $issue->serial_no ?? 'No Sl no.'}}</td>
                                <td>
            <span class="urgency urgency-{{ $issue->urgency }}">
                {{ $issue->urgency == 1 ? 'Urgent' : 'Normal' }}
            </span>
                                    {{ $issue->title ? $issue->title : 'No Name' }}
                                </td>
                                <td>
                                    {{ ucfirst($issue->type) ?? 'No Type' }}
                                    <br>
                                    @if ($issue->type == 'software')
                                        {{ $issue->sub_type ? ucfirst($issue->sub_type) : 'No Subtype' }}
                                    @elseif ($issue->type == 'hardware')
                                        {{ $issue->device_type ? ucfirst($issue->device_type) : 'No Type' }}
                                        <i class="bi bi-arrow-right"></i>
                                        {{ $issue->device_sl ? ucfirst($issue->device_sl) : 'No Serial Number' }}
                                    @else
                                    @endif
                                </td>
                                <td>{{ $issue->reporter_name ? $issue->reporter_name : 'No Reporter' }}
                                    <br>
                                    {{ $issue->organization_name ? $issue->organization_name : 'No Reporter' }}
                                </td>
                                <td>{{ $issue->assignee_name ? $issue->assignee_name : 'No Assignee' }}</td>
                                <td>
                                    @if($issue->closed)
                                        <span class="text-danger fw-bold">
    Closed by
    {{ $issue->closed_by == 0 ? 'System' : ($issue->closedByUser->name ?? 'Unknown') }}
</span>

                                        <br>
                                        {{ $issue->closed_at }}
                                    @elseif($issue->closed_at)
                                        <span class="text-warning fw-bold">Reopened</span>
                                        <br>
                                        {{ $issue->closed_at }}
                                    @else
                                        <span class="text-success fw-bold">Open</span>
                                    @endif
                                </td>
                                <td>{{ \Carbon\Carbon::parse($issue->created_at)->format('j F Y h:i A') }}</td>
                                <td>
                                    @if($issue->last_reply_name && $issue->last_reply)
                                        {{ $issue->last_reply_name }}
                                        <br>
                                        {{ \Carbon\Carbon::parse($issue->last_reply)->format('j F Y h:i A') }}
                                    @else
                                        <span class="text-warning fw-semibold">Not Replied</span>
                                    @endif
                                </td>
                                @if(\Illuminate\Support\Facades\Auth::user()->hasRole('super_admin'))
                                    <td>
                                        <!-- Show Delete Button -->
                                        <button type="button" class="icon-action-btn" title="Delete"
                                                onclick="showDeleteModal(event, {{ $issue->id }})">
                                            <i class="bi bi-trash3 me-1"></i>
                                        </button>
                                    </td>
                                @endif
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pagination -->
            <div class="pagination-container mt-4 d-flex justify-content-center">
                {{ $issues->links('pagination::bootstrap-4') }}
            </div>

        @endif
    </div>
@endsection
<div id="loading-screen" class="fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center hidden z-50">
    <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-white"></div>
</div>

<!-- Form for Deletion -->
<form id="deleteForm" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
    <input type="hidden" id="issueId" name="id" value="">
</form>
<div id="warningAlert" role="alert"
     style="display: none; position: fixed; top: 50%; left: 53%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; z-index: 1050; background-color: #eafaf1; border: 1px solid #a3d9b1; border-left: 5px solid #2e7d4f; border-radius: 10px; padding: 1.25rem 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); font-family: inherit;">

    <div style="display: flex; align-items: flex-start; gap: 10px;">
        <i class="bi bi-exclamation-circle-fill" style="font-size: 22px; color: #2e7d4f; margin-top: 2px;"></i>
        <div>
            <strong id="modalTitle" style="color: #1e5631; font-size: 1.05rem;">Warning!</strong>
            <p id="modalMessage" style="margin: 4px 0 0; color: #2d3d34;">Are you sure you want to delete this user?</p>
        </div>
    </div>

    <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
        <button id="confirmAction" style="border: none; background-color: #2e7d4f; color: #fff; border-radius: 6px; padding: 6px 14px; display: flex; align-items: center; cursor: pointer;">
            <i class="bi bi-check-lg me-1" style="font-size: 18px;"></i> Confirm
        </button>
        <button id="cancelAlert" style="border: 1px solid #c3d6ca; background-color: transparent; color: #4a5a51; border-radius: 6px; padding: 6px 14px; display: flex; align-items: center; cursor: pointer;">
            <i class="bi bi-x-lg me-1" style="font-size: 16px;"></i> Cancel
        </button>
    </div>
</div>

{{--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>--}}

@push('scripts')
    {{--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>--}}

    <script>
        function showDeleteModal(event, issueId) {
            event.stopPropagation();
            document.getElementById('issueId').value = issueId;

            // Update form action with the correct issue ID
            const deleteUrl = "{{ route('issue.destroy', ':id') }}".replace(':id', issueId);
            document.getElementById('deleteForm').action = deleteUrl;

            // Set confirmation behavior
            document.getElementById('confirmAction').onclick = function () {
                document.getElementById('deleteForm').submit();
            };

            // Show the alert modal
            const alert = document.getElementById('warningAlert');
            alert.style.display = 'block';
            alert.classList.add('show');
        }

        document.addEventListener("DOMContentLoaded", function () {
            var warningAlert = document.getElementById("warningAlert");
            var confirmAction = document.getElementById("confirmAction");
            var cancelAlert = document.getElementById("cancelAlert");

            function showWarningAlert() {
                warningAlert.classList.add("show");
            }

            function hideWarningAlert() {
                warningAlert.classList.remove("show");
                setTimeout(() => {
                    warningAlert.style.display = 'none';
                }, 300); // Wait for fade transition to finish
            }

            // Attach event listeners
            cancelAlert.addEventListener("click", hideWarningAlert);

            // Example function to trigger modal (call this when you want to show it)
            window.triggerWarning = function () {
                showWarningAlert();
            };
        });

        document.addEventListener("DOMContentLoaded", function () {
            let selectedValue = new URLSearchParams(window.location.search).get("functionality");
            let selectedRadio = document.querySelector(`input[name="functionality"][value="${selectedValue}"]`);

            if (selectedRadio) {
                document.getElementById("selectedFilter").textContent = selectedRadio.dataset.label;
            }

            window.submitFilter = function (element) {
                document.getElementById("selectedFilter").textContent = element.dataset.label;
                element.closest("form").submit();
            }
        });

        // document.addEventListener("DOMContentLoaded", function () {
        //     $(document).ajaxStart(function () {
        //         $("#loading-screen").removeClass("hidden"); // Show loader
        //     });
        //
        //     $(document).ajaxStop(function () {
        //         $("#loading-screen").addClass("hidden"); // Hide loader
        //     });
        // });

    </script>
@endpush