@extends('admin.layouts.app')

@section('title', $title)

@section('content')
<div class="col-md-12">
    <div class="row mb-3">
        <div class="col-md-9">
            <h4 class="c-grey-900">
                {{ $title }}
                <a class="btn btn-primary" href="{{ route('ch-admin.registration-fields.create') }}">
                    <i class="ti-plus"></i>
                </a>
            </h4>
            <p class="text-muted">Add extra fields that appear on the user registration form. Values are stored per-user and visible in the user edit panel.</p>
        </div>
    </div>

    @include('admin.layouts.notifications')

    <div class="bgc-white bd bdrs-3 p-20 mB-20">
        @if($fields->isEmpty())
            <p class="text-muted">No custom registration fields yet. <a href="{{ route('ch-admin.registration-fields.create') }}">Add one</a>.</p>
        @else
            <table id="fields-table" class="table table-striped">
                <thead>
                    <tr>
                        <th style="width:40px">#</th>
                        <th>Label</th>
                        <th>Field Name</th>
                        <th>Type</th>
                        <th>Required</th>
                        <th>Active</th>
                        <th>Sort</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="sortable-fields">
                    @foreach($fields as $field)
                        <tr data-id="{{ $field->id }}">
                            <td><i class="ti-menu cursor-move" style="cursor:move" title="Drag to reorder"></i></td>
                            <td>{{ $field->label }}</td>
                            <td><code>{{ $field->name }}</code></td>
                            <td><span class="badge badge-secondary">{{ $field->type }}</span></td>
                            <td>
                                @if($field->is_required)
                                    <span class="badge badge-danger">Yes</span>
                                @else
                                    <span class="badge badge-light">No</span>
                                @endif
                            </td>
                            <td>
                                @if($field->is_active)
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-warning">Inactive</span>
                                @endif
                            </td>
                            <td>{{ $field->sort_order }}</td>
                            <td>
                                <a href="{{ route('ch-admin.registration-fields.edit', $field->id) }}" class="btn btn-sm btn-info">
                                    <i class="ti-pencil"></i>
                                </a>
                                <form action="{{ route('ch-admin.registration-fields.destroy', $field->id) }}" method="POST" style="display:inline-block" onsubmit="return confirm('Delete this field? Stored user values will remain in the database.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger"><i class="ti-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>

@if($fields->count() > 1)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
    var sortable = Sortable.create(document.getElementById('sortable-fields'), {
        animation: 150,
        handle: '.ti-menu',
        onEnd: function () {
            var order = [];
            document.querySelectorAll('#sortable-fields tr[data-id]').forEach(function (row) {
                order.push(row.getAttribute('data-id'));
            });
            fetch('{{ route('ch-admin.registration-fields.reorder') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ order: order })
            });
        }
    });
</script>
@endif
@endsection