@extends('layouts.app')
@section('title', 'Lead Fields')
@section('page-title', 'Lead Fields Configuration')

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h5 class="mb-1" style="font-weight:700; font-size:17px;">Dynamic Lead Fields</h5>
        <p class="mb-0" style="color:var(--lp-muted); font-size:13px;">Add, edit or remove custom fields on the lead form</p>
    </div>
    <button class="btn-primary-lp" data-bs-toggle="modal" data-bs-target="#addFieldModal">
        <i class="bi bi-plus"></i> Add Field
    </button>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="lp-card">
            <div class="lp-card-header">
                <span><i class="bi bi-layout-text-sidebar me-2 text-primary"></i>Custom Fields</span>
                <span class="lp-badge bg-primary bg-opacity-10 text-primary">{{ $fields->count() }}</span>
            </div>
            @if($fields->isNotEmpty())
            <div class="table-responsive">
                <table class="lp-table">
                    <thead>
                        <tr>
                            <th style="width:30px;">#</th>
                            <th>Label</th>
                            <th>Type</th>
                            <th>Required</th>
                            <th>Status</th>
                            <th>System</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="fieldsBody">
                        @foreach($fields as $field)
                        <tr data-id="{{ $field->id }}">
                            <td style="color:var(--lp-muted); font-size:12px;">{{ $field->sort_order }}</td>
                            <td>
                                <div style="font-weight:600; font-size:13.5px;">{{ $field->field_label }}</div>
                                <div style="font-size:11px; color:var(--lp-muted); font-family:monospace;">{{ $field->field_name }}</div>
                            </td>
                            <td>
                                <span class="lp-badge bg-info bg-opacity-10 text-info" style="font-size:11px;">
                                    {{ ucfirst(str_replace('_',' ',$field->field_type)) }}
                                </span>
                            </td>
                            <td>
                                @if($field->is_required)
                                <span class="lp-badge bg-danger bg-opacity-10 text-danger" style="font-size:11px;"><i class="bi bi-asterisk"></i> Yes</span>
                                @else
                                <span style="color:var(--lp-muted); font-size:12px;">Optional</span>
                                @endif
                            </td>
                            <td>
                                @if($field->is_active)
                                <span class="lp-badge bg-success bg-opacity-10 text-success" style="font-size:11px;"><i class="bi bi-circle-fill" style="font-size:7px;"></i> Active</span>
                                @else
                                <span class="lp-badge bg-secondary bg-opacity-10 text-secondary" style="font-size:11px;"><i class="bi bi-circle" style="font-size:7px;"></i> Hidden</span>
                                @endif
                            </td>
                            <td>
                                @if($field->is_system)
                                <span class="lp-badge bg-warning bg-opacity-10 text-warning" style="font-size:11px;"><i class="bi bi-lock"></i> System</span>
                                @else
                                <span style="color:var(--lp-muted); font-size:12px;">Custom</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-primary edit-field-btn" style="border-radius:7px;"
                                            data-field="{{ json_encode($field) }}">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    @if(!$field->is_system)
                                    <form method="POST" action="{{ route('settings.fields.destroy', $field) }}">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" style="border-radius:7px;"
                                                data-confirm="Delete field '{{ $field->field_label }}'? All lead data for this field will be lost.">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="empty-state">
                <i class="bi bi-layout-text-sidebar"></i>
                <h6>No custom fields yet</h6>
                <p style="font-size:13px;">Add dynamic fields to extend the lead form.</p>
            </div>
            @endif
        </div>
    </div>

    <div class="col-lg-4">
        <div class="lp-card">
            <div class="lp-card-header"><span><i class="bi bi-info-circle me-2 text-primary"></i>Field Types</span></div>
            <div class="lp-card-body">
                <div style="font-size:13px;">
                    @foreach(['text'=>'Single-line text','number'=>'Numeric value','email'=>'Email address','phone'=>'Phone number','textarea'=>'Multi-line text','select'=>'Dropdown select','multi_select'=>'Multi-select','checkbox'=>'Checkbox (yes/no)','date'=>'Date picker','datetime'=>'Date & time','url'=>'URL/Link'] as $type => $desc)
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="lp-badge bg-info bg-opacity-10 text-info" style="min-width:90px; justify-content:center; font-size:10.5px;">{{ $type }}</span>
                        <span style="color:var(--lp-muted);">{{ $desc }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Add Field Modal --}}
