@section('title', 'Brand Offers')

<div>
    <div class="row">
        <!-- List Offers -->
        <div class="col-md-7">
            <div class="card">
                <div class="card-header">
                    <h5>Offers List</h5>
                </div>
                <div class="card-body">
                    @if (session()->has('message'))
                        <div class="alert alert-success">{{ session('message') }}</div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Name (EN)</th>
                                    <th>Name (AR)</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($offers as $offer)
                                    <tr>
                                        <td>{{ $offer->offer_name_en }}</td>
                                        <td>{{ $offer->offer_name_ar }}</td>
                                        <td>
                                            <button class="btn btn-info btn-sm" wire:click="edit({{ $offer->brands_offers_id }})">Edit</button>
                                            <button class="btn btn-danger btn-sm" wire:click="delete({{ $offer->brands_offers_id }})" onclick="return confirm('Delete this offer?')">Delete</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <a href="{{ route('data-entry.dashboard', $brandId) }}" class="btn btn-secondary">Back to Dashboard</a>
            </div>
        </div>

        <!-- Add/Edit Form -->
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">
                    <h5>{{ $editMode ? 'Edit Offer' : 'Create New Offer' }}</h5>
                </div>
                <div class="card-body">
                    <form wire:submit.prevent="save">
                        <div class="mb-3">
                            <label class="form-label">Offer Name (English)</label>
                            <input type="text" class="form-control" wire:model="offer_name_en">
                            @error('offer_name_en') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Offer Name (Arabic)</label>
                            <input type="text" class="form-control" wire:model="offer_name_ar">
                            @error('offer_name_ar') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Details (English)</label>
                            <textarea class="form-control" rows="3" wire:model="offer_details_en"></textarea>
                            @error('offer_details_en') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Details (Arabic)</label>
                            <textarea class="form-control" rows="3" wire:model="offer_details_ar"></textarea>
                            @error('offer_details_ar') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <button type="submit" class="btn btn-primary">{{ $editMode ? 'Update' : 'Create' }}</button>
                        @if($editMode)
                            <button type="button" class="btn btn-secondary" wire:click="cancel">Cancel</button>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>