@push('styles')
	<link href="{{ asset('admin_assets/vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
@endpush

@php
$isEdit = isset($blog);
@endphp





<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">
            {{ $isEdit ? 'Edit Blog' : 'Create Blog' }}
        </h4>
    </div>

    <div class="card-body p-4">

        {{-- TITLE --}}
        <div class="mb-3">
            <label class="form-label">Title<span class="text-danger">*</span></label>
            <input name="title"
                   id="title"
                   class="form-control"
                   value="{{ old('title', $blog->title ?? '') }}">
				   
			@error('title')
			           <div class="checkbox-error-msg text-danger mt-2 invalid-feedback">{{ $message }}</div>
			    @enderror
        </div>

        {{-- SLUG --}}
        <div class="mb-3">
            <label class="form-label">Slug  <span class="text-danger">*</span></label>
            <input name="slug"
                   id="slug"
                   class="form-control"
                   value="{{ old('slug', $blog->slug ?? '') }}">
            <small class="text-muted">
                Leave blank to auto-generate from title
            </small>
			@error('slug')
			          <div class="checkbox-error-msg text-danger mt-2 invalid-feedback">{{ $message }}</div>
			    @enderror
        </div>

        {{-- DESCRIPTION --}}
        <div class="mt-4">
            <label class="form-label">Description <span class="text-danger">*</span></label>
            <textarea name="content"
                      class="form-control editor ckeditor_large"
                      rows="5">{{ old('content', $blog->content ?? '') }}</textarea>
			@error('content')
			           <div class="checkbox-error-msg text-danger mt-2 invalid-feedback">{{ $message }}</div>
			    @enderror
        </div>

		
		
        <div class="row mt-3 g-3 align-items-start">

            {{-- CHOOSE PHOTO --}}
            <div class="col-md-6">
                <label class="form-label">Choose Photo</label>
                <input type="file" name="image" class="form-control">

                @if(!empty($blog?->image))
                    <div class="image-wrapper position-relative d-inline-block mt-2 uploaded_image_thumb"
                         data-id="{{ $blog->id }}"
                         data-model="Blog"
                         data-column="image"
                         data-path="uploads/blogs">

                        <img src="{{ asset('uploads/blogs/'.$blog->image) }}"
                             class="img-thumbnail"
                             width="80">

                        <button type="button"
                                class="remove-image-btn image-remove-btn image-remove-icon"
                                title="Remove image">
                            ×
                        </button>
                    </div>
                @endif
            </div>


        </div>


        {{-- META --}}
        <div class="mt-4">
            <label class="form-label">Meta Title</label>
            <textarea name="meta_title"
                      class="form-control">{{ old('meta_title', $blog->meta_title ?? '') }}</textarea>
        </div>

        <div class="mt-3">
            <label class="form-label">Meta Description</label>
            <textarea name="meta_desc"
                      class="form-control">{{ old('meta_desc', $blog->meta_desc ?? '') }}</textarea>
        </div>

        {{-- PUBLISH TYPE --}}
        <div class="mt-4">
            <label class="form-label d-block">Publish Type</label>

            <div class="d-flex gap-4">
                <div class="form-check">
                    <input class="form-check-input publishType"
                           type="radio"
                           name="publish_type"
                           value="publish_now"
                           {{ old('publish_type', $blog->publish_type ?? 'publish_now') === 'publish_now' ? 'checked' : '' }}>
                    <label class="form-check-label">Publish Now</label>
                </div>

                <div class="form-check">
                    <input class="form-check-input publishType"
                           type="radio"
                           name="publish_type"
                           value="publish_later"
                           {{ old('publish_type', $blog->publish_type ?? '') === 'publish_later' ? 'checked' : '' }}>
                    <label class="form-check-label">Publish Later</label>
                </div>
            </div>
        </div>

        {{-- PUBLISH DATE --}}
        <div class="mt-3" id="publishDateBox" style="display:none;">
            <label class="form-label">Publish Date </label>
           
				   
				   <div class="flatpickr-input-container">
						<div class="form-floating">

							<input
								type="text"
								id="startDatepicker"
								name="publish_date"
								class="form-control datetimepicker @error('publish_date') is-invalid @enderror"
								placeholder="Publish date"
								value="{{ old('publish_date', optional($blog->publish_date ?? null)->format('Y-m-d')) }}"
								data-options='{
									"disableMobile": true,
									"dateFormat": "Y-m-d",
									"minDate": "today"
								}'
							>

							<span class="uil uil-calendar-alt flatpickr-icon text-body-tertiary"></span>

							<label class="ps-6" for="startDatepicker">Publish date <span class="text-danger">*</span></label>

							@error('publish_date')
								<div class="invalid-feedback d-block">
									{{ $message }}
								</div>
							@enderror

						</div>
					</div>
					
        </div>

        {{-- BODY ID --}}
        <div class="mt-3">
            <label class="form-label">Body ID</label>
            <input name="body_id"
                   class="form-control"
                   value="{{ old('body_id', $blog->body_id ?? '') }}">
        </div>

        {{-- STATUS --}}
        <div class="mt-4 border-top pt-3">
            <input type="hidden" name="published" value="0">
            <div class="form-check form-switch">
                <input class="form-check-input"
                       type="checkbox"
                       name="published"
                       value="1"
                       {{ old('published', $blog->published ?? 1) ? 'checked' : '' }}>
                <label class="form-check-label">Published?</label>
            </div>
        </div>

        {{-- HIDE --}}
        <div class="mt-3">
            <input type="hidden" name="hide_from_public_blog" value="0">
            <div class="form-check form-switch">
                <input class="form-check-input"
                       type="checkbox"
                       name="hide_from_public_blog"
                       value="1"
                       {{ old('hide_from_public_blog', $blog->hide_from_public_blog ?? 0) ? 'checked' : '' }}>
                <label class="form-check-label">Hide from Public Blog?</label>
            </div>
        </div>

        {{-- ACTIONS --}}
        <div class="mt-4">
            <button class="btn btn-primary">
                {{ $isEdit ? 'Update' : 'Save' }}
            </button>

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

    </div>
</div>


@push('scripts')
<script src="{{ asset('admin_assets/ckeditor/ckeditor.js') }}"></script>
<script>
    window.CKEDITOR_UPLOAD_URL =
        '{{ asset("admin_assets/ckfinder") }}/core/connector/php/connector.php?command=QuickUpload';
</script>
<script src="{{ asset('admin_assets/assets/js/ckeditor-large.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initCkeditorFull();
    });
</script>
<script src="{{ asset('admin_assets/vendors/flatpickr/flatpickr.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const radios = document.querySelectorAll('.publishType');
    const box = document.getElementById('publishDateBox');
	 const titleInput = document.getElementById('title');
    const slugInput  = document.getElementById('slug');
	let slugTouched = false;
	 slugInput?.addEventListener('input', () => slugTouched = true);

    titleInput?.addEventListener('input', function () {
        if (!slugTouched) {
            slugInput.value = this.value
                .toLowerCase()
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/(^-|-$)/g, '');
        }
    });
	
    function toggleDate() {
        const selected = document.querySelector('input[name="publish_type"]:checked')?.value;
        box.style.display = selected === 'publish_later' ? 'block' : 'none';
    }

    radios.forEach(r => r.addEventListener('change', toggleDate));
    toggleDate();
});
</script>
@endpush