@extends('layouts.admin')

@section('title', 'Add Book')
@section('breadcrumb', 'Add Book')

@section('content')
<div class="space-y-6">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center">
                <a href="{{ route('admin.books.index') }}" 
                   class="text-gray-600 hover:text-gray-900 mr-4">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Add New Book</h1>
                    <p class="mt-2 text-gray-600">Create a new book for your inventory</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <div class="bg-white shadow-sm rounded-lg">
            <form method="POST" action="{{ route('admin.books.store') }}" enctype="multipart/form-data" class="p-6">
                @csrf

                <!-- Error Messages -->
                @if($errors->any())
                    <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
                        <ul class="list-disc list-inside">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Tabs Navigation -->
                <div class="border-b border-gray-200 mb-6">
                    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                        <button type="button" id="tab-btn-details" onclick="switchBookTab('details')" 
                                class="book-tab-btn border-[#00BDE0] text-[#00BDE0] whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                            Book Details
                        </button>
                        <button type="button" id="tab-btn-shipping" onclick="switchBookTab('shipping')"
                                class="book-tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none flex items-center">
                            <span>State-Wise Shipping Rates</span>
                        </button>
                        <button type="button" id="tab-btn-bulk-shipping" onclick="switchBookTab('bulk-shipping')"
                                class="book-tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none flex items-center">
                            <span>Bulk Order Shipping Rates</span>
                        </button>
                    </nav>
                </div>

                <!-- Tab 1: Book Details -->
                <div id="tab-content-details" class="book-tab-content">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- Left Column -->
                    <div class="space-y-6">
                        <!-- Title -->
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                                Book Title <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="title" id="title" value="{{ old('title') }}" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('title') border-red-300 @enderror"
                                   placeholder="Enter book title">
                            @error('title')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Author -->
                        <div>
                            <label for="author" class="block text-sm font-medium text-gray-700 mb-1">
                                Author <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="author" id="author" value="{{ old('author') }}" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('author') border-red-300 @enderror"
                                   placeholder="Enter author name">
                            @error('author')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- ISBN -->
                        <div>
                            <label for="isbn" class="block text-sm font-medium text-gray-700 mb-1">
                                ISBN
                            </label>
                            <input type="text" name="isbn" id="isbn" value="{{ old('isbn') }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('isbn') border-red-300 @enderror"
                                   placeholder="Enter ISBN (e.g., 978-0123456789)"
                                   maxlength="20">
                            @error('isbn')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-sm text-gray-500">International Standard Book Number (optional)</p>
                        </div>

                        <!-- Category -->
                        <div>
                            <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">
                                Category <span class="text-red-500">*</span>
                            </label>
                            <select name="category_id" id="category_id" required
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('category_id') border-red-300 @enderror">
                                <option value="">Select a category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id', request('category_id')) == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Language -->
                        <div>
                            <label for="language" class="block text-sm font-medium text-gray-700 mb-1">
                                Language <span class="text-red-500">*</span>
                            </label>
                            <select name="language" id="language" required
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('language') border-red-300 @enderror">
                                <option value="English" {{ old('language', 'English') === 'English' ? 'selected' : '' }}>English</option>
                                <option value="Hindi" {{ old('language') === 'Hindi' ? 'selected' : '' }}>Hindi</option>
                                <option value="Gujarati" {{ old('language') === 'Gujarati' ? 'selected' : '' }}>Gujarati</option>
                            </select>
                            @error('language')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                                Description
                            </label>
                            <textarea name="description" id="description" rows="4"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('description') border-red-300 @enderror"
                                      placeholder="Enter book description">{{ old('description') }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="space-y-6">
                        <!-- Cover Image Upload -->
                        <div>
                            <label for="cover_image" class="block text-sm font-medium text-gray-700 mb-1">
                                Cover Image
                            </label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                                <div class="space-y-1 text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label for="cover_image" class="relative cursor-pointer bg-white rounded-md font-medium text-[#00BDE0] hover:text-[#00A5C7] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#00BDE0]">
                                            <span>Upload a file</span>
                                            <input id="cover_image" name="cover_image" type="file" accept="image/*" class="sr-only">
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 6MB</p>
                                </div>
                            </div>
                            @error('cover_image')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Multiple Images Upload -->
                        <div>
                            <label for="images" class="block text-sm font-medium text-gray-700 mb-1">
                                Additional Images (Optional)
                            </label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                                <div class="space-y-1 text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label for="images" class="relative cursor-pointer bg-white rounded-md font-medium text-[#00BDE0] hover:text-[#00A5C7] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#00BDE0]">
                                            <span>Upload multiple files</span>
                                            <input id="images" name="images[]" type="file" accept="image/*" multiple class="sr-only">
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 5MB each</p>
                                </div>
                            </div>
                            @error('images.*')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            
                            <!-- Selected Files Preview -->
                            <div id="selected-images-preview" class="mt-4 hidden">
                                <h5 class="text-sm font-medium text-gray-700 mb-2">Selected Images:</h5>
                                <div id="images-preview-list" class="grid grid-cols-3 gap-2"></div>
                            </div>
                        </div>

                        <!-- Pricing -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Price -->
                            <div>
                                <label for="price" class="block text-sm font-medium text-gray-700 mb-1">
                                    Price (₹) <span class="text-red-500">*</span>
                                </label>
                                <input type="number" name="price" id="price" value="{{ old('price') }}" required min="0" step="0.01"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('price') border-red-300 @enderror"
                                       placeholder="0.00">
                                @error('price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Shipping Price -->
                            <div>
                                <label for="shipping_price" class="block text-sm font-medium text-gray-700 mb-1">
                                    Default Shipping Price (₹)
                                </label>
                                <input type="number" name="shipping_price" id="shipping_price" value="{{ old('shipping_price', 0) }}" min="0" step="0.01"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('shipping_price') border-red-300 @enderror"
                                       placeholder="0.00">
                                @error('shipping_price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Fallback price if state-wise price is not configured</p>
                            </div>
                        </div>

                        <!-- Dimensions and Weight -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-900 mb-4">Physical Properties</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <!-- Height -->
                                <div>
                                    <label for="height" class="block text-sm font-medium text-gray-700 mb-1">
                                        Height (cm)
                                    </label>
                                    <input type="number" name="height" id="height" value="{{ old('height') }}" min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('height') border-red-300 @enderror"
                                           placeholder="0.00">
                                    @error('height')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Width -->
                                <div>
                                    <label for="width" class="block text-sm font-medium text-gray-700 mb-1">
                                        Width (cm)
                                    </label>
                                    <input type="number" name="width" id="width" value="{{ old('width') }}" min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('width') border-red-300 @enderror"
                                           placeholder="0.00">
                                    @error('width')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Depth -->
                                <div>
                                    <label for="depth" class="block text-sm font-medium text-gray-700 mb-1">
                                        Depth (cm)
                                    </label>
                                    <input type="number" name="depth" id="depth" value="{{ old('depth') }}" min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('depth') border-red-300 @enderror"
                                           placeholder="0.00">
                                    @error('depth')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Weight -->
                                <div>
                                    <label for="weight" class="block text-sm font-medium text-gray-700 mb-1">
                                        Weight (kg)
                                    </label>
                                    <input type="number" name="weight" id="weight" value="{{ old('weight') }}" min="0" step="0.01"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('weight') border-red-300 @enderror"
                                           placeholder="0.00">
                                    @error('weight')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Stock and Status -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Stock -->
                            <div>
                                <label for="stock" class="block text-sm font-medium text-gray-700 mb-1">
                                    Stock Status <span class="text-red-500">*</span>
                                </label>
                                <select name="stock" id="stock" required
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('stock') border-red-300 @enderror">
                                    <option value="">Select stock status</option>
                                    <option value="in_stock" {{ old('stock') === 'in_stock' ? 'selected' : '' }}>In Stock</option>
                                    <option value="limited_stock" {{ old('stock') === 'limited_stock' ? 'selected' : '' }}>Limited Stock</option>
                                    <option value="out_of_stock" {{ old('stock') === 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                                </select>
                                @error('stock')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Status -->
                            <div>
                                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">
                                    Status <span class="text-red-500">*</span>
                                </label>
                                <select name="status" id="status" required
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('status') border-red-300 @enderror">
                                    <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    <option value="out_of_stock" {{ old('status') === 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                                </select>
                                @error('status')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Quick Actions -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h4 class="text-sm font-medium text-gray-900 mb-2">Quick Tips</h4>
                            <ul class="text-sm text-gray-600 space-y-1">
                                <li>• Use high-quality images for better presentation</li>
                                <li>• Write detailed descriptions to attract customers</li>
                                <li>• Set competitive pricing for better sales</li>
                                <li>• Keep stock updated to avoid overselling</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 2: State-Wise Shipping Rates -->
            <div id="tab-content-shipping" class="book-tab-content hidden">
                    <div class="bg-gray-50 rounded-lg p-6 mb-6 border border-gray-200">
                        <h3 class="text-base font-semibold text-gray-900 mb-1">State-Wise Shipping Rates</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            Optionally configure custom shipping prices per state. If a state field is left blank, the product's <strong>Default Shipping Price</strong> will be applied during order checkout.
                        </p>

                        @if(count($states) > 0)
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                @foreach($states as $state)
                                    <div class="bg-white p-3.5 rounded-lg border border-gray-200 shadow-sm flex flex-col justify-between">
                                        <div class="flex items-center justify-between mb-2">
                                            <label for="state_price_{{ $state->id }}" class="text-sm font-medium text-gray-800">
                                                {{ $state->name }}
                                                @if($state->code)
                                                    <span class="text-xs text-gray-400 font-mono">({{ $state->code }})</span>
                                                @endif
                                            </label>
                                        </div>
                                        <div class="relative">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <span class="text-gray-500 sm:text-sm">₹</span>
                                            </div>
                                            <input type="number" 
                                                   name="state_shipping_prices[{{ $state->id }}]" 
                                                   id="state_price_{{ $state->id }}" 
                                                   value="{{ old('state_shipping_prices.'.$state->id) }}" 
                                                   min="0" step="0.01"
                                                   placeholder="Default"
                                                   class="w-full pl-7 pr-3 py-1.5 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] text-sm">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4 text-center">
                                <p class="text-sm text-yellow-800">No states found in the system. Default shipping price will apply to all orders.</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Tab 3: Bulk Order Shipping Rates -->
                <div id="tab-content-bulk-shipping" class="book-tab-content hidden">
                    <div class="bg-gray-50 rounded-lg p-6 mb-6 border border-gray-200">
                        <h3 class="text-base font-semibold text-gray-900 mb-1">Bulk Order Shipping Rates</h3>
                        <p class="text-sm text-gray-600 mb-4">
                            Configure state-wise shipping prices applied when an order for this book qualifies as a <span class="font-semibold">bulk purchase</span>. If a state field is left blank, the <strong>Default Bulk Shipping Price</strong> below will be used during bulk order checkout.
                        </p>

                        <!-- Default Bulk Shipping Price -->
                        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm mb-6 max-w-sm">
                            <label for="bulk_shipping_price" class="block text-sm font-medium text-gray-700 mb-1">
                                Default Bulk Shipping Price (₹)
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm">₹</span>
                                </div>
                                <input type="number" name="bulk_shipping_price" id="bulk_shipping_price"
                                       value="{{ old('bulk_shipping_price', 0) }}" min="0" step="0.01"
                                       class="w-full pl-7 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] @error('bulk_shipping_price') border-red-300 @enderror"
                                       placeholder="0.00">
                            </div>
                            @error('bulk_shipping_price')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-xs text-gray-500">Fallback bulk price if a state-wise bulk price is not configured</p>
                        </div>

                        @if(count($states) > 0)
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                @foreach($states as $state)
                                    <div class="bg-white p-3.5 rounded-lg border border-gray-200 shadow-sm flex flex-col justify-between">
                                        <div class="flex items-center justify-between mb-2">
                                            <label for="bulk_state_price_{{ $state->id }}" class="text-sm font-medium text-gray-800">
                                                {{ $state->name }}
                                                @if($state->code)
                                                    <span class="text-xs text-gray-400 font-mono">({{ $state->code }})</span>
                                                @endif
                                            </label>
                                        </div>
                                        <div class="relative">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <span class="text-gray-500 sm:text-sm">₹</span>
                                            </div>
                                            <input type="number"
                                                   name="bulk_state_shipping_prices[{{ $state->id }}]"
                                                   id="bulk_state_price_{{ $state->id }}"
                                                   value="{{ old('bulk_state_shipping_prices.'.$state->id) }}"
                                                   min="0" step="0.01"
                                                   placeholder="Default"
                                                   class="w-full pl-7 pr-3 py-1.5 border border-gray-300 rounded-md focus:outline-none focus:ring-[#00BDE0] focus:border-[#00BDE0] text-sm">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4 text-center">
                                <p class="text-sm text-yellow-800">No states found in the system. Default bulk shipping price will apply to all bulk orders.</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="mt-8 flex items-center justify-end space-x-3 pt-6 border-t border-gray-200">
                    <a href="{{ route('admin.books.index') }}" 
                       class="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400 transition-colors font-medium">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-[#00BDE0] text-white px-6 py-2 rounded-lg hover:bg-[#00A5C7] transition-colors font-medium">
                        Create Book
                    </button>
                </div>
            </form>
        </div>

<script>
window.switchBookTab = function(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.book-tab-content').forEach(function(el) {
        el.classList.add('hidden');
        el.style.display = 'none';
    });
    
    // Reset all tab button styles
    document.querySelectorAll('.book-tab-btn').forEach(function(btn) {
        btn.classList.remove('border-[#00BDE0]', 'text-[#00BDE0]');
        btn.classList.add('border-transparent', 'text-gray-500');
    });

    // Show selected tab content
    const selectedContent = document.getElementById('tab-content-' + tabName);
    if (selectedContent) {
        selectedContent.classList.remove('hidden');
        selectedContent.style.display = 'block';
    }

    // Highlight selected tab button
    const selectedBtn = document.getElementById('tab-btn-' + tabName);
    if (selectedBtn) {
        selectedBtn.classList.remove('border-transparent', 'text-gray-500');
        selectedBtn.classList.add('border-[#00BDE0]', 'text-[#00BDE0]');
    }
};

document.addEventListener('DOMContentLoaded', function() {
    const detailsBtn = document.getElementById('tab-btn-details');
    const shippingBtn = document.getElementById('tab-btn-shipping');

    if (detailsBtn) {
        detailsBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.switchBookTab('details');
        });
    }

    if (shippingBtn) {
        shippingBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.switchBookTab('shipping');
        });
    }
});
// Image upload preview
document.getElementById('cover_image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            // Create preview image if doesn't exist
            let preview = document.getElementById('image-preview');
            if (!preview) {
                preview = document.createElement('img');
                preview.id = 'image-preview';
                preview.className = 'mt-4 h-48 w-32 object-cover rounded-lg mx-auto';
                e.target.closest('.space-y-1').appendChild(preview);
            }
            preview.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

// Multiple images preview
document.getElementById('images').addEventListener('change', function(e) {
    const files = Array.from(e.target.files);
    const previewContainer = document.getElementById('selected-images-preview');
    const previewList = document.getElementById('images-preview-list');
    
    if (files.length > 0) {
        previewList.innerHTML = '';
        
        files.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const imageDiv = document.createElement('div');
                imageDiv.className = 'relative';
                imageDiv.innerHTML = `
                    <img src="${e.target.result}" alt="Preview ${index + 1}" 
                         class="w-full h-20 object-cover rounded border">
                    <div class="absolute top-1 right-1 bg-black bg-opacity-50 text-white text-xs px-1 rounded">
                        ${index + 1}
                    </div>
                `;
                previewList.appendChild(imageDiv);
            };
            reader.readAsDataURL(file);
        });
        
        previewContainer.classList.remove('hidden');
    } else {
        previewContainer.classList.add('hidden');
    }
});

// Auto-update status based on stock
document.getElementById('stock').addEventListener('change', function(e) {
    const stock = e.target.value;
    const statusSelect = document.getElementById('status');
    
    if (stock === 'out_of_stock' && statusSelect.value === 'active') {
        statusSelect.value = 'out_of_stock';
    } else if ((stock === 'in_stock' || stock === 'limited_stock') && statusSelect.value === 'out_of_stock') {
        statusSelect.value = 'active';
    }
});
</script>
@endsection