@php
    use App\Support\AppointmentFormFields;
    $formFieldSettings = $appSetting->formFields();
    $customFormFields = $appSetting->customFormFields();
    $termsSettings = $appSetting->terms();
@endphp

<p class="text-muted mb-3" style="font-size:13px;">
    Choose which fields appear on the frontend booking form and whether they are required.
</p>

<h6 class="fw-bold text-muted mb-2">Standard Fields</h6>
<div class="table-responsive">
    <table class="table table-sm align-middle mb-0" style="font-size:13px;">
        <thead class="table-light">
            <tr>
                <th>Field</th>
                <th class="text-center" style="width:90px;">Show</th>
                <th class="text-center" style="width:90px;">Required</th>
            </tr>
        </thead>
        <tbody>
            @foreach(AppointmentFormFields::DEFINITIONS as $key => $def)
            @php
                $visible = !empty($formFieldSettings[$key]['visible']);
                $required = !empty($formFieldSettings[$key]['required']);
            @endphp
            <tr>
                <td>{{ $def['label'] }}</td>
                <td class="text-center">
                    <input type="checkbox"
                           class="form-check-input appt-field-visible"
                           name="form_fields[{{ $key }}][visible]"
                           value="1"
                           data-field="{{ $key }}"
                           {{ $visible ? 'checked' : '' }}>
                </td>
                <td class="text-center">
                    <input type="checkbox"
                           class="form-check-input appt-field-required"
                           name="form_fields[{{ $key }}][required]"
                           value="1"
                           data-field="{{ $key }}"
                           {{ $required ? 'checked' : '' }}
                           {{ $visible ? '' : 'disabled' }}>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<hr class="my-4">

<h6 class="fw-bold text-muted mb-2">Additional Fields</h6>
<p class="text-muted mb-3" style="font-size:13px;">
    Add your own custom fields for the booking form. Use Remove to delete a field.
</p>

<div class="table-responsive">
    <table class="table table-sm align-middle mb-2" style="font-size:13px;" id="customFieldsTable">
        <thead class="table-light">
            <tr>
                <th>Field Label</th>
                <th style="width:120px;">Type</th>
                <th class="text-center" style="width:90px;">Show</th>
                <th class="text-center" style="width:90px;">Required</th>
                <th style="width:70px;"></th>
            </tr>
        </thead>
        <tbody id="customFieldsBody">
            @forelse($customFormFields as $index => $field)
            <tr class="custom-field-row">
                <td>
                    <input type="hidden" name="custom_fields[{{ $index }}][id]" value="{{ $field['id'] }}">
                    <input type="text"
                           name="custom_fields[{{ $index }}][label]"
                           class="form-control form-control-sm"
                           value="{{ $field['label'] }}"
                           placeholder="e.g. Company Name"
                           required>
                </td>
                <td>
                    <select name="custom_fields[{{ $index }}][type]" class="form-select form-select-sm">
                        <option value="text" {{ ($field['type'] ?? 'text') === 'text' ? 'selected' : '' }}>Text</option>
                        <option value="textarea" {{ ($field['type'] ?? 'text') === 'textarea' ? 'selected' : '' }}>Textarea</option>
                    </select>
                </td>
                <td class="text-center">
                    <input type="checkbox"
                           class="form-check-input custom-field-visible"
                           name="custom_fields[{{ $index }}][visible]"
                           value="1"
                           data-index="{{ $index }}"
                           {{ !empty($field['visible']) ? 'checked' : '' }}>
                </td>
                <td class="text-center">
                    <input type="checkbox"
                           class="form-check-input custom-field-required"
                           name="custom_fields[{{ $index }}][required]"
                           value="1"
                           data-index="{{ $index }}"
                           {{ !empty($field['required']) ? 'checked' : '' }}
                           {{ !empty($field['visible']) ? '' : 'disabled' }}>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-custom-field">Remove</button>
                </td>
            </tr>
            @empty
            @endforelse
        </tbody>
    </table>
</div>

<button type="button" class="btn btn-sm btn-outline-dark" id="addCustomFieldBtn">+ Add Field</button>

<hr class="my-4">

<h6 class="fw-bold text-muted mb-2">Terms &amp; Conditions</h6>
<p class="text-muted mb-3" style="font-size:13px;">
    Edit the checkbox text shown on the frontend booking form before submit.
