@extends('layouts.app')
@section('title', 'Survey Details')

@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Survey Details</div>
        <div>
            @can('Survey update')
                <form action="{{ route('surveymanagement.surveys.import-questions', $survey->id) }}" method="POST"
                    style="display: inline;">
                    @csrf
                    <button type="submit" data-toggle="tooltip" title="Fetch Surveys" class="btn btn-link p-0 m-0 align-middle"
                        style="border: none; background: none;">
                        <i
                            class="fa-solid fa-download fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
                    </button>
                </form>
            @endcan
            <i
                class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"></i>

            {{-- <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Save"></i> --}}
            @can('Survey update')
                <a href="{{ route('surveymanagement.surveys.edit', $survey->id) }}" data-toggle="tooltip" title="Edit">
                    <i
                        class="fa-regular fa-edit fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
                </a>
            @endcan

            @can('Survey delete')
                <form id="delete-survey-form-{{ $survey->id }}"
                    action="{{ route('surveymanagement.surveys.destroy', $survey->id) }}" method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
                <a href="javascript:void(0)"
                    onclick="confirmDelete('{{ route('surveymanagement.surveys.destroy', $survey->id) }}', event)"
                    data-toggle="tooltip" title="Delete">
                    <i id="deleteSelectedSurvey"
                        class="fa-regular fa-trash-can fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
                </a>
            @endcan

            <a href="{{ route('surveymanagement.surveys.index') }}" data-toggle="tooltip" title="Close">
                <i
                    class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"></i>
            </a>
        </div>
    </div>



    <div class="row mt-3 mb-5">
        <div class="col-md-6">
            <div class="card">
                <h5 class="card-title">Survey Details </h5>
                <div class="card-body">
                    <form action="" method="">

                        <!-- Survey ID (Read-only) -->
                        <div class="form-group">
                            <label for="survey_id">Survey ID</label>
                            <input type="text" class="form-control" id="survey_id" value="{{ $survey->survey_id }}"
                                disabled>
                        </div>

                        <!-- Survey Name (Read-only) -->
                        <div class="form-group">
                            <label for="survey_name">Survey Name</label>
                            <input type="text" class="form-control" id="survey_name" value="{{ $survey->survey_name }}"
                                disabled>
                        </div>

                        <!-- URL (Read-only) -->
                        <div class="form-group">
                            <label for="survey_url">URL</label>
                            <input type="text" class="form-control" id="survey_url" value="{{ $survey->survey_url }}"
                                disabled>
                        </div>

                        <!-- Questions Count (Read-only) -->
                        <div class="form-group">
                            <label for="questions_count">Questions Count</label>
                            <input type="text" class="form-control" id="questions_count"
                                value="{{ $survey->questions_count }}" disabled>
                        </div>

                        <!-- Survey Type (Required Select) -->
                        <div class="form-group">
                            <label for="survey_type">Survey Type <span class="text-danger">*</span></label>
                            <select class="form-control @error('survey_type') is-invalid @enderror" id="survey_type"
                                name="survey_type" disabled>
                                <option value="">Select Survey Type</option>
                                <option value="1-2-1 Survey"
                                    {{ $survey->survey_type == '1-2-1 Survey' ? 'selected' : '' }}>1-2-1 Survey</option>
                                <option value="Observation Survey"
                                    {{ $survey->survey_type == 'Observation Survey' ? 'selected' : '' }}>Observation Survey
                                </option>
                            </select>
                            @error('survey_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Channel Name (Required Searchable Select) -->
                        <div class="form-group">
                            <label for="channel_id">Channel Name <span class="text-danger">*</span></label>
                            <select class="form-control @error('channel_id') is-invalid @enderror" id="channel_id"
                                name="channel_id" disabled>
                                <option value="">Select Channel</option>
                                @foreach ($channels as $channel)
                                    <option value="{{ $channel->id }}"
                                        {{ $survey->channel_id == $channel->id ? 'selected' : '' }}>{{ $channel->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('channel_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Assigned Users (Optional Searchable Multiple Select) -->
                        <div class="form-group">
                            <label for="assigned_users">Assigned Users</label>
                            <select class="form-control @error('assigned_users') is-invalid @enderror" id="assigned_users"
                                name="assigned_users[]" multiple disabled>
                                @foreach ($assignedUsers as $user)
                                    <option value="{{ $user->id }}"
                                        {{ in_array($user->id, $survey->assignedUsers->pluck('id')->toArray()) ? 'selected' : '' }}>
                                        {{ $user->name }}</option>
                                @endforeach
                            </select>
                            @error('assigned_users')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="d-flex justify-content-between">
                    <h5 class="card-title">Logs</h5>
                    <i class="fa-solid fa-chevron-down fixed-nav-btn logs-collaps p-1 d-inline-flex align-items-center justify-content-center"
                        data-toggle="collapse" data-target="#logsCollapse" aria-expanded="false"
                        aria-controls="logsCollapse"></i>
                </div>
                <div class="card-body collapse" id="logsCollapse">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead style="background-color: #eee;">
                                <tr>
                                    <th scope="col">User</th>
                                    <th scope="col">Log</th>
                                    <th scope="col">Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($logs as $log)
                                    <tr>
                                        <td>{{ $log->user->name }}</td>
                                        <td>{{ $log->details }}</td>
                                        <td>{{ $log->created_at->format('Y-m-d - H:i:s') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $logs->links() }}
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 col-md-8">Survey Questions</h5>                    
                    {{-- <div class="d-flex align-items-left"> --}}
                            {{-- <button class="btn btn-primary border-0" type="button" data-toggle="collapse"
                                data-target="#questionFilters" aria-expanded="false" aria-controls="questionFilters">
                                <i class="fas fa-filter"></i> Filters
                            </button> --}}
                            <div class="col-md-2 d-grid">
                                    <button type="button" class="btn btn-de-dark filter-btn" data-toggle="collapse"
                                        data-target="#questionFilters" aria-expanded="false" aria-controls="questionFilters">
                                        Filters
                                    </button>
                                </div>
                        <div class="col-md-2">
                             <form method="GET" action="{{ route('surveymanagement.surveys.show', $survey->id) }}">
                        <select name="questions_per_page" class="form-control" style="background-color: transparent"
                            onchange="this.form.submit()">
                            <option value="10" {{ session('questions_per_page', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="20" {{ session('questions_per_page') == 20 ? 'selected' : '' }}>20 Rows</option>
                            <option value="50" {{ session('questions_per_page') == 50 ? 'selected' : '' }}>50 Rows</option>
                            <option value="100" {{ session('questions_per_page') == 100 ? 'selected' : '' }}>100 Rows</option>
                            <option value="500" {{ session('questions_per_page') == 500 ? 'selected' : '' }}>500 Rows</option>
                        </select>
                        @if(request('question_group'))
                            <input type="hidden" name="question_group" value="{{ request('question_group') }}">
                        @endif
                        @if(request('question_text'))
                            <input type="hidden" name="question_text" value="{{ request('question_text') }}">
                        @endif
                        @if(request('question_type'))
                            <input type="hidden" name="question_type" value="{{ request('question_type') }}">
                        @endif
                    </form>
                </div>
            </div>
                    <!-- Filters Section -->
                    <div class="collapse" id="questionFilters">
                        <div class="card-body border-bottom">
                            <form method="GET" action="{{ route('surveymanagement.surveys.show', $survey->id) }}">
                                @if(request('questions_per_page'))
                                    <input type="hidden" name="questions_per_page" value="{{ request('questions_per_page') }}">
                                @endif
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Question Group</label>
                                            <input type="text" name="question_group"
                                                class="form-control form-control-sm"
                                                value="{{ request('question_group') }}" placeholder="Filter by group...">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Question Text</label>
                                            <input type="text" name="question_text"
                                                class="form-control form-control-sm"
                                                value="{{ request('question_text') }}"
                                                placeholder="Filter by question...">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Question Type</label>
                                            <select name="question_type" class="form-control form-control-sm">
                                                {{-- onchange="this.form.submit()"> --}}
                                                <option value="">All Types</option>
                                                @foreach ($questionTypes as $type)
                                                    <option value="{{ $type }}"
                                                        {{ request('question_type') == $type ? 'selected' : '' }}>
                                                        {{ $type }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <button type="submit" class="btn btn-primary btn-sm mr-2 border-0">Apply</button>
                                        <a href="{{ route('surveymanagement.surveys.show', $survey->id) }}"
                                            class="btn btn-secondary btn-sm">Clear</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Questions Table -->
                    <div class="card-body">
                        <div class="table-responsive-sm">
                            <table class="table table-striped" style="table-layout: fixed; width: 100%">
                                <thead class="bg-light">
                                    <tr>
                                        <th style="width: 5%">ID</th>
                                        <th style="width: 8%">Odoo ID</th>
                                        <th >Question Group</th>
                                        <th >Question</th>
                                        <th >Question Type</th>
                                        <th >Dynamic Question</th>
                                        <th class="text-nowrap">Conditional triggers</th>
                                        <th >Selection/Matrix Values</th>
                                        <th style="width: 10%">Updated At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($questions as $question)
                                        <tr>
                                            <td>{{ $question->id }}</td>
                                            <td>
                                                @if ($question->questionGroup && $question->questionGroup->survey)
                                                    {{ $question->questionGroup->survey->survey_id }}
                                                @else
                                                    
                                                @endif
                                            </td>
                                            <td>{{ $question->questionGroup->question_group_name ?? '' }}</td>
                                            <td>{{ $question->question }}</td>
                                            <td>{{ $question->question_type }}</td>
                                            <td>
                                                @if ($question->is_conditional == 1)
                                                    Yes
                                                @else
                                                    No
                                                @endif
                                            </td>
                                            <td>
                                                @if($question->conditional_triggers)
                                                    @php
                                                        $triggers = is_array($question->conditional_triggers) ? $question->conditional_triggers : json_decode($question->conditional_triggers, true);
                                                        $triggerTexts = [];
                                                        if (is_array($triggers)) {
                                                            foreach ($triggers as $trigger) {
                                                                $parts = [];
                                                                if (isset($trigger['source_question_id'])) $parts[] = 'Source Q ID: ' . $trigger['source_question_id'];
                                                                if (isset($trigger['source_question_title_en'])) $parts[] = 'Source Q Title: ' . $trigger['source_question_title_en'];
                                                                if (isset($trigger['answer_id'])) $parts[] = 'Answer ID: ' . $trigger['answer_id']; 
                                                                if (isset($trigger['answer_value_en'])) $parts[] = 'Answer Value: ' . $trigger['answer_value_en'];
                                                                $triggerTexts[] = implode(', ', $parts);
                                                            }
                                                        }
                                                        echo implode('<br>', $triggerTexts); 
                                                    @endphp
                                                @endif
                                            </td>
                                            <td>
                                                @php
                                                    $selections = json_decode($question->selection_values, true);
                                                    $matrix = json_decode($question->metrix_values, true);
                                                @endphp

                                                @if (!empty($selections) && isset($selections['en']))
                                                    {{ implode(', ', $selections['en']) }}
                                                @elseif(!empty($matrix) && isset($matrix['en']))
                                                    {{ implode(', ', $matrix['en']) }}
                                                @elseif(!empty($matrix))
                                                    Matrix Data
                                                @else
                                                    
                                                @endif
                                            </td>

                                            <td>{{ $question->updated_at->format('Y-m-d H:i') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            <!-- Pagination -->
                            <div class="d-flex justify-content-between mt-3">
                                <div>
                                    Showing {{ $questions->firstItem() }} to {{ $questions->lastItem() }} of
                                    {{ $questions->total() }} questions
                                </div>
                                <div>
                                    {{ $questions->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        @php
            $canViewAttempts = ($survey->survey_type == 'Observation Survey')
                ? Gate::allows('Observation Survey Attempts report view')
                : Gate::allows('Survey Attempts report view');
        @endphp

        @if($canViewAttempts)
        <div class="row mt-3">
            <div class="col-md-12">
                <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Survey Attempts</div>
        <div class="d-flex align-items-center">
            <form action="{{ route('surveymanagement.survey_attempts.export') }}" method="GET" style="display:inline;">
                @csrf
                <input type="hidden" name="start_date" value="{{ request('start_date') }}">
                <input type="hidden" name="end_date" value="{{ request('end_date') }}">
                <input type="hidden" name="survey_id" value="{{ $survey->id }}">
                <input type="hidden" name="user_id" value="{{ request('user_id') }}">
                <input type="hidden" name="channel_id" value="{{ request('channel_id') }}">
                <input type="hidden" name="status" value="{{ request('status') }}">
                <input type="hidden" name="date_range" value="{{ request('date_range') }}">
                <input type="hidden" name="search" value="{{ request('search') }}">
                <button type="submit" class="btn btn-link p-0 m-0 align-middle" data-toggle="tooltip"
                    title="Export to Excel" style="border:none; background:none;">
                    <i class="fa-solid fa-file-excel fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
                </button>
            </form>
            
            <!-- Column Visibility Dropdown Button -->
            <div class="dropdown ms-2">
                <button class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    type="button" id="columnVisibilityDropdownAttempts" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false" title="Column Visibility" style="width: 38px; height: 38px;">
                    <i class="fa-solid fa-columns"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right columns-menu"
                    aria-labelledby="columnVisibilityDropdownAttempts" style="min-width: 220px;">
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="attempt-id" checked> Attempt ID</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="survey-name" checked> Survey Name</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="survey-type" checked> Survey Type</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="user-name" checked> User Name</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="user-email" checked> User Email</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="status" checked> Status</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="started-at" checked> Started At</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="saved-at" checked> Last Saved At</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="channel" checked> Channel</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="checking-datetime" checked> Checking At</label></li>
                    <li><label><input type="checkbox" class="columnCheckbox" data-column="formatted-address" checked> Survey Location</label></li>
                </div>
            </div>
        </div>
    </div>
                <div class="card mt-3 rounded-border">
                    <div class="card-body">
                        <form id="attemptsFilterForm" action="{{ route('surveymanagement.surveys.show', $survey->id) }}" method="GET">
                            <input type="hidden" name="survey_id" value="{{ $survey->id }}">
                            <input type="hidden" name="attempts_per_page" value="{{ session('attempts_per_page', 10) }}">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" placeholder="Search by user name or email"
                                            name="search" value="{{ request('search') }}" aria-label="Search attempts">

                                    </div>
                                </div>
                                <div class="col-md-2 d-grid">
                                    <button type="button" class="btn btn-de-dark filter-btn" data-toggle="collapse"
                                        data-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
                                        Filters
                                    </button>
                                </div>
                                <div class="col-md-2">
                                    <select class="form-control" id="attemptsPerPageSelect" name="attempts_per_page">
                                        <option value="10" {{ session('attempts_per_page', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                                        <option value="20" {{ session('attempts_per_page') == 20 ? 'selected' : '' }}>20 Rows</option>
                                        <option value="50" {{ session('attempts_per_page') == 50 ? 'selected' : '' }}>50 Rows</option>
                                        <option value="100" {{ session('attempts_per_page') == 100 ? 'selected' : '' }}>100 Rows</option>
                                        <option value="500" {{ session('attempts_per_page') == 500 ? 'selected' : '' }}>500 Rows</option>
                                    </select>
                                </div>
                            </div>

                            <div class="collapse mt-3" id="filterCollapse">
                                <div class="card card-body mb-3">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="dateRangeFilter">Date Range</label>
                                                <div class="input-group">
                                                    <input type="text" id="dateRangeFilter" name="date_range"
                                                        class="form-control filter-input" value="{{ request('date_range') }}"
                                                        placeholder="mm/dd/yyyy - mm/dd/yyyy" autocomplete="off">
                                                    <div class="input-group-append">
                                                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="survey_id">Survey</label>
                                                <select id="survey_id" name="survey_id" class="form-control select2">
                                                    <option value="">All Surveys</option>
                                                    @foreach ($surveys as $survey)
                                                        <option value="{{ $survey->id }}" {{ request('survey_id') == $survey->id ? 'selected' : '' }}>
                                                            {{ $survey->survey_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div> --}}
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="user_id">User</label>
                                                <select id="user_id" name="user_id" class="form-control select2">
                                                    <option value="">All Users</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                                            {{ $user->first_name ?? $user->name }}{{ $user->last_name ? ' ' . $user->last_name : '' }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="channel_id">Channel</label>
                                                <select id="channel_id" name="channel_id" class="form-control select2">
                                                    <option value="">All Channels</option>
                                                    @foreach ($channels as $channel)
                                                        <option value="{{ $channel->id }}" {{ request('channel_id') == $channel->id ? 'selected' : '' }}>
                                                            {{ $channel->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div> --}}
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="status">Status</label>
                                                <select id="status" name="status" class="form-control">
                                                    <option value="">All Statuses</option>
                                                    <option value="submitted" {{ request('status') == 'submitted' ? 'selected' : '' }}>Submitted</option>
                                                    <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-12"> --}}
                                            <div class="col-md-2 d-flex align-items-end">
                                                    <button type="submit" id="applyFiltersBtn" class="btn btn-sm btn-primary border-0 mr-2">
                                                    Apply
                                                    </button>
                                                    <a href="{{ route('surveymanagement.surveys.show', $survey->id) }}" id="attemptsClearBtn" class="btn btn-sm btn-secondary">
                                                    Clear
                                                    </a>
                                               
                                            </div>
                                        {{-- </div> --}}
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div id="attemptsTableContainer">
                            <div class="attempts-scroll" style="width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; display: block; ">
                            <table class="table table-striped mb-0" id="attemptsTable" style="min-width: 200%; margin-bottom: 0 !important; table-layout: fixed;">
                                {{-- <table class="table mt-4 collapse.show table-striped" id="attemptsTable"> --}}
                                <thead class="bg-light">
                                    <tr>
                                        <th class="column-attempt-id">Attempt ID</th>
                                        <th class="column-survey-name">Survey Name</th>
                                        <th class="column-survey-type">Survey Type</th>
                                        <th class="column-user-name">User Name</th>
                                        <th class="column-user-email">User Email</th>
                                        <th class="column-status">Status</th>
                                        <th class="column-started-at text-nowrap">Started At</th>
                                        <th class="column-saved-at text-nowrap">Last Saved At</th>
                                        <th class="column-channel">Channel</th>
                                        <th class="column-checking-datetime">Checking At</th>
                                        <th class="column-formatted-address">Survey Location</th>
                                        <th class="column-actions">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($attempts as $attempt)
                                        <tr>
                                            <td class="column-attempt-id">{{ $attempt->id }}</td>
                                            <td class="column-survey-name">{{ $attempt->survey->survey_name ?? '' }}</td>
                                            <td class="column-survey-type">{{ $attempt->survey->survey_type ?? '' }}</td>
                                            <td class="column-user-name">{{ $attempt->user?->first_name ?? '' }}{{ $attempt->user?->last_name ? ' ' . $attempt->user->last_name : '' }}</td>
                                            <td class="column-user-email">{{ $attempt->user->email ?? '' }}</td>
                                            <td class="column-status">
                                                <span class="badge {{ $attempt->save_type == 'submitted' ? 'badge-blue' : 'badge-danger' }} badge-same-width">
                                                    {{ ucfirst($attempt->save_type) }}
                                                </span>
                                            </td>
                                            <td class="column-started-at text-nowrap">{!! $attempt->attempt_started_at ? $attempt->attempt_started_at->format('Y-m-d') . '<br>' . $attempt->attempt_started_at->format('H:i') : '' !!}</td>
                                            <td class="column-saved-at text-nowrap">{!! $attempt->last_saved_at ? $attempt->last_saved_at->format('Y-m-d') . '<br>' . $attempt->last_saved_at->format('H:i') : '' !!}</td>
                                            <td class="column-channel">{{ $attempt->survey->channel->name ?? '' }}</td>
                                            <td class="column-checking-datetime text-nowrap">{!! $attempt->attendance ? $attempt->attendance->checked_in_date_time->format('Y-m-d') . '<br>' . $attempt->attendance->checked_in_date_time->format('H:i') : '' !!}</td>
                                            <td class="column-formatted-address">{{ $attempt->attendance->formatted_address ?? '' }}</td>
                                            <td class="column-actions">
                                                <a href="{{ route('surveymanagement.survey_attempts.show', $attempt->id) }}"
                                                    class="btn btn-sm btn-info" data-toggle="tooltip" title="View Answers">
                                                    <i class="fa fa-eye"></i> View Answers
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="12" class="text-center">No attempts found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            </div>

                            <div class="d-flex justify-content-between mt-4 align-items-center attempts-pagination">
                                <div style="font-size: 13px;" class="fw-normal">
                                    Showing {{ $attempts->firstItem() ?? 0 }} to {{ $attempts->lastItem() ?? 0 }} of
                                    {{ $attempts->total() }} entries
                                </div>
                                <div>
                                    {{ $attempts->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

@endsection

@push('js')
    <script>
        // Submit form when the save button is clicked
        document.getElementById('submitForm').addEventListener('click', function() {
            document.getElementById('editSurveyForm').submit();
        });

        // Initialize Select2 for searchable selects
        $(document).ready(function() {
            $('#channel_id').select2({
                placeholder: 'Select Channel',
                allowClear: true,
            });

            $('#assigned_users').select2({
                placeholder: 'Select Assigned Users',
                allowClear: true,
            });
        });

        function confirmDelete(url, event) {
            event.preventDefault(); // Prevent default form submission

            Swal.fire({
                title: 'Are you sure?',
                text: 'You won’t be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-survey-form-' + url.split('/').pop())
                .submit(); // Submit the form
                }
            });
        }
        function updateAttemptsTable(response) {
            const $response = $(response);

            const newContainerHtml = $response.find('#attemptsTableContainer').html();
            if (newContainerHtml) {
                $('#attemptsTableContainer').html(newContainerHtml);
            }

            // Re-initialize column visibility after table refresh
            $('.columnCheckbox').each(function() {
                const column = $(this).data('column');
                const isChecked = $(this).is(':checked');
                if (!isChecked) {
                    $(`.column-${column}`).hide();
                } else {
                    $(`.column-${column}`).show();
                }
            });
            // Re-initialize tooltips
            $('[data-toggle="tooltip"]').tooltip();
        }
    </script>

    <script>
        $(document).ready(function() {
            // Only intercept attempts pagination inside its container
            $(document).on('click', '#attemptsTableContainer .pagination a', function(e) {
                e.preventDefault();

                const pageUrl = $(this).attr('href');

                // Get all current filters from the form
                const form = $('#attemptsFilterForm');
                const formData = form.serialize();

                // Preserve attempts_page from the clicked link
                let attemptsPage = null;
                try {
                    const urlObj = new URL(pageUrl, window.location.origin);
                    attemptsPage = urlObj.searchParams.get('attempts_page');
                } catch (err) {
                    // Fallback parse if URL constructor fails
                    const match = pageUrl.match(/[?&]attempts_page=(\d+)/);
                    attemptsPage = match ? match[1] : null;
                }

                // Construct the URL to include page number and current filters
                const urlWithFilters = pageUrl.split('?')[0] + '?' + formData + (attemptsPage ? `&attempts_page=${attemptsPage}` : '');

                // Show loading indicator
                const tableContainer = $('#attemptsTable').parent();
                tableContainer.before('<div id="loading-attempts-pagination" class="text-center p-4"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
                tableContainer.css('opacity', '0.5');

                $.ajax({
                    url: urlWithFilters,
                    type: 'GET',
                    success: function(response) {
                        updateAttemptsTable(response);
                        // Manually update URL for back/forward navigation
                        window.history.pushState(null, '', urlWithFilters);
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                        alert('An error occurred while loading the next page. Please try again.');
                    },
                    complete: function() {
                        $('#loading-attempts-pagination').remove();
                        tableContainer.css('opacity', '1');
                    }
                });
            });

            // Handle Apply button click
            $('#applyFiltersBtn').on('click', function(e) {
                e.preventDefault();
                
                const form = $('#attemptsFilterForm');
                const url = form.attr('action');
                const formData = form.serialize();
                
                // Submit the form via AJAX
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: formData,
                    success: function(response) {
                        
                        updateAttemptsTable(response); 
                        window.history.pushState(null, '', url + '?' + formData);
                        
                        // Close the filter section after applying
                        $('#filterCollapse').collapse('hide');
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                        alert('An error occurred while applying filters. Please try again.');
                    }
                });
            });
            
            // Initialize Select2 dropdowns for attempts filters
            $('.select2').select2({
                placeholder: 'Select an option',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#filterCollapse')
            });

            // Initialize tooltips
            $('[data-toggle="tooltip"]').tooltip();

            // Initialize date range picker
            $('input[name="date_range"]').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'MM/DD/YYYY'
                }
            });

            $('input[name="date_range"]').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            $('input[name="date_range"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            // Column visibility toggle
            $('.columnCheckbox').change(function() {
                const column = $(this).data('column');
                const isChecked = $(this).is(':checked');
                if (isChecked) {
                    $(`.column-${column}`).show();
                } else {
                    $(`.column-${column}`).hide();
                }
            });

            // Set initial column visibility
            $('.columnCheckbox').each(function() {
                const column = $(this).data('column');
                const isChecked = $(this).is(':checked');
                if (!isChecked) {
                    $(`.column-${column}`).hide();
                }
            });

            // Handle form submission with AJAX to prevent page scroll
            $('#attemptsFilterForm').on('submit', function(e) {
                e.preventDefault();
                
                const formData = $(this).serialize();
                const url = $(this).attr('action');
                
                // Show loading indicator
                $('#attemptsTableContainer').html('<div class="text-center p-4"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
                
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: formData,
                    success: function(response) {
                        // Extract the table content from the response
                        const $response = $(response);
                        const tableContent = $response.find('#attemptsTableContainer').html();
                        $('#attemptsTableContainer').html(tableContent);
                        
                        // Re-initialize column visibility
                        $('.columnCheckbox').each(function() {
                            const column = $(this).data('column');
                            const isChecked = $(this).is(':checked');
                            if (!isChecked) {
                                $(`.column-${column}`).hide();
                            }
                        });
                    },
                    error: function() {
                        $('#attemptsTableContainer').html('<div class="text-center p-4 text-danger">Error loading data. Please try again.</div>');
                    }
                });
            });

                
        // Handle Clear button (reset all filters)
        $('#attemptsClearBtn').on('click', function(e) {
            e.preventDefault();

            const baseUrl = $(this).attr('href').split('?')[0];

            // Clear all filter inputs
            $('input[name="date_range"]').val('');
            $('#user_id').val(null).trigger('change');
            $('#status').val('');
            $('input[name="search"]').val('');

            const attemptsPerPage = $('select[name="attempts_per_page"]').val();

            const newUrl = `${baseUrl}?attempts_per_page=${attemptsPerPage}&survey_id=${$('input[name="survey_id"]').val()}`;

            $.ajax({
                url: newUrl,
                type: 'GET',
                success: function(response) {

                    updateAttemptsTable(response); 
                    window.history.pushState({ path: newUrl }, '', newUrl);
                },
                error: function() {
                    $('#attemptsTable').parent().html('<div class="text-center p-4 text-danger">Error loading data. Please try again.</div>');
                }
            });
        });

        $('#attemptsPerPageSelect').on('change', function(e) {
            e.preventDefault(); // Prevent full form submission
            
            const form = $('#attemptsFilterForm');
            const url = form.attr('action');
            
            const attemptsPerPage = $(this).val();
            $('input[name="attempts_per_page"]').val(attemptsPerPage);

            const formData = form.serialize();

            $.ajax({
                url: url,
                type: 'GET',
                data: formData,
                beforeSend: function() {
                    // Show loading indicator
                    $('.card-body > div').first().before('<div id="loading-attempts" class="text-center p-4"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
                    $('#attemptsTable').parent().css('opacity', '0.5');
                },
                success: function(response) {
                    
                    updateAttemptsTable(response); 
                    window.history.pushState(null, '', url + '?' + formData);
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    alert('An error occurred while changing page size. Please try again.');
                },
                complete: function() {

                    $('#loading-attempts').remove();
                    $('#attemptsTable').parent().css('opacity', '1');
                
                }
            });
        });

            // Handle search input (keep this one automatic on Enter)
            $('input[name="search"]').on('keyup', function(e) {
                if (e.keyCode === 13) { // Enter key
                    $('#attemptsFilterForm').submit();
                }
            });
        });
    </script>
@endpush