@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h1 class="mb-4">Manage Submissions</h1>

    <div class="alert alert-success alert-dismissible fade show" id="showonsubmit" style="display:none;">
        Submission deleted successfully!
    </div>

    {{-- Success/Error messages --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            {{-- <button type="button" class="btn-close" data-bs-dismiss="alert"></button> --}}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            {{ session('error') }}
            {{-- <button type="button" class="btn-close" data-bs-dismiss="alert"></button> --}}
        </div>
    @endif

    {{-- Export buttons --}}
    <div class="mb-3">
        <a href="{{ url('submissions/export/xlsx') }}" class="btn btn-success">Export All to Excel</a>
        <a href="{{ url('submissions/export/csv') }}" class="btn btn-info">Export All to CSV</a>
    </div>
    

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>All Submissions</h4>
        <div class="d-flex align-items-center text-center">
            <form id="exportForm" action="{{ route('submissions.exportseperate') }}" method="GET">
                <label for="formSelect" class="me-2">Export by Form:</label>
                <select name="form_id" id="formSelect" class="form-control me-2">
                    <option value="">Select a Form</option>
                    @foreach($forms as $form)
                        <option value="{{ $form->id }}">{{ $form->form_name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn btn-success mt-2 w-100">Export</button>
            </form>
        </div>
    </div>

    <form method="GET" action="{{ route('submissions.index') }}" class="mb-3">
        <div class="d-flex align-items-center">
            <label for="form_filter" class="me-2 mr-2">Filter by Form:</label>
            <select name="form_id" id="form_filter" class="form-control me-2 col-md-4" onchange="this.form.submit()">
                <option value="">All Forms</option>
                @foreach($forms as $form)
                    <option value="{{ $form->id }}" {{ request('form_id') == $form->id ? 'selected' : '' }}>
                        {{ $form->form_name }}
                    </option>
                @endforeach
            </select>
        </div>
    </form>

    <form method="POST" action="{{ route('submissions.bulkDelete') }}">
        @csrf
        <div class="table-responsive">
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        @if($is_admin)
                        <th><input type="checkbox" id="select-all"></th>
                        @endif
                        <th>Form Name</th>
                        {{-- Dynamically get all keys from first submission --}}
                        @php
                            $firstSubmissionData = $submissions->first()->entry_data ?? '{}';
                            $firstSubmissionArray = json_decode($firstSubmissionData, true) ?? [];
                            $formFields = array_keys($firstSubmissionArray);
                        @endphp

                        @foreach($formFields as $field)
                            <th>{{ $field }}</th>
                        @endforeach

                        <th>Submission Date</th>
                        @if($is_admin)
                        <th>Actions</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($submissions as $submission)
                        @php
                            $data = json_decode($submission->entry_data, true) ?? [];
                        @endphp
                        <tr id="row-{{ $submission->id }}">
                            @if($is_admin)
                            <td><input type="checkbox" name="selected_submissions[]" value="{{ $submission->id }}"></td>
                            @endif
                            <td>{{ $submission->form->form_name ?? 'N/A' }}</td>
                            @foreach($formFields as $field)
                                <td>
                                    @if(is_array($data[$field] ?? null))
                                        {{ implode(', ', $data[$field]) }}
                                    @else
                                        {{ $data[$field] ?? '' }}
                                    @endif
                                </td>
                            @endforeach
                            <td>{{ $submission->submitted_at }}</td>
                            @if($is_admin)
                            <td>
                                <button type="button"
                                        class="btn btn-sm btn-danger delete-btn"
                                        data-id="{{ $submission->id }}">
                                    Delete
                                </button>
                            </td>
                            @endif
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($is_admin)
        <button type="submit" class="btn btn-danger mt-2">Delete Selected</button>
        @endif
    </form>


</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function () {
            if (!confirm('Are you sure you want to delete this submission?')) {
                return;
            }

            const submissionId = this.getAttribute('data-id');

            fetch(`/submissions/${submissionId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                
                    document.getElementById('showonsubmit').style.display = 'block';
                    this.closest('tr').remove();
                } else {
                    alert(data.message || 'Something went wrong');
                }
            })
            .catch(err => console.error(err));
        });
    });
});

</script>


<script>
    document.getElementById('select-all')?.addEventListener('change', function(e) {
        document.querySelectorAll('input[name="selected_submissions[]"]').forEach(cb => cb.checked = e.target.checked);
    });
</script>
@endsection