@extends('layouts.admin')

@section('title', 'Edit Service - ' . $service->name)

@section('content')
<div class="container-fluid px-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Edit Service</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="{{ route('vendors.services.index', $vendor) }}">Services</a></li>
                <li class="breadcrumb-item"><a href="{{ route('vendors.services.services', ['vendor' => $vendor, 'categoryId' => $service->bizspot_main_category_id]) }}">{{ $service->bizspotMainCategory->name }}</a></li>
                    <li class="breadcrumb-item active">Edit: {{ $service->name }}</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{{ route('vendors.services.variants', ['vendor' => $vendor, 'service' => $service]) }}" class="btn btn-info me-2">
                <i class="bi bi-list-ul me-1"></i>Manage Variants
            </a>
            <a href="{{ route('vendors.services.services', ['vendor' => $vendor, 'categoryId' => $service->bizspot_main_category_id]) }}" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left me-1"></i>Back
            </a>
        </div>
    </div>

    <!-- Form -->
    <form action="{{ route('vendors.services.services.update', ['vendor' => $vendor, 'service' => $service]) }}" 
          method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="row">
            <div class="col-lg-8">
                <!-- Basic Info -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header"><h5>Basic Information</h5></div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="name" class="form-label">Service Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $service->name) }}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="4">{{ old('description', $service->description) }}</textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Main Category</label>
                                <input type="text" class="form-control" value="{{ $service->bizspotMainCategory->name }}" readonly>
                                <small class="text-muted">Category cannot be changed after creation</small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="service_type" class="form-label">Service Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="service_type" name="service_type" required>
                                    <option value="beauty_personal_care" {{ $service->service_type == 'beauty_personal_care' ? 'selected' : '' }}>Beauty & Personal Care</option>
                                    <option value="home_service" {{ $service->service_type == 'home_service' ? 'selected' : '' }}>Home Service</option>
                                    <option value="professional_service" {{ $service->service_type == 'professional_service' ? 'selected' : '' }}>Professional Service</option>
                                    <option value="health_medical" {{ $service->service_type == 'health_medical' ? 'selected' : '' }}>Health & Medical</option>
                                    <option value="fitness_education" {{ $service->service_type == 'fitness_education' ? 'selected' : '' }}>Fitness & Education</option>
                                    <option value="automotive" {{ $service->service_type == 'automotive' ? 'selected' : '' }}>Automotive</option>
                                    <option value="tech_digital" {{ $service->service_type == 'tech_digital' ? 'selected' : '' }}>Tech & Digital</option>
                                    <option value="other" {{ $service->service_type == 'other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="bizspot_sub_category_id" class="form-label">Sub-Category</label>
                                <select class="form-select" id="bizspot_sub_category_id" name="bizspot_sub_category_id">
                                    <option value="">Select Sub-Category</option>
                                    @foreach($subCategories as $subCategory)
                                        <option value="{{ $subCategory->id }}" {{ $service->bizspot_sub_category_id == $subCategory->id ? 'selected' : '' }}>
                                            {{ $subCategory->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pricing -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header"><h5>Pricing & Duration</h5></div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="pricing_type" class="form-label">Pricing Type <span class="text-danger">*</span></label>
                                <select class="form-select" id="pricing_type" name="pricing_type" required>
                                    <option value="fixed" {{ $service->pricing_type == 'fixed' ? 'selected' : '' }}>Fixed Price</option>
                                    <option value="hourly" {{ $service->pricing_type == 'hourly' ? 'selected' : '' }}>Hourly Rate</option>
                                    <option value="per_session" {{ $service->pricing_type == 'per_session' ? 'selected' : '' }}>Per Session</option>
                                    <option value="package" {{ $service->pricing_type == 'package' ? 'selected' : '' }}>Package Deal</option>
                                    <option value="quote_based" {{ $service->pricing_type == 'quote_based' ? 'selected' : '' }}>Quote Based</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="base_price" class="form-label">Base Price (AED) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="base_price" name="base_price" 
                                       value="{{ old('base_price', $service->base_price) }}" step="0.01" min="0" required>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="duration_minutes" class="form-label">Duration (Minutes) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="duration_minutes" name="duration_minutes" 
                                       value="{{ old('duration_minutes', $service->duration_minutes) }}" min="15" required>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="service_location" class="form-label">Service Location <span class="text-danger">*</span></label>
                                <select class="form-select" id="service_location" name="service_location" required>
                                    <option value="vendor_location" {{ $service->service_location == 'vendor_location' ? 'selected' : '' }}>At Vendor Location</option>
                                    <option value="customer_location" {{ $service->service_location == 'customer_location' ? 'selected' : '' }}>At Customer Location</option>
                                    <option value="both" {{ $service->service_location == 'both' ? 'selected' : '' }}>Both Locations</option>
                                    <option value="online_remote" {{ $service->service_location == 'online_remote' ? 'selected' : '' }}>Online/Remote</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Images -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header"><h5>Service Images</h5></div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="featured_image" class="form-label">Featured Image</label>
                                @if($service->featured_image)
                                    <div class="mb-2">
                                        <img src="{{ asset('storage/' . $service->featured_image) }}" alt="Current Image" class="img-thumbnail" style="max-width: 200px;">
                                        <div class="form-text">Current featured image</div>
                                    </div>
                                @endif
                                <input type="file" class="form-control" id="featured_image" name="featured_image" accept="image/*">
                                <div class="form-text">Upload new image to replace current one</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="new_gallery_images" class="form-label">Add Gallery Images</label>
                                @if($service->gallery_images && is_array($service->gallery_images) && count($service->gallery_images) > 0)
                                    <div class="mb-2">
                                        <strong>Current Gallery Images:</strong>
                                        <div class="row mt-2">
                                            @foreach($service->gallery_images as $index => $image)
                                                <div class="col-4 mb-2">
                                                    <img src="{{ asset('storage/' . $image) }}" alt="Gallery {{ $index + 1 }}" class="img-thumbnail w-100" style="height: 80px; object-fit: cover;">
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input" type="checkbox" name="remove_gallery_images[]" value="{{ $image }}" id="remove_{{ $index }}">
                                                        <label class="form-check-label small" for="remove_{{ $index }}">Remove</label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                <input type="file" class="form-control" id="new_gallery_images" name="new_gallery_images[]" accept="image/*" multiple>
                                <div class="form-text">Add new gallery images</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Settings -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header"><h5>Settings</h5></div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="advance_booking_days" class="form-label">Advance Booking (Days)</label>
                            <input type="number" class="form-control" id="advance_booking_days" name="advance_booking_days" 
                                   value="{{ old('advance_booking_days', $service->advance_booking_days) }}" min="0">
                        </div>
                        
                        <div class="mb-3">
                            <label for="difficulty_level" class="form-label">Difficulty Level <span class="text-danger">*</span></label>
                            <select class="form-select" id="difficulty_level" name="difficulty_level" required>
                                <option value="easy" {{ $service->difficulty_level == 'easy' ? 'selected' : '' }}>Easy</option>
                                <option value="moderate" {{ $service->difficulty_level == 'moderate' ? 'selected' : '' }}>Moderate</option>
                                <option value="advanced" {{ $service->difficulty_level == 'advanced' ? 'selected' : '' }}>Advanced</option>
                                <option value="expert" {{ $service->difficulty_level == 'expert' ? 'selected' : '' }}>Expert</option>
                            </select>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="mobile_service" name="mobile_service" 
                                   {{ $service->mobile_service ? 'checked' : '' }}>
                            <label class="form-check-label" for="mobile_service">Mobile Service</label>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="requires_appointment" name="requires_appointment" 
                                   {{ $service->requires_appointment ? 'checked' : '' }}>
                            <label class="form-check-label" for="requires_appointment">Requires Appointment</label>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="certified_service" name="certified_service" 
                                   {{ $service->certified_service ? 'checked' : '' }}>
                            <label class="form-check-label" for="certified_service">Certified Service</label>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_available" name="is_available" 
                                   {{ $service->is_available ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_available">Service Available</label>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" 
                                   {{ $service->is_featured ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">Featured Service</label>
                        </div>
                    </div>
                </div>

                <!-- Submit -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i>Update Service
                            </button>
                            <a href="{{ route('vendors.services.variants', ['vendor' => $vendor, 'service' => $service]) }}" 
                               class="btn btn-info">
                                <i class="bi bi-list-ul me-1"></i>Manage Variants
                            </a>
                            <a href="{{ route('vendors.services.services', ['vendor' => $vendor, 'categoryId' => $service->bizspot_main_category_id]) }}" 
                               class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection