@extends('admin-dining.layouts.app')

@section('title', 'Edit Member Offer')
@section('page-title', 'Edit Member Offer - ' . $memberOffer->title)

@section('content')
<form method="POST" action="{{ route('admin-dining.member-offers.update', $memberOffer) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="row">
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Basic Information</h5>
                </div>
                <div class="card-body">
                    <!-- Title -->
                    <div class="mb-3">
                        <label for="title" class="form-label">Offer Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" id="title" class="form-control @error('title') is-invalid @enderror" 
                               placeholder="Enter offer title" value="{{ old('title', $memberOffer->title) }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Location & Discount -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="location" class="form-label">Location</label>
                            <input type="text" name="location" id="location" class="form-control @error('location') is-invalid @enderror" 
                                   placeholder="e.g., Mumbai, Delhi, All Locations" value="{{ old('location', $memberOffer->location) }}">
                            @error('location')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="discount_text" class="form-label">Discount Text</label>
                            <input type="text" name="discount_text" id="discount_text" class="form-control @error('discount_text') is-invalid @enderror" 
                                   placeholder="e.g., Up to 20% Off" value="{{ old('discount_text', $memberOffer->discount_text) }}">
                            @error('discount_text')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" 
                                  rows="5" placeholder="Enter offer description">{{ old('description', $memberOffer->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Learn More Link -->
                    <div class="mb-3">
                        <label for="learn_more_link" class="form-label">Learn More Link</label>
                        <input type="url" name="learn_more_link" id="learn_more_link" class="form-control @error('learn_more_link') is-invalid @enderror" 
                               placeholder="https://example.com/offer-details" value="{{ old('learn_more_link', $memberOffer->learn_more_link) }}">
                        <small class="text-muted">Optional: Enter the full URL where users can learn more about this offer</small>
                        @error('learn_more_link')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Sort Order -->
                    <div class="mb-3">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" name="sort_order" id="sort_order" class="form-control @error('sort_order') is-invalid @enderror" 
                               placeholder="0" value="{{ old('sort_order', $memberOffer->sort_order) }}">
                        <small class="text-muted">Lower numbers appear first</small>
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Image Upload -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Offer Image</h5>
                </div>
                <div class="card-body">
                    @if($memberOffer->image)
                        <div class="mb-3">
                            <p class="text-muted mb-2">Current Image:</p>
                            <img src="{{ $memberOffer->image_url }}" alt="{{ $memberOffer->title }}" style="max-width: 100%; height: auto; border-radius: 0.75rem;">
                        </div>
                    @endif
                    <div class="mb-3">
                        <label for="image" class="form-label">Upload New Image</label>
                        <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror" 
                               accept="image/*" onchange="previewImage(event)">
                        <small class="text-muted d-block mt-2">Accepted formats: JPEG, PNG, JPG, GIF, WebP (Max 2MB)</small>
                        @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div id="imagePreview" class="mt-3" style="display: none;">
                        <p class="text-muted mb-2">New Image Preview:</p>
                        <img id="previewImg" src="" alt="Preview" style="max-width: 100%; height: auto; border-radius: 0.75rem;">
                    </div>
                </div>
            </div>

            <!-- Status & Featured -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Publishing</h5>
                </div>
                <div class="card-body">
                    <!-- Status -->
                    <div class="mb-3">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" required>
                            <option value="draft" {{ old('status', $memberOffer->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status', $memberOffer->status) == 'published' ? 'selected' : '' }}>Published</option>
                            <option value="expired" {{ old('status', $memberOffer->status) == 'expired' ? 'selected' : '' }}>Expired</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Featured -->
                    <div class="form-check mb-3">
                        <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input" 
                               value="1" {{ old('is_featured', $memberOffer->is_featured) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_featured">
                            <i class="bi bi-star"></i> Mark as Featured
                        </label>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="bi bi-check-circle"></i> Update Member Offer
                </button>
                <a href="{{ route('admin-dining.member-offers.index') }}" class="btn btn-outline-secondary btn-lg">
                    <i class="bi bi-x-circle"></i> Cancel
                </a>
            </div>
        </div>
    </div>
</form>

<script>
    function previewImage(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').src = e.target.result;
                document.getElementById('imagePreview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    }
</script>
@endsection