@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
    '',
    $headerOption['subTitle'] ?? '',
    [],
    [],
    false,
    []
))
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <div class="project-box">
        @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

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">Web Forms</h5>
            <a href="{{ route('manages.web-form-groups.create') }}" class="btn btn-success show-modal">
                <i class="bx bx-plus"></i> New Form Group
            </a>
        </div>

        @if($groups->isEmpty())
            <div class="text-center text-muted py-5">
                <i class="bx bx-folder-open bx-lg"></i>
                <p class="mt-2">No form groups yet. Create a group to organize your web forms.</p>
                <a href="{{ route('manages.web-form-groups.create') }}" class="btn btn-primary show-modal">
                    <i class="bx bx-plus"></i> Create First Group
                </a>
            </div>
        @else
        <div class="accordion" id="webFormGroupsAccordion">
            @foreach($groups as $group)
            <div class="accordion-item mb-3 border rounded" id="group-{{ $group->id }}">
                <div class="accordion-header d-flex justify-content-between align-items-center p-3 bg-light rounded-top">
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-sm btn-link text-dark p-0 text-decoration-none"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#groupCollapse{{ $group->id }}"
                                aria-expanded="true">
                            <i class="bx bx-folder me-1"></i>
                            <strong>{{ $group->name }}</strong>
                            <span class="badge bg-secondary ms-2">{{ $group->forms->count() }}</span>
                        </button>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                        <a href="{{ route('manages.web-forms.create', ['group' => $group->id]) }}"
                           class="btn btn-sm btn-success show-modal-lg">
                            <i class="bx bx-plus"></i> Add Form
                        </a>
                        <a href="{{ route('manages.web-form-groups.edit', $group->id) }}"
                           class="btn btn-sm btn-outline-secondary show-modal" title="Edit Group">
                            <i class="bx bx-edit"></i>
                        </a>
                        <button type="button"
                                class="btn btn-sm btn-outline-danger btn-delete-group"
                                data-id="{{ $group->id }}"
                                data-name="{{ $group->name }}"
                                title="Delete Group">
                            <i class="bx bx-trash"></i>
                        </button>
                    </div>
                </div>

                <div id="groupCollapse{{ $group->id }}" class="collapse show accordion-body p-0">
                    @if($group->forms->isEmpty())
                        <div class="text-center text-muted py-3">
                            No forms in this group.
                            <a href="{{ route('manages.web-forms.create', ['group' => $group->id]) }}"
                               class="show-modal-lg ms-1">Create one</a>
                        </div>
                    @else
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Form Name</th>
                                    <th>Type</th>
                                    <th>E-Sign Docs</th>
                                    <th>Status</th>
                                    <th>Fields</th>
                                    <th>Created</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($group->forms as $form)
                                <tr>
                                    <td>
                                        <strong>{{ $form->name }}</strong>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $form->form_type == 2 ? 'info' : 'primary' }}">
                                            {{ $form->getFormTypeLabel() }}
                                        </span>
                                    </td>
                                    <td>
                                        @foreach($form->esignMaps as $map)
                                            @if($map->document)
                                                <span class="badge bg-warning text-dark">{{ $map->document->title }}</span>
                                            @endif
                                        @endforeach
                                    </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 text-muted">{{ $form->fields_count }}</td>
                                    <td class="small text-muted">{{ $form->created_at ? $form->created_at->format('M d, Y') : '—' }}</td>
                                    <td class="text-end">
                                        <div class="d-flex justify-content-end gap-1">
                                            {{-- 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>
                                            {{-- Edit --}}
                                            <a href="{{ route('manages.web-forms.edit', $form->id) }}"
                                               class="btn btn-xs btn-outline-primary show-modal-lg"
                                               title="Edit Settings">
                                                <i class="bx bx-edit"></i>
                                            </a>
                                            {{-- 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>
                                            {{-- View Public --}}
                                            <a href="{{ route('webform.public.show', $form->public_slug) }}"
                                               target="_blank"
                                               class="btn btn-xs btn-outline-success"
                                               title="View Public Form">
                                                <i class="bx bx-show"></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>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection

@push('page_script')
<script>
(function($) {
    // 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.'); }
        });
    });

    // Delete group
    $(document).on('click', '.btn-delete-group', function() {
        var id   = $(this).data('id');
        var name = $(this).data('name');
        if (!confirm('Delete group "' + name + '" and all its forms? This cannot be undone.')) return;
        $.ajax({
            url:    '/admin/manages/web-form-groups/' + 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 group.');
                }
            },
            error: function() { alert('An error occurred.'); }
        });
    });
})(jQuery);
</script>
@endpush