<div class="modal fade" id="addFieldModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="POST" action="{{ route('settings.fields.store') }}" class="modal-content" style="border-radius:16px;">
            @csrf
            <div class="modal-header" style="border-bottom:1px solid var(--lp-border);">
                <h6 class="modal-title" style="font-weight:700;">Add Custom Field</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Field Label <span class="text-danger">*</span></label>
                        <input type="text" name="field_label" class="form-control" placeholder="e.g. Company Name" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Field Type <span class="text-danger">*</span></label>
                        <select name="field_type" class="form-select" id="fieldTypeSelect" onchange="handleFieldType()">
                            <option value="text">Text</option>
                            <option value="number">Number</option>
                            <option value="email">Email</option>
                            <option value="phone">Phone</option>
                            <option value="textarea">Textarea</option>
                            <option value="select">Select (Dropdown)</option>
                            <option value="multi_select">Multi-Select</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="date">Date</option>
                            <option value="datetime">Date & Time</option>
                            <option value="url">URL</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Placeholder</label>
                        <input type="text" name="placeholder" class="form-control" placeholder="Hint text for the field">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Section</label>
                        <input type="text" name="section" class="form-control" value="general" placeholder="general">
                    </div>
                    <div id="optionsSection" class="col-12" style="display:none;">
                        <label class="form-label">Options (one per line)</label>
                        <textarea name="field_options_raw" class="form-control" rows="4"
                                  placeholder="Option 1&#10;Option 2&#10;Option 3" id="fieldOptionsRaw"></textarea>
                        <div style="font-size:11.5px; color:var(--lp-muted); margin-top:4px;">Enter each option on a new line.</div>
                    </div>
                    <div class="col-12">
                        <label class="d-flex align-items-center gap-2" style="cursor:pointer;">
                            <input type="checkbox" name="is_required" value="1" style="accent-color:#3B6EFF;">
                            <span style="font-size:13.5px;">This field is required</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--lp-border);">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:9px;">Cancel</button>
                <button type="submit" class="btn-primary-lp">
                    <i class="bi bi-plus-circle me-1"></i>Add Field
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Field Modal --}}
<div class="modal fade" id="editFieldModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form id="editFieldForm" method="POST" class="modal-content" style="border-radius:16px;">
            @csrf @method('PUT')
            <div class="modal-header" style="border-bottom:1px solid var(--lp-border);">
                <h6 class="modal-title" style="font-weight:700;">Edit Field</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label">Field Label <span class="text-danger">*</span></label>
                        <input type="text" name="field_label" id="editFieldLabel" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Section</label>
                        <input type="text" name="section" id="editFieldSection" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Placeholder</label>
                        <input type="text" name="placeholder" id="editFieldPlaceholder" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="d-flex align-items-center gap-2 h-100" style="cursor:pointer; padding-top:24px;">
                            <input type="checkbox" name="is_required" value="1" id="editFieldRequired" style="accent-color:#3B6EFF;">
                            <span style="font-size:13.5px;">Required field</span>
                        </label>
                    </div>
                    <div class="col-md-6">
                        <label class="d-flex align-items-center gap-2" style="cursor:pointer; padding-top:4px;">
                            <input type="checkbox" name="is_active" value="1" id="editFieldActive" style="accent-color:#3B6EFF;" checked>
                            <span style="font-size:13.5px;">Field is active / visible</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--lp-border);">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:9px;">Cancel</button>
                <button type="submit" class="btn-primary-lp">
                    <i class="bi bi-check-lg me-1"></i>Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function handleFieldType() {
    const type = document.getElementById('fieldTypeSelect').value;
    const sec  = document.getElementById('optionsSection');
    sec.style.display = ['select','multi_select','radio'].includes(type) ? 'block' : 'none';
}

// Edit field modal
$(document).on('click', '.edit-field-btn', function() {
    const f = $(this).data('field');
    $('#editFieldForm').attr('action', `/settings/fields/${f.id}`);
    $('#editFieldLabel').val(f.field_label);
    $('#editFieldSection').val(f.section);
    $('#editFieldPlaceholder').val(f.placeholder);
    $('#editFieldRequired').prop('checked', !!f.is_required);
    $('#editFieldActive').prop('checked', !!f.is_active);
    new bootstrap.Modal(document.getElementById('editFieldModal')).show();
});

// Pre-process field_options before submit
$('#addFieldModal form').on('submit', function() {
    const raw  = $('#fieldOptionsRaw').val().trim();
    const opts = raw.split('\n').map(o => o.trim()).filter(Boolean);
    // Inject hidden inputs
    opts.forEach((opt, i) => {
        $(this).append(`<input type="hidden" name="field_options[]" value="${opt}">`);
    });
});
</script>
@endpush