@extends('layouts.admin')

@section('header')
    {{ isset($caseStudy) ? 'Edit Case Study' : 'Create Case Study' }}
@endsection

@section('content')
    <div class="max-w-4xl mx-auto space-y-6">
        <!-- Header Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        {{ isset($caseStudy) ? 'Edit Case Study' : 'Create New Case Study' }}
                    </h1>
                    <p class="text-gray-600 mt-1">Fill in the details below to showcase your project</p>
                </div>
                <div class="hidden sm:flex items-center space-x-2 text-sm text-gray-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>Required fields marked with *</span>
                </div>
            </div>
        </div>

        <!-- Main Form -->
        <form action="{{ isset($caseStudy) ? route('admin.case-studies.update', $caseStudy) : route('admin.case-studies.store') }}" 
              method="POST" 
              enctype="multipart/form-data" 
              class="space-y-6">
            @csrf
            @if(isset($caseStudy))
                @method('PUT')
            @endif

            <!-- Basic Information Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        Basic Information
                    </h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Title -->
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-900 mb-2">
                            Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="title" id="title" 
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 @error('title') border-red-500 bg-red-50 @enderror"
                            placeholder="Enter case study title..."
                            value="{{ old('title', isset($caseStudy) ? $caseStudy->title : '') }}" required>
                        @error('title')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div>
                        <label for="slug" class="block text-sm font-medium text-gray-900 mb-2">
                            URL Slug
                        </label>
                        <input type="text" name="slug" id="slug" 
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 @error('slug') border-red-500 bg-red-50 @enderror"
                            placeholder="Auto-generated from title"
                            value="{{ old('slug', isset($caseStudy) ? $caseStudy->slug : '') }}">
                        <p class="text-gray-500 text-xs mt-1">Leave empty to auto-generate from title</p>
                        @error('slug')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Client & Sector -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="client" class="block text-sm font-medium text-gray-900 mb-2">
                                Client <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="client" id="client" 
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 @error('client') border-red-500 bg-red-50 @enderror"
                                placeholder="Client name"
                                value="{{ old('client', isset($caseStudy) ? $caseStudy->client : '') }}" required>
                            @error('client')
                                <p class="text-red-600 text-sm mt-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div>
                            <label for="sector" class="block text-sm font-medium text-gray-900 mb-2">
                                Sector <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="sector" id="sector" 
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 @error('sector') border-red-500 bg-red-50 @enderror"
                                placeholder="Industry sector"
                                value="{{ old('sector', isset($caseStudy) ? $caseStudy->sector : '') }}" required>
                            @error('sector')
                                <p class="text-red-600 text-sm mt-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <!-- Summary -->
                    <div>
                        <label for="summary" class="block text-sm font-medium text-gray-900 mb-2">
                            Summary <span class="text-red-500">*</span>
                        </label>
                        <textarea name="summary" id="summary" rows="3"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none @error('summary') border-red-500 bg-red-50 @enderror"
                            placeholder="Brief overview of the case study..."
                            required>{{ old('summary', isset($caseStudy) ? $caseStudy->summary : '') }}</textarea>
                        @error('summary')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Project Details Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-3">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        Project Details
                    </h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Challenge -->
                    <div>
                        <label for="challenge" class="block text-sm font-medium text-gray-900 mb-2">
                            Challenge <span class="text-red-500">*</span>
                        </label>
                        <textarea name="challenge" id="challenge" rows="5"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none @error('challenge') border-red-500 bg-red-50 @enderror"
                            placeholder="Describe the main challenges faced..."
                            required>{{ old('challenge', isset($caseStudy) ? $caseStudy->challenge : '') }}</textarea>
                        @error('challenge')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Solution -->
                    <div>
                        <label for="solution" class="block text-sm font-medium text-gray-900 mb-2">
                            Solution <span class="text-red-500">*</span>
                        </label>
                        <textarea name="solution" id="solution" rows="8"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none @error('solution') border-red-500 bg-red-50 @enderror"
                            placeholder="Explain the solution implemented..."
                            required>{{ old('solution', isset($caseStudy) ? $caseStudy->solution : '') }}</textarea>
                        @error('solution')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Results -->
                    <div>
                        <label for="results" class="block text-sm font-medium text-gray-900 mb-2">
                            Results <span class="text-red-500">*</span>
                        </label>
                        <textarea name="results" id="results" rows="5"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none @error('results') border-red-500 bg-red-50 @enderror"
                            placeholder="Describe the outcomes and results achieved..."
                            required>{{ old('results', isset($caseStudy) ? $caseStudy->results : '') }}</textarea>
                        @error('results')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Testimonial -->
                    <div>
                        <label for="testimonial" class="block text-sm font-medium text-gray-900 mb-2">
                            Testimonial
                        </label>
                        <textarea name="testimonial" id="testimonial" rows="3"
                            class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none @error('testimonial') border-red-500 bg-red-50 @enderror"
                            placeholder="Optional client testimonial...">{{ old('testimonial', isset($caseStudy) ? $caseStudy->testimonial : '') }}</textarea>
                        @error('testimonial')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Additional Details Section -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gradient-to-r from-purple-50 to-pink-50 px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                        <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                        Additional Details
                    </h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Project Timeline -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="completion_date" class="block text-sm font-medium text-gray-900 mb-2">
                                Completion Date
                            </label>
                            <input type="month" name="completion_date" id="completion_date" 
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 @error('completion_date') border-red-500 bg-red-50 @enderror"
                                value="{{ old('completion_date', isset($caseStudy) && $caseStudy->completion_date ? $caseStudy->completion_date->format('Y-m') : '') }}">
                            @error('completion_date')
                                <p class="text-red-600 text-sm mt-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div>
                            <label for="project_duration" class="block text-sm font-medium text-gray-900 mb-2">
                                Project Duration
                            </label>
                            <input type="text" name="project_duration" id="project_duration" 
                                class="block w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 @error('project_duration') border-red-500 bg-red-50 @enderror"
                                placeholder="e.g., 3 months"
                                value="{{ old('project_duration', isset($caseStudy) ? $caseStudy->project_duration : '') }}">
                            @error('project_duration')
                                <p class="text-red-600 text-sm mt-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    </div>

                    <!-- Image Upload -->
                    <div>
                        <label for="image" class="block text-sm font-medium text-gray-900 mb-2">
                            Featured Image
                            @if(isset($caseStudy) && $caseStudy->image)
                                <span class="text-gray-500 font-normal">(Leave empty to keep current image)</span>
                            @endif
                        </label>
                        
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors">
                            <input type="file" name="image" id="image" class="hidden" accept="image/*">
                            <label for="image" class="cursor-pointer">
                                <div class="space-y-3">
                                    <div class="mx-auto w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                                        </svg>
                                    </div>
                                    <div>
                                        <span class="text-blue-600 font-medium">Upload an image</span>
                                        <span class="text-gray-500"> or drag and drop</span>
                                    </div>
                                    <p class="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
                                </div>
                            </label>
                        </div>
                        
                        @error('image')
                            <p class="text-red-600 text-sm mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror

                        @if(isset($caseStudy) && $caseStudy->image)
                            <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                                <p class="text-sm font-medium text-gray-700 mb-2">Current Image:</p>
                                <img src="{{ asset('storage/case-studies/' . $caseStudy->image) }}" 
                                    alt="{{ $caseStudy->title }}" 
                                    class="h-32 w-auto object-cover rounded-lg border border-gray-200">
                            </div>
                        @endif
                    </div>

                    <!-- Settings -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Is Featured -->
                        <div class="flex items-start space-x-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="is_featured" id="is_featured" 
                                    class="w-4 h-4 text-blue-600 bg-white border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
                                    {{ old('is_featured', isset($caseStudy) && $caseStudy->is_featured ? 'checked' : '') }}>
                            </div>
                            <div class="text-sm">
                                <label for="is_featured" class="font-medium text-gray-900 cursor-pointer">Feature this case study</label>
                                <p class="text-gray-600">Featured case studies appear prominently on your website</p>
                            </div>
                        </div>

                        <!-- Is Published -->
                        <div class="flex items-start space-x-3 p-4 bg-green-50 rounded-lg border border-green-200">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="is_published" id="is_published" 
                                    class="w-4 h-4 text-green-600 bg-white border-gray-300 rounded focus:ring-green-500 focus:ring-2"
                                    {{ old('is_published', isset($caseStudy) && $caseStudy->is_published ? 'checked' : '') }}>
                            </div>
                            <div class="text-sm">
                                <label for="is_published" class="font-medium text-gray-900 cursor-pointer">Publish this case study</label>
                                <p class="text-gray-600">Published case studies are visible to the public</p>
                            </div>
                        </div>
                    </div>

                    @if($errors->has('is_featured') || $errors->has('is_published'))
                        <div class="space-y-1">
                            @error('is_featured')
                                <p class="text-red-600 text-sm flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                            @error('is_published')
                                <p class="text-red-600 text-sm flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>
                    @endif
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex items-center justify-end space-x-4 pt-6">
                <a href="{{ route('admin.case-studies.index') }}" 
                   class="px-6 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-3 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm hover:shadow-md transition-all duration-200">
                    {{ isset($caseStudy) ? 'Update Case Study' : 'Create Case Study' }}
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <script>
        // Auto generate slug from title
        document.getElementById('title').addEventListener('input', function() {
            const slug = document.getElementById('slug');
            if (!slug.value.trim()) {
                slug.value = this.value
                    .toLowerCase()
                    .replace(/[^\w\s-]/g, '')
                    .replace(/[\s_-]+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }
        });

        // File upload enhancement
        const imageInput = document.getElementById('image');
        const uploadLabel = imageInput.nextElementSibling;

        imageInput.addEventListener('change', function(e) {
            if (e.target.files.length > 0) {
                const file = e.target.files[0];
                const fileName = file.name;
                
                // Update the upload area to show selected file
                uploadLabel.innerHTML = `
                    <div class="space-y-3">
                        <div class="mx-auto w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <div>
                            <span class="text-green-600 font-medium">${fileName}</span>
                        </div>
                        <p class="text-xs text-gray-500">File selected successfully</p>
                    </div>
                `;
            }
        });

        // Drag and drop functionality
        const uploadArea = uploadLabel.parentElement;

        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('border-blue-500', 'bg-blue-50');
        });

        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('border-blue-500', 'bg-blue-50');
        });

        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('border-blue-500', 'bg-blue-50');
            
            const files = e.dataTransfer.files;
            if (files.length > 0 && files[0].type.startsWith('image/')) {
                imageInput.files = files;
                
                // Trigger change event
                const changeEvent = new Event('change', { bubbles: true });
                imageInput.dispatchEvent(changeEvent);
            }
        });
    </script>
    @endpush
@endsection