@extends('admin.layouts.layout', $headerOption)
@section('content')

<div class="project-box">

    {{-- Toolbar --}}
    <form method="GET" action="{{ route('manages.web-forms.index') }}" id="wfFilterForm">
        <input type="hidden" name="sort_by"  value="{{ $sortBy }}">
        <input type="hidden" name="sort_dir" value="{{ $sortDir }}">
        <input type="hidden" name="per_page" value="{{ $perPage }}">

        <div class="heading-btn-sec px-3 pt-3 pb-2 resp-flex-column">
            <span class="text-muted small">
                Viewing <strong>{{ $totalForms }}</strong> Web Form{{ $totalForms !== 1 ? 's' : '' }}
            </span>

            <div class="heading-btn mob-resp gap-2">
                {{-- Group filter --}}
                <select name="group_id" class="form-select form-select-sm"
                        onchange="document.getElementById('wfFilterForm').submit()"
                        style="min-width:160px;">
                    <option value="0" {{ $groupId == 0 ? 'selected' : '' }}>All Groups</option>
                    @foreach($groups as $g)
                        <option value="{{ $g->id }}" {{ $groupId == $g->id ? 'selected' : '' }}>
                            {{ $g->name }}
                        </option>
                    @endforeach
                </select>

                {{-- Search + Gear icon --}}
                <div class="d-flex align-items-center gap-1">
                    <div class="search-field">
                        <input type="text" name="search" id="wfSearchInput"
                               class="form-control form-control-sm module-search"
                               placeholder="Search by form name…"
                               value="{{ $search }}"
                               autocomplete="off">
                        <i class="{{ \Config::get('settings.icon_search') }}"></i>
                    </div>

                    {{-- Gear / settings icon (WF_016) --}}
                    <div class="dropdown">
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                                title="Table settings">
                            <i class="bx bx-cog"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end p-2" style="min-width:160px;">
                            <li><span class="dropdown-header small fw-semibold px-1">Items per page</span></li>
                            @foreach([10, 25, 50, 100] as $pp)
                            <li>
                                <a class="dropdown-item small {{ $perPage == $pp ? 'active' : '' }}"
                                   href="{{ request()->fullUrlWithQuery(['per_page' => $pp, 'page' => 1]) }}">
                                    {{ $pp }} per page
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>

                    @if($search)
                    <a href="{{ request()->fullUrlWithQuery(['search' => '', 'page' => 1]) }}"
                       class="btn btn-sm btn-outline-secondary" title="Clear search">
                        <i class="bx bx-x"></i>
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </form>

    {{-- Table --}}
    @php
        $wfSortLink = function(string $col, string $label, string $curSort, string $curDir): string {
            $nextDir = ($curSort === $col && $curDir === 'asc') ? 'desc' : 'asc';
            $icon    = $curSort === $col
                ? ($curDir === 'asc' ? '<i class="bx bx-up-arrow-alt"></i>' : '<i class="bx bx-down-arrow-alt"></i>')
                : '<i class="bx bx-sort-alt-2 text-muted"></i>';
            $url = request()->fullUrlWithQuery(['sort_by' => $col, 'sort_dir' => $nextDir, 'page' => 1]);
            return '<a href="' . $url . '" class="text-dark text-decoration-none d-inline-flex align-items-center gap-1">'
                 . e($label) . $icon . '</a>';
        };
    @endphp

    <div class="table-responsive px-1">
        <table class="table table-hover table-sm mb-0">
            <thead class="table-light">
                <tr>
                    <th>{!! $wfSortLink('name',            'Form Name',   $sortBy, $sortDir) !!}</th>
                    <th>{!! $wfSortLink('group_name',      'Group',       $sortBy, $sortDir) !!}</th>
                    <th>{!! $wfSortLink('form_sender_name','Form Sender', $sortBy, $sortDir) !!}</th>
                    <th>E-Sign Docs</th>
                    <th>Status</th>
                    <th>{!! $wfSortLink('created_by_name', 'Created By',  $sortBy, $sortDir) !!}</th>
                    <th>{!! $wfSortLink('created_at',      'Created At',  $sortBy, $sortDir) !!}</th>
                    <th>{!! $wfSortLink('updated_at',      'Updated At',  $sortBy, $sortDir) !!}</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($forms as $form)
                <tr>
                    <td><strong>{{ $form->name }}</strong></td>
                    <td class="small text-muted">{{ $form->group_name ?: '—' }}</td>
                    <td class="small">{{ $form->form_sender_name ?: 'N/A' }}</td>
                    <td>
                        @forelse($form->esignMaps as $map)
                            @if($map->document)
                                <a href="{{ \Storage::url($map->document->file_path ?? '') }}"
                                   target="_blank"
                                   class="badge bg-warning text-dark text-decoration-none me-1">
                                    {{ $map->document->title }}
                                </a>
                            @endif
                        @empty
                            <span class="text-muted small">None</span>
                        @endforelse
                    </td>
                    <td>
                        @if($form->status)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif
                    </td>
                    <td class="small">{{ $form->created_by_name ?: 'N/A' }}</td>
                    <td class="small text-muted">
                        {{ $form->created_at ? $form->created_at->format('M d, Y') : '—' }}
                    </td>
                    <td class="small text-muted">
                        {{ $form->updated_at ? $form->updated_at->format('M d, Y') : '—' }}
                    </td>
                    <td class="text-end">
                        <div class="d-flex justify-content-end gap-1">
                            {{-- View Sample Form (WF_019 / WF_020 / WF_033) --}}
                            <a href="{{ route('webform.public.show', $form->public_slug) }}"
                               target="_blank"
                               class="btn btn-xs btn-outline-success"
                               title="View Sample Form">
                                <i class="bx bx-show"></i>
                            </a>
                            {{-- Share --}}
                            <a href="{{ route('manages.web-forms.share', $form->id) }}"
                               class="btn btn-xs btn-outline-secondary show-modal-lg"
                               title="Share">
                                <i class="bx bx-share-alt"></i>
                            </a>
                            {{-- Settings (WF_034) — icon changed from bx-edit to bx-cog --}}
                            <a href="{{ route('manages.web-forms.edit', $form->id) }}"
                               class="btn btn-xs btn-outline-primary show-modal-lg"
                               title="Settings">
                                <i class="bx bx-cog"></i>
                            </a>
                            {{-- Form Builder --}}
                            <a href="{{ route('manages.web-forms.builder', $form->id) }}"
                               class="btn btn-xs btn-outline-info"
                               title="Form Builder">
                                <i class="bx bx-layout"></i>
                            </a>
                            {{-- Duplicate --}}
                            <button type="button"
                                    class="btn btn-xs btn-outline-warning btn-duplicate-form"
                                    data-id="{{ $form->id }}"
                                    title="Duplicate">
                                <i class="bx bx-copy"></i>
                            </button>
                            {{-- Delete --}}
                            <button type="button"
                                    class="btn btn-xs btn-outline-danger btn-delete-form"
                                    data-id="{{ $form->id }}"
                                    data-name="{{ $form->name }}"
                                    title="Delete">
                                <i class="bx bx-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center text-muted py-4">
                        <i class="bx bx-folder-open bx-lg"></i>
                        <p class="mt-2 mb-0">
                            @if($search)
                                No web forms match &ldquo;{{ $search }}&rdquo;.
                                <a href="{{ request()->fullUrlWithQuery(['search' => '', 'page' => 1]) }}"
                                   class="ms-1">Clear search</a>
                            @elseif($groupId)
                                No web forms in the selected group.
                            @else
                                No web forms found.
                                <a href="{{ route('manages.web-forms.create') }}"
                                   class="show-modal ms-1">Create your first form</a>
                                or
                                <a href="{{ route('manages.web-form-groups.create') }}"
                                   class="show-modal ms-1">create a group</a>.
                            @endif
                        </p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination footer --}}
    <div class="d-flex justify-content-between align-items-center px-3 py-2 border-top flex-wrap gap-2">
        <small class="text-muted">
            @if($forms->total() > 0)
                Showing {{ $forms->firstItem() }}–{{ $forms->lastItem() }}
                of {{ $forms->total() }} result{{ $forms->total() !== 1 ? 's' : '' }}
            @else
                No results
            @endif
        </small>
        {{ $forms->links('pagination::bootstrap-5') }}
    </div>

