@extends('admin.layouts.app')

@section('title', 'Create Service')

@section('content')

<style>
    /* ============================================
       CREATE SERVICE - CUSTOM STYLES
    ============================================ */

    .form-section .form-group-custom:last-child {
        margin-bottom: 0;
    }

    .image-preview-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 12px 16px;
        background: #F8F9FA;
        border-radius: 10px;
        border: 1px solid #E8E8E8;
        margin-top: 8px;
    }

    .image-preview-wrapper img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #E8E8E8;
    }

    .image-preview-wrapper .file-name {
        font-size: 13px;
        color: #1A1A2E;
        font-weight: 500;
    }

    .image-preview-wrapper .file-size {
        font-size: 12px;
        color: #6B7280;
    }

    .image-preview-wrapper .remove-file {
        background: none;
        border: none;
        color: #DC2626;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .image-preview-wrapper .remove-file:hover {
        transform: scale(1.2);
    }

    .file-upload-area {
        border: 2px dashed #E8E8E8;
        border-radius: 10px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #FAFBFC;
    }

    .file-upload-area:hover {
        border-color: #C1121F;
        background: rgba(193, 18, 31, 0.02);
    }

    .file-upload-area i {
        font-size: 32px;
        color: #C1121F;
        opacity: 0.4;
        display: block;
        margin-bottom: 8px;
    }

    .file-upload-area p {
        font-size: 14px;
        color: #6B7280;
        margin: 0;
    }

    .file-upload-area small {
        font-size: 12px;
        color: #9CA3AF;
    }

    .slug-preview {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        background: #F8F9FA;
        border-radius: 6px;
        border: 1px solid #E8E8E8;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
        color: #6B7280;
        margin-top: 6px;
    }

    .slug-preview code {
        color: #C1121F;
        font-weight: 600;
        background: transparent;
        padding: 0;
    }

    .btn-regenerate {
        background: none;
        border: none;
        color: #6B7280;
        cursor: pointer;
        padding: 2px 8px;
        font-size: 12px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-regenerate:hover {
        color: #C1121F;
    }

    @media (max-width: 576px) {
        .form-section {
            padding: 14px 16px !important;
        }

        .image-preview-wrapper {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }
</style>

<!-- ============================================
   CREATE SERVICE - REDSPIDER THEME
============================================ -->

<div class="pages-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li>
                <a href="{{ route('admin.services.index') }}">
                    <i class="bi bi-briefcase"></i> Services
                </a>
            </li>
            <li class="active">Create Service</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Create Service</h1>
            <p>
                <i class="bi bi-plus-circle"></i> Add a new service
            </p>
        </div>
        <a href="{{ route('admin.services.index') }}" class="btn-back">
            <i class="bi bi-arrow-left"></i> Back to Services
        </a>
    </div>

    <!-- ===== FORM CARD ===== -->
    <div class="form-card">

        <!-- ===== INCLUDE FORM ===== -->
        @include('admin.services._form')

    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // AUTO SLUG GENERATION
        // ============================================
        const titleInput = document.querySelector('input[name="title"]');
        const slugInput = document.querySelector('input[name="slug"]');

        if (titleInput && slugInput) {
            titleInput.addEventListener('keyup', function() {
                if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                    const slug = this.value
                        .toLowerCase()
                        .replace(/[^a-z0-9]+/g, '-')
                        .replace(/^-+|-+$/g, '');
                    slugInput.value = slug;
                    slugInput.dataset.autoGenerated = 'true';
                }
            });

            if (!slugInput.value) {
                slugInput.dataset.autoGenerated = 'true';
            }
        }

        // ============================================
        // IMAGE PREVIEW
        // ============================================
        const imageInput = document.querySelector('input[name="hero_image"]');
        const previewContainer = document.getElementById('imagePreview');

        if (imageInput && previewContainer) {
            imageInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewContainer.innerHTML = `
                            <div class="image-preview-wrapper">
                                <img src="${e.target.result}" alt="Preview">
                                <div>
                                    <div class="file-name">${file.name}</div>
                                    <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div>
                                </div>
                                <button type="button" class="remove-file" onclick="removeImage()">
                                    <i class="bi bi-x-circle"></i>
                                </button>
                            </div>
                        `;
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        // ============================================
        // REMOVE IMAGE
        // ============================================
        window.removeImage = function() {
            const previewContainer = document.getElementById('imagePreview');
            const imageInput = document.querySelector('input[name="hero_image"]');

            if (previewContainer) {
                previewContainer.innerHTML = `
                    <div class="file-upload-area" onclick="document.querySelector('input[name=\\'hero_image\\']').click()">
                        <i class="bi bi-cloud-upload"></i>
                        <p>Click to upload hero image</p>
                        <small>PNG, JPG, WEBP (Max 2MB)</small>
                    </div>
                `;
            }

            if (imageInput) {
                imageInput.value = '';
            }
        };

        // ============================================
        // STATUS TOGGLE FOR PUBLISHED AT
        // ============================================
        const statusSelect = document.getElementById('status');
        const publishedAtGroup = document.getElementById('publishedAtGroup');

        if (statusSelect && publishedAtGroup) {
            statusSelect.addEventListener('change', function() {
                if (this.value === 'published') {
                    publishedAtGroup.style.display = 'block';
                } else {
                    publishedAtGroup.style.display = 'none';
                }
            });
        }

        // ============================================
        // META CHARACTER COUNTERS
        // ============================================
        const metaTitle = document.getElementById('meta_title');
        const metaTitleCount = document.getElementById('metaTitleCount');
        const metaDesc = document.getElementById('meta_description');
        const metaDescCount = document.getElementById('metaDescCount');

        if (metaTitle && metaTitleCount) {
            metaTitle.addEventListener('input', function() {
                const count = this.value.length;
                metaTitleCount.textContent = count + ' / 60 characters';
                metaTitleCount.style.color = count > 60 ? '#DC2626' : '#6B7280';
            });
            setTimeout(function() {
                metaTitle.dispatchEvent(new Event('input'));
            }, 100);
        }

        if (metaDesc && metaDescCount) {
            metaDesc.addEventListener('input', function() {
                const count = this.value.length;
                metaDescCount.textContent = count + ' / 160 characters';
                metaDescCount.style.color = count > 160 ? '#DC2626' : '#6B7280';
            });
            setTimeout(function() {
                metaDesc.dispatchEvent(new Event('input'));
            }, 100);
        }

        // ============================================
        // FORM VALIDATION
        // ============================================
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const title = document.querySelector('input[name="title"]');
                if (title && !title.value.trim()) {
                    e.preventDefault();
                    title.classList.add('is-invalid');
                    alert('Please enter a service title.');
                    title.focus();
                }
            });

            document.querySelectorAll('.form-control-custom').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });
        }

        console.log('✅ Create Service loaded successfully!');
    });
</script>

@endsection