@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">

    {{-- HEADER --}}
    <div class="card-header p-4 border-bottom bg-body">
        <h4 class="mb-0">
            {{ isset($contactType) ? 'Edit Contact Type' : 'Create Contact Type' }}
        </h4>
    </div>

    {{-- BODY --}}
    <div class="card-body p-4">

        {{-- TITLE --}}
        <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', $contactType->title ?? '') }}"
                   maxlength="255">

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

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

			<input type="hidden"
				   name="color"
				   id="color-input"
				   value="{{ old('color', $contactType->color ?? '#000000') }}">
		</div>
        {{-- STATUS --}}
        <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', $contactType->status ?? 1) ? 'checked' : '' }}>
                <label class="form-label form-check-label">
                    Active
                </label>
            </div>
        </div>

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

            <a href="{{ route('admin.contact-types.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,
                    // ❌ save button removed
                }
            }
        });

        pickr.on('change', (color) => {

            const value = color.toHEXA().toString();

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

            // (optional) UI preview add kar sakte ho yaha

            pickr.setColor(value); // sync UI
        });

    });

});
</script>
@endpush