</div>

@endsection

@push('page_script')
<script>
(function($) {
    // Debounced live search
    var _wfSearchTimer;
    $('#wfSearchInput').on('input', function() {
        clearTimeout(_wfSearchTimer);
        _wfSearchTimer = setTimeout(function() {
            $('#wfFilterForm').submit();
        }, 400);
    });

    // Delete form
    $(document).on('click', '.btn-delete-form', function() {
        var id   = $(this).data('id');
        var name = $(this).data('name');
        if (!confirm('Delete form "' + name + '"? This cannot be undone.')) return;
        $.ajax({
            url:    '/admin/manages/web-forms/' + id,
            method: 'POST',
            data:   { _token: '{{ csrf_token() }}', _method: 'DELETE' },
            success: function(res) {
                if (res && res.status === 200) {
                    if (typeof toastr !== 'undefined') toastr.success(res.message);
                    location.reload();
                } else {
                    alert(res.message || 'Failed to delete form.');
                }
            },
            error: function() { alert('An error occurred.'); }
        });
    });

    // Duplicate form
    $(document).on('click', '.btn-duplicate-form', function() {
        var id  = $(this).data('id');
        var btn = $(this);
        btn.prop('disabled', true);
        $.ajax({
            url:    '/admin/manages/web-forms/' + id + '/duplicate',
            method: 'POST',
            data:   { _token: '{{ csrf_token() }}' },
            success: function(res) {
                btn.prop('disabled', false);
                if (res && res.status === 200) {
                    if (typeof toastr !== 'undefined') toastr.success(res.message);
                    location.reload();
                } else {
                    alert(res.message || 'Failed to duplicate form.');
                }
            },
            error: function() { btn.prop('disabled', false); alert('An error occurred.'); }
        });
    });
})(jQuery);
</script>
@endpush