@extends('layouts.app')
@section('title')
    Edit Ad
@endsection

@section('content')
    <div class="container-fluid bg-success py-3 rounded">
        <div class="row">
            <div class="col-12 text-center">
                <p class="text-white">Edit Your Ad</p>
            </div>
        </div>
    </div>

    <div class="ap-container">
        <h2>Edit Your Ad</h2>
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('ads.update', $ad->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- Category Section -->
            <div class="ap-form-section">
                <h5 class="test1">Category</h5>
                <div class="test1 d-flex gap-3 mt-3">
                    <input list="categories_main" class="form-control ap-form-control mt-3" id="main_category"
                        placeholder="Select Main Category" value="{{ old('main_category', $ad->category->name) }}"
                        readonly />
                    <datalist id="categories_main">
                        {{-- @foreach ($categories as $category)  
                    <option value="{{ $category->name }}" data-id="{{ $category->id }}"></option>
                    @endforeach --}}
                    </datalist>
                    {{--  <input type="hidden" id="main_category_id" name="main_category_id" value="{{ old('main_category_id', $ad->category->name) }}" />
                @error('main_category_id')
                    <small class="text-danger">{{ $message }}</small>
                @enderror

                <input list="categories_sub" class="form-control ap-form-control mt-3" id="subcategory" placeholder="Select Subcategory" value="{{ old('subcategory', $ad->subcategory->name) }}" />
                <datalist id="categories_sub"></datalist>
                <input type="hidden" id="subcategory_id" name="subcategory_id" value="{{ old('subcategory_id', $ad->subcategory->id) }}" />

                <input list="categories_sub_sub" class="form-control ap-form-control mt-3" id="sub_subcategory" placeholder="Select Sub-Subcategory" value="{{ old('sub_subcategory', $ad->subSubcategory->name) }}" />
                <datalist id="categories_sub_sub"></datalist>
                <input type="hidden" id="sub_subcategory_id" name="sub_subcategory_id" value="{{ old('sub_subcategory_id', $ad->subSubcategory->id) }}" /> --}}
                </div>
            </div>

            <!-- Image Upload Section -->
            <div class="ap-form-section mt-3">
                <h5 class="test1">Upload Images</h5>
                <div class="ap-photo-section">
                    <div class="ap-photo-box plus-box" onclick="triggerFileInput()">
                        <i class="fas fa-plus"></i>
                        <input type="file" name="images[]" accept="image/*" multiple id="extraFileInput"
                            style="display: none;" onchange="handleImageUpload(this)">
                    </div>
                </div>

                <div id="image-preview-container" class="ap-photo-section">
                    @foreach ($ad->images as $image)
                        <div class="image-preview">
                            <img src="{{ asset('storage/' . $image->image_path) }}" alt="Image"
                                style="width: 100px; height: 100px; object-fit: cover;">
                            <button type="button" onclick="deleteImage({{ $image->id }})"
                                class="btn btn-danger btn-sm">Delete</button>
                        </div>
                    @endforeach
                </div>

                <p class="test1 note">You may upload up to 10 images at a time. </p>
                @error('images')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <!-- Brand and Condition Section -->
            <div class="ap-form-section">
                <h5 class="test1">Brand and Condition</h5>
                <div class="ap-form-control-search">
                    <select class="form-control ap-form-control" name="brand" required>
                        <option value="" disabled selected>Select a Brand</option>
                        @foreach ($brands as $brand)
                            <option value="{{ $brand->id }}"
                                {{ old('brand', $ad->brand?->id) == $brand->id ? 'selected' : '' }}>
                                {{ $brand->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('brand')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="ap-form-control-search mt-3">
                    <select class="form-control ap-form-control" name="condition" required>
                        <option selected disabled>Select Condition</option>
                        <option value="new" {{ old('condition', $ad->condition) == 'new' ? 'selected' : '' }}>New
                        </option>
                        <option value="used" {{ old('condition', $ad->condition) == 'used' ? 'selected' : '' }}>Used
                        </option>
                        <option value="refurbished"
                            {{ old('condition', $ad->condition) == 'refurbished' ? 'selected' : '' }}>Refurbished</option>
                    </select>
                </div>
            </div>

            <!-- Title, Description, and Location Section -->
            <div class="ap-form-section">
                <h5 class="test1">Ad Title, Description, and Location</h5>
                <input type="text" class="form-control ap-form-control mb-3" placeholder="Ad Title" name="title"
                    value="{{ old('title', $ad->title) }}" required>
                <textarea name="description" class="form-control ap-form-control mb-2" placeholder="Description (max 5000 characters)"
                    maxlength="5000" rows="6">{{ old('description', $ad->description) }}</textarea>
                <div class="ap-char-counter" id="charCounter">0/5000 characters</div>

                <div class="d-flex gap-3 mt-3">
                    <select class="form-control ap-form-control mt-3" name="location_city" required>
                        <option value="" disabled selected>Select a Location</option>
                        @foreach ($locations as $location)
                            <option value="{{ $location->name }}"
                                {{ old('location_city', $ad->state) == $location->name ? 'selected' : '' }}>
                                {{ $location->name }}
                            </option>
                        @endforeach
                    </select>

                    <input type="text" class="form-control ap-form-control mt-3" placeholder="Postal Code"
                        name="postal_code" value="{{ old('postal_code', $ad->postal_code) }}" required>
                </div>
            </div>

            <!-- Price Section -->
            <div class="ap-form-section">
                <h5 class="me-4 mt-3 test1">Price</h5>
                <input type="number" class="form-control ap-form-control" placeholder="Price in PKR" name="price"
                    value="{{ old('price', $ad->price) }}" required>
            </div>

            <!-- Seller Info Section -->
            <div class="ap-form-section">
                <h5 class="test1">Seller Info</h5>
                <div class="d-flex gap-3 mt-3">
                    <input type="text" class="form-control ap-form-control mb-3" placeholder="Seller Name"
                        name="seller_name" value="{{ old('seller_name', $ad->seller_name) }}" required>
                    <input type="text" class="form-control ap-form-control mb-3" placeholder="Mobile Phone Number"
                        name="seller_phone" value="{{ old('seller_phone', $ad->seller_phone) }}" required>
                </div>
            </div>
            <div class="ap-form-section">
                <h5 class="test1">Ad Status</h5>


                <!-- Ad Status Dropdown -->
                <select name="ad_status" class="form-control ap-form-control mb-3" required>
                    <option value="active" {{ old('ad_status', $ad->status) == 'active' ? 'selected' : '' }}>Active
                    </option>
                    <option value="inactive" {{ old('ad_status', $ad->status) == 'inactive' ? 'selected' : '' }}>Inactive
                    </option>
                    <option value="pending" {{ old('ad_status', $ad->status) == 'pending' ? 'selected' : '' }}>Pending
                    </option>
                    <option value="moderate" {{ old('ad_status', $ad->status) == 'moderate' ? 'selected' : '' }}>Moderate
                    </option>
                </select>
            </div>

            <!-- Update Ad Button -->
            <div>
                <button type="submit" class="btn btn_all_button btn-lg">Update Ad</button>
                @if (Auth::user() && Auth::user()->role === 'admin')
                    <a href="{{ route('admin.dashboard') }}" class="btn btn_all_button btn-lg">Back to Dashboard</a>
                @endif

            </div>
        </form>

        @if (session('success'))
            <div class="custom-alert alert-dismissible fade show" id="successAlert" role="alert">
                {{ session('success') }}
            </div>
        @endif
    </div>

@endsection








@section('scripts')
    <script>
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

        function triggerFileInput() {
            document.getElementById('extraFileInput').click();
        }

        function handleImageUpload(input) {
            const previewContainer = document.getElementById('image-preview-container');
            const files = input.files;

            previewContainer.innerHTML = '';

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.width = '100px';
                    img.style.height = '100px';
                    img.style.margin = '5px';
                    img.style.objectFit = 'cover';
                    previewContainer.appendChild(img);
                };

                reader.readAsDataURL(file);
            }
        }

        function deleteImage(imageId) {
            if (confirm('Are you sure you want to delete this image?')) {
                fetch(`/ads/images/${imageId}/delete`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('Image deleted successfully');
                            location.reload();
                        } else {
                            alert('Failed to delete image');
                        }
                    });
            }
        }

        setTimeout(function() {
            let alertBox = document.getElementById('successAlert');
            if (alertBox) {
                alertBox.style.opacity = '0';
                setTimeout(() => alertBox.remove(), 500);
            }
        }, 5000);
    </script>
@endsection