</p>

<div class="table-responsive">
    <table class="table table-sm align-middle mb-0" style="font-size:13px;">
        <thead class="table-light">
            <tr>
                <th>Checkbox</th>
                <th>Text</th>
                <th class="text-center" style="width:90px;">Show</th>
                <th class="text-center" style="width:90px;">Required</th>
            </tr>
        </thead>
        <tbody>
            @foreach([
                'consent' => 'Contact Consent',
                'cancellation_fee' => 'Cancellation Policy',
            ] as $termKey => $termLabel)
            @php
                $term = $termsSettings[$termKey] ?? AppointmentFormFields::DEFAULT_TERMS[$termKey];
                $termVisible = !empty($term['visible']);
                $termRequired = !empty($term['required']);
            @endphp
            <tr>
                <td class="align-top">{{ $termLabel }}</td>
                <td>
                    <textarea name="terms_fields[{{ $termKey }}][text]"
                              class="form-control form-control-sm"
                              rows="3"
                              required>{{ $term['text'] }}</textarea>
                </td>
                <td class="text-center align-top">
                    <input type="checkbox"
                           class="form-check-input appt-term-visible"
                           name="terms_fields[{{ $termKey }}][visible]"
                           value="1"
                           data-term="{{ $termKey }}"
                           {{ $termVisible ? 'checked' : '' }}>
                </td>
                <td class="text-center align-top">
                    <input type="checkbox"
                           class="form-check-input appt-term-required"
                           name="terms_fields[{{ $termKey }}][required]"
                           value="1"
                           data-term="{{ $termKey }}"
                           {{ $termRequired ? 'checked' : '' }}
                           {{ $termVisible ? '' : 'disabled' }}>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<template id="customFieldRowTemplate">
    <tr class="custom-field-row">
        <td>
            <input type="hidden" name="custom_fields[__INDEX__][id]" value="">
            <input type="text"
                   name="custom_fields[__INDEX__][label]"
                   class="form-control form-control-sm"
                   placeholder="e.g. Company Name"
                   required>
        </td>
        <td>
            <select name="custom_fields[__INDEX__][type]" class="form-select form-select-sm">
                <option value="text">Text</option>
                <option value="textarea">Textarea</option>
            </select>
        </td>
        <td class="text-center">
            <input type="checkbox"
                   class="form-check-input custom-field-visible"
                   name="custom_fields[__INDEX__][visible]"
                   value="1"
                   data-index="__INDEX__"
                   checked>
        </td>
        <td class="text-center">
            <input type="checkbox"
                   class="form-check-input custom-field-required"
                   name="custom_fields[__INDEX__][required]"
                   value="1"
                   data-index="__INDEX__">
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-custom-field">Remove</button>
        </td>
    </tr>
</template>

<script>
(function() {
    function bindVisibleRequired(container) {
        container.querySelectorAll('.appt-field-visible, .custom-field-visible, .appt-term-visible').forEach(function(visibleCheckbox) {
            visibleCheckbox.addEventListener('change', function() {
                const row = this.closest('tr');
                const requiredCheckbox = row
                    ? row.querySelector('.appt-field-required, .custom-field-required, .appt-term-required')
                    : document.querySelector('.appt-field-required[data-field="' + this.dataset.field + '"], .appt-term-required[data-term="' + this.dataset.term + '"]');

                if (!requiredCheckbox) return;

                if (this.checked) {
                    requiredCheckbox.disabled = false;
                } else {
                    requiredCheckbox.checked = false;
                    requiredCheckbox.disabled = true;
                }
            });
        });
    }

    bindVisibleRequired(document);

    let customFieldIndex = {{ count($customFormFields) }};
    const body = document.getElementById('customFieldsBody');
    const template = document.getElementById('customFieldRowTemplate');

    document.getElementById('addCustomFieldBtn')?.addEventListener('click', function() {
        if (!body || !template) return;

        const html = template.innerHTML.replace(/__INDEX__/g, String(customFieldIndex++));
        body.insertAdjacentHTML('beforeend', html);
        bindVisibleRequired(body.lastElementChild);
    });

    document.addEventListener('click', function(event) {
        if (!event.target.classList.contains('remove-custom-field')) return;
        event.target.closest('.custom-field-row')?.remove();
    });
})();
</script>