@extends('adminlte::page')

@section('title', 'Submissions')

@section('content_header')
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="m-0">Submissions</h1>
        <ol class="breadcrumb mt-1 p-0 bg-transparent">
            <li class="breadcrumb-item"><a href="{{ url('admin') }}">Home</a></li>
            <li class="breadcrumb-item active">Submissions</li>
        </ol>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.submissions.trash') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-trash-restore mr-1"></i>Trash
        </a>
    </div>
</div>
@endsection

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }} <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
@endif

{{-- ── Filter bar ───────────────────────────────────────────────────────────── --}}
<div class="card card-outline card-primary mb-3">
    <div class="card-body pb-2">
        <form id="filter-form" class="form-row align-items-end">
            <div class="form-group col-md-3 mb-2">
                <label class="small font-weight-bold">Form</label>
                <select name="form_slug" id="f-form" class="form-control form-control-sm">
                    <option value="">All forms</option>
                    @foreach ($forms as $f)
                        <option value="{{ $f->slug }}">{{ Str::before($f->title, ' (') }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-2 mb-2">
                <label class="small font-weight-bold">Submitted by</label>
                <select name="submitted_by" id="f-by" class="form-control form-control-sm">
                    <option value="">All</option>
                    @foreach ($enumerators as $e)
                        <option value="{{ $e }}">{{ $e }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-2 mb-2">
                <label class="small font-weight-bold">From</label>
                <input type="date" name="date_from" id="f-from" class="form-control form-control-sm">
            </div>
            <div class="form-group col-md-2 mb-2">
                <label class="small font-weight-bold">To</label>
                <input type="date" name="date_to" id="f-to" class="form-control form-control-sm">
            </div>
            <div class="form-group col-md-auto mb-2">
                <button type="button" id="btn-filter" class="btn btn-sm btn-primary">
                    <i class="fas fa-filter mr-1"></i>Filter
                </button>
                <button type="button" id="btn-reset" class="btn btn-sm btn-default ml-1">Reset</button>
            </div>
            <div class="form-group col-md-auto mb-2 ml-auto">
                <button type="button" id="btn-export" class="btn btn-sm btn-success">
                    <i class="fas fa-file-excel mr-1"></i>Export Excel
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ── DataTable ────────────────────────────────────────────────────────────── --}}
<div class="card">
    <div class="card-body p-0">
        <table id="submissions-table" class="table table-hover table-sm mb-0 w-100">
            <thead class="thead-light">
                <tr>
                    <th width="50">#</th>
                    <th>Form</th>
                    <th>Shop / Key answer</th>
                    <th>By</th>
                    <th>Date</th>
                    <th width="80">Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap4.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap4.min.js"></script>
<script>
(function ($) {
    'use strict';

    var table = $('#submissions-table').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ url('admin/submissions') }}',
            type: 'GET',
            data: function (d) {
                d.form_slug    = $('#f-form').val();
                d.submitted_by = $('#f-by').val();
                d.date_from    = $('#f-from').val();
                d.date_to      = $('#f-to').val();
            }
        },
        columns: [
            { data: 'id', name: 'id', width: '50px' },
            { data: 'form_badge', name: 'form_slug', orderable: false },
            { data: 'shop_name', name: 'shop_name', orderable: false },
            { data: 'submitted_by', name: 'submitted_by' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', orderable: false, searchable: false, width: '80px' },
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        language: { processing: '<i class="fas fa-spinner fa-spin"></i> Loading...' }
    });

    $('#btn-filter').on('click', function () { table.ajax.reload(); });

    $('#btn-reset').on('click', function () {
        $('#filter-form')[0].reset();
        table.ajax.reload();
    });

    $('#btn-export').on('click', function () {
        var params = new URLSearchParams({
            form_slug:    $('#f-form').val(),
            submitted_by: $('#f-by').val(),
            date_from:    $('#f-from').val(),
            date_to:      $('#f-to').val(),
        });
        window.location.href = '{{ route('admin.submissions.export') }}?' + params.toString();
    });

}(jQuery));
</script>
@endsection