@extends('layouts.app')
@section('title', 'Listing Details')

@push('styles')
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .edit-image-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .image-container:hover .edit-image-btn {
            opacity: 1;
        }
        #preview-image {
            max-width: 100%;
            max-height: 400px;
            display: none;
            margin-top: 15px;
        }
        .custom-file-upload {
            border: 2px dashed #007bff;
            display: inline-block;
            padding: 40px 20px;
            cursor: pointer;
            text-align: center;
            border-radius: 5px;
            width: 100%;
            transition: all 0.3s;
        }
        .custom-file-upload:hover {
            background-color: #f8f9fa;
            border-color: #0056b3;
        }
        .custom-file-upload i {
            font-size: 48px;
            color: #007bff;
            margin-bottom: 10px;
        }
        .badge {
            font-size: 0.9rem;
            padding: 0.4em 0.6em;
            margin: 0.2em;
        }
        .form-control-static .badge {
            display: inline-block;
        }
    </style>
@endpush

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Listing Details</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Listing Details</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Product Information</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Title:</label>
                                        <p class="form-control-static">{{ $listing->title ?? '-' }}</p>
                                    </div>
                                    <div class="form-group">
                                        <label>Category:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->category_name))
                                                @if(is_array($listing->category_name) || str_contains($listing->category_name ?? '', ','))
                                                    @foreach((is_array($listing->category_name) ? $listing->category_name : explode(',', $listing->category_name)) as $category)
                                                        <span class="badge badge-info mr-1">{{ trim($category) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->category_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Sub Category:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->sub_category_name))
                                                @if(is_array($listing->sub_category_name) || str_contains($listing->sub_category_name ?? '', ','))
                                                    @foreach((is_array($listing->sub_category_name) ? $listing->sub_category_name : explode(',', $listing->sub_category_name)) as $subCategory)
                                                        <span class="badge badge-info mr-1">{{ trim($subCategory) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->sub_category_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Brand:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->brand_name))
                                                @if(is_array($listing->brand_name) || str_contains($listing->brand_name ?? '', ','))
                                                    @foreach((is_array($listing->brand_name) ? $listing->brand_name : explode(',', $listing->brand_name)) as $brand)
                                                        <span class="badge badge-primary mr-1">{{ trim($brand) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->brand_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Size:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->size_name))
                                                @if(is_array($listing->size_name) || str_contains($listing->size_name ?? '', ','))
                                                    @foreach((is_array($listing->size_name) ? $listing->size_name : explode(',', $listing->size_name)) as $size)
                                                        <span class="badge badge-secondary mr-1">{{ trim($size) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->size_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Condition:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->condition_name))
                                                @if(is_array($listing->condition_name) || str_contains($listing->condition_name ?? '', ','))
                                                    @foreach((is_array($listing->condition_name) ? $listing->condition_name : explode(',', $listing->condition_name)) as $condition)
                                                        <span class="badge badge-warning mr-1">{{ trim($condition) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->condition_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Material:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->material_name))
                                                @if(is_array($listing->material_name) || str_contains($listing->material_name ?? '', ','))
                                                    @foreach((is_array($listing->material_name) ? $listing->material_name : explode(',', $listing->material_name)) as $material)
                                                        <span class="badge badge-dark mr-1">{{ trim($material) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->material_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <!-- Right Column -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Color:</label>
                                        <p class="form-control-static">
                                            @if(!empty($listing->color_name))
                                                @if(is_array($listing->color_name) || str_contains($listing->color_name ?? '', ','))
                                                    @foreach((is_array($listing->color_name) ? $listing->color_name : explode(',', $listing->color_name)) as $color)
                                                        <span class="badge badge-light border mr-1">{{ trim($color) }}</span>
                                                    @endforeach
                                                @else
                                                    {{ $listing->color_name }}
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Gender:</label>
                                        <p class="form-control-static">
                                            {{ $listing->gender_id == 1 ? 'Female' : 'Male' }}
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Price:</label>
                                        <p class="form-control-static">{{ $listing->price ?? '-' }}</p>
                                    </div>
                                    <div class="form-group">
                                        <label>Status:</label>
                                        <p class="form-control-static">
                                            @if ($listing->status == 1)
                                                <span class="badge badge-success">Active</span>
                                            @else
                                                <span class="badge badge-danger">Inactive</span>
                                            @endif
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Created At:</label>
                                        <p class="form-control-static">{{ $listing->created_at->format('d M Y, h:i A') }}
                                        </p>
                                    </div>
                                    <div class="form-group">
                                        <label>Description:</label>
                                        <samp class="form-control-static">{{ $listing->description ?? '-' }}</samp>
                                    </div>
                                    <div class="form-group">
                                        <label>Is Featured:</label>
                                        <p class="form-control-static">
                                            @if ($listing->is_feature == 1)
                                                <span class="badge badge-success">Yes</span>
                                                @if($listing->listing_feature_details)
                                                    <br><small class="text-muted">
                                                        <strong>Start Date:</strong> {{ $listing->listing_feature_details->start_date ? \Carbon\Carbon::parse($listing->listing_feature_details->start_date)->format('d M Y') : '-' }}<br>
                                                        <strong>End Date:</strong> {{ $listing->listing_feature_details->end_date ? \Carbon\Carbon::parse($listing->listing_feature_details->end_date)->format('d M Y') : '-' }}
                                                    </small>
                                                @endif
                                            @else
                                                <span class="badge badge-secondary">No</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-12">
                                    <label>Images:</label><br>
                                    @if (isset($listing->images) && count($listing->images) > 0)
                                        @foreach ($listing->images as $image)
                                            <div class="image-container">
                                                <img src="{{ $image->listing_image_url }}" alt="Image"
                                                    class="img-thumbnail m-1" width="120" id="image-{{ $image->id }}">
                                                <button type="button" class="btn btn-sm btn-primary edit-image-btn"
                                                    onclick="openImageUploader('{{ $image->listing_image_url }}', {{ $image->id }})">
                                                    <i class="fas fa-upload"></i> Change
                                                </button>
                                            </div>
                                        @endforeach
                                    @else
                                        <p>No images available.</p>
                                    @endif
                                </div>
                            </div>

                        </div>

                        <div class="card-footer">
                            <a href="{{ url()->previous() }}" class="btn btn-secondary">Back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Image Upload Modal -->
    <div class="modal fade" id="imageUploadModal" tabindex="-1" role="dialog" aria-labelledby="imageUploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageUploadModalLabel">Change Image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h6>Current Image:</h6>
                            <img id="current-image" src="" alt="Current Image" class="img-thumbnail" style="max-width: 200px;">
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <h6>Upload New Image:</h6>
                            <label for="new-image-input" class="custom-file-upload">
                                <div>
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <p class="mb-0"><strong>Click to select a new image</strong></p>
                                    <small class="text-muted">Supported formats: JPG, PNG, GIF (Max: 10MB)</small>
                                </div>
                            </label>
                            <input type="file" id="new-image-input" accept="image/*" style="display: none;" onchange="previewNewImage(event)">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <img id="preview-image" src="" alt="Preview" class="img-thumbnail">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="uploadImageBtn" onclick="uploadNewImage()" disabled>
                        <i class="fas fa-upload"></i> Upload & Replace
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentImageId = null;
        let selectedFile = null;

        function openImageUploader(imageUrl, imageId) {
            currentImageId = imageId;
            selectedFile = null;

            // Set current image
            document.getElementById('current-image').src = imageUrl;

            // Reset preview
            document.getElementById('preview-image').style.display = 'none';
            document.getElementById('preview-image').src = '';
            document.getElementById('new-image-input').value = '';
            document.getElementById('uploadImageBtn').disabled = true;

            // Show modal
            $('#imageUploadModal').modal('show');
        }

        function previewNewImage(event) {
            const file = event.target.files[0];

            if (!file) {
                return;
            }

            // Validate file type
            if (!file.type.match('image.*')) {
                alert('Please select a valid image file');
                event.target.value = '';
                return;
            }

            // Validate file size (10MB)
            if (file.size > 10 * 1024 * 1024) {
                alert('File size must not exceed 10MB');
                event.target.value = '';
                return;
            }

            selectedFile = file;

            // Show preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewImg = document.getElementById('preview-image');
                previewImg.src = e.target.result;
                previewImg.style.display = 'block';
                document.getElementById('uploadImageBtn').disabled = false;
            };
            reader.readAsDataURL(file);
        }

        function uploadNewImage() {
            if (!selectedFile || !currentImageId) {
                alert('Please select an image first');
                return;
            }

            // Create FormData
            const formData = new FormData();
            formData.append('image', selectedFile);
            formData.append('image_id', currentImageId);
            formData.append('_token', '{{ csrf_token() }}');

            // Show loading state
            const uploadBtn = document.getElementById('uploadImageBtn');
            const originalText = uploadBtn.innerHTML;
            uploadBtn.disabled = true;
            uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';

            // Send to server
            fetch('{{ route("admin.listing.update-image") }}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update the thumbnail
                    const thumbnail = document.getElementById('image-' + currentImageId);
                    if (thumbnail) {
                        thumbnail.src = data.image_url + '?t=' + new Date().getTime();
                    }

                    // Close modal
                    $('#imageUploadModal').modal('hide');

                    // Show success message
                    alert('Image updated successfully!');
                } else {
                    alert('Error: ' + (data.message || 'Failed to upload image'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while uploading the image');
            })
            .finally(() => {
                uploadBtn.disabled = false;
                uploadBtn.innerHTML = originalText;
            });
        }

        // Cleanup when modal is hidden
        $('#imageUploadModal').on('hidden.bs.modal', function () {
            currentImageId = null;
            selectedFile = null;
        });
    </script>
@endpush