@extends('layouts.app')
@section('title', 'Survey Attempts & Answers Report')

@section('content')
    <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="{{ request('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') }}">
                <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>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form action="{{ route('surveymanagement.survey_attempts.index') }}" method="GET">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Type and press enter to search"
                                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" name="per_page" onchange="this.form.submit()">
                            <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25 Rows</option>
                            <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 Rows</option>
                            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100 Rows</option>
                            <option value="500" {{ request('per_page') == 500 ? 'selected' : '' }}>500 Rows</option>
                        </select>
                    </div>
                </div>
                
                {{-- <div class="d-flex justify-content-end mt-2">
                    <a href="{{ route('surveymanagement.survey_attempts.index') }}" class="btn btn-link btn-sm">
                        e  Filters
                    </a>
                </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->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">
                                <button type="submit" class="btn btn-primary border-0 mr-2">Apply Filters</button>
                                <a href="{{ route('surveymanagement.survey_attempts.index') }}" class="btn btn-primary">Clear</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <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">Started At</th>
                            <th class="column-saved-at">Last Saved At</th>
                            <th class="column-channel">Channel</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">{{ $attempt->attempt_started_at ? $attempt->attempt_started_at->format('Y-m-d H:i') : '' }}</td>
                                <td class="column-saved-at">{{ $attempt->last_saved_at ? $attempt->last_saved_at->format('Y-m-d H:i') : '' }}</td>
                                <td class="column-channel">{{ $attempt->survey->channel->name ?? '' }}</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="10" class="text-center">No attempts found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center">
                <div style="font-size: 14px;" 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>

@endsection

@push('js')
    <script>
        $(document).ready(function() {
            // Initialize Select2 dropdowns
            $('.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();
                }
            });
        });

        // Table sorting functionality
        function sortTable(column) {
            const url = new URL(window.location.href);
            const sortParam = url.searchParams.get('sort');
            const direction = sortParam && sortParam === column ? 
                (url.searchParams.get('direction') === 'asc' ? 'desc' : 'asc') : 'asc';
            
            url.searchParams.set('sort', column);
            url.searchParams.set('direction', direction);
            
            window.location.href = url.toString();
        }

        // Update sort indicators on page load
        $(document).ready(function() {
            const url = new URL(window.location.href);
            const sortColumn = url.searchParams.get('sort');
            const sortDirection = url.searchParams.get('direction');
            
            if (sortColumn) {
                $(`th[data-sort="${sortColumn}"]`).addClass(`sort-${sortDirection}`);
            }

            var startDate = null;
            var endDate = null;

            if (dateRange) {
                var dates = dateRange.split(' - ');
                if (dates.length === 2) {
                    if (moment(dates[0], 'MM/DD/YYYY', true).isValid() && moment(dates[1], 'MM/DD/YYYY', true)
                        .isValid()) {
                        startDate = moment(dates[0], 'MM/DD/YYYY');
                        endDate = moment(dates[1], 'MM/DD/YYYY');
                    }
                }
            }

            $('#dateRangeFilter').val(dateRange || '');

            // Build daterangepicker options object
            let dpOptions = {
                locale: {
                    format: 'MM/DD/YYYY'
                },
                autoUpdateInput: !!dateRange,
                opens: 'left',
                autoApply: true,
            };

            // Only add startDate and endDate if valid
            if (startDate && endDate) {
                dpOptions.startDate = startDate;
                dpOptions.endDate = endDate;
            }

            $('#dateRangeFilter').daterangepicker(dpOptions);

            $('.filter-input').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                    'MM/DD/YYYY'));
                this.form.submit();
            });

            $('.filter-input').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                this.form.submit();
            });
        });
    </script>
@endpush