@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
@endpush
<div class="card shadow-none border my-4 admin-contact-section">
    <div class="card-header p-4 border-bottom bg-body">
        <h4 class="mb-0">
            {{ isset($marketingSource) ? 'Edit Marketing Source' : 'Create Marketing Source' }}
        </h4>
    </div>

    <div class="card-body p-4">
        <div class="mb-3">
            <label class="form-label">Title <span class="text-danger">*</span></label>
            <input type="text"
                   name="title"
                   class="form-control"
                   value="{{ old('title', $marketingSource->title ?? '') }}"
                   maxlength="255">

            @error('title')
                <div class="checkbox-error-msg text-danger mt-2 invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label class="form-label">Color</label>

            <div class="dpb-color-picker"
                    data-setting-key="color"
                    data-value="{{ old('color', $marketingSource->color ?? '#000000') }}">
            </div>

            <input type="hidden"
                    name="color"
                    id="color-input"
                    value="{{ old('color', $marketingSource->color ?? '#000000') }}">
        </div>

        <div class="mt-4 mb-3 border-top pt-3 d-flex">
            <input type="hidden" name="status" value="0">

            <div class="form-check form-switch">
                <input class="form-check-input"
                        type="checkbox"
                        name="status"
                        value="1"
                        {{ old('status', $marketingSource->status ?? 1) ? 'checked' : '' }}>
                <label class="form-label form-check-label">
                    Active
                </label>
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
                {{ isset($marketingSource) ? 'Update' : 'Save' }}
            </button>

            <a href="{{ route('admin.marketing-sources.index') }}"
                class="btn btn-secondary">
                Back
            </a>
        </div>

    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.dpb-color-picker').forEach(el => {
        const settingKey = el.dataset.settingKey;
        const defaultColor = el.dataset.value || '#000000';

        const pickr = Pickr.create({
            el: el,
            theme: 'nano',
            default: defaultColor,
            components: {
                preview: true,
                opacity: true,
                hue: true,
                interaction: {
                    input: true,
                }
            }
        });

        pickr.on('change', (color) => {
            const value = color.toHEXA().toString();

            if (settingKey === 'color') {
                document.getElementById('color-input').value = value;
            }

            pickr.setColor(value);
        });
    });
});
</script>
@endpush