@extends('backEnd.layouts.master')
@section('title', 'Custom Offers')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Custom Offers</li>
                    </ol>
                </div>
                <h4 class="page-title">Custom Offers</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4">
                            <a href="{{ route('custom-offers.create') }}" class="btn btn-danger waves-effect waves-light"><i class="mdi mdi-plus-circle me-1"></i> Add Offer</a>
                        </div>
                    </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Banner</th>
                                <th>Name</th>
                                <th>Period</th>
                                <th>Products</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($offers as $key => $offer)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>
                                    @if($offer->banner)
                                        <img src="{{ asset($offer->banner) }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;">
                                    @else
                                        <div style="width: 60px; height: 40px; background: {{ $offer->color ?? '#E31019' }}; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px;">
                                            <i class="fa-solid fa-{{ $offer->icon ?? 'tag' }}"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $offer->name }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $offer->slug }}</small>
                                </td>
                                <td>
                                    @if($offer->start_date || $offer->end_date)
                                        <small>
                                            @if($offer->start_date)
                                                {{ date('d M', strtotime($offer->start_date)) }}
                                            @endif
                                            @if($offer->start_date && $offer->end_date)
                                                -
                                            @endif
                                            @if($offer->end_date)
                                                {{ date('d M', strtotime($offer->end_date)) }}
                                            @endif
                                        </small>
                                    @else
                                        <small class="text-muted">No date limit</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-primary">{{ $offer->products()->count() }}</span>
                                </td>
                                <td>
                                    @if($offer->status == 1)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <a href="{{ route('custom-offers.edit', $offer->id) }}" class="btn btn-xs btn-primary" title="Edit">
                                            <i class="mdi mdi-pencil"></i>
                                        </a>
                                        <a href="{{ route('custom-offers.move', [$offer->id, 'up']) }}" class="btn btn-xs btn-info" title="Move Up">
                                            <i class="mdi mdi-arrow-up"></i>
                                        </a>
                                        <a href="{{ route('custom-offers.move', [$offer->id, 'down']) }}" class="btn btn-xs btn-info" title="Move Down">
                                            <i class="mdi mdi-arrow-down"></i>
                                        </a>
                                        <form action="{{ route('custom-offers.destroy', $offer->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Are you sure?')" title="Delete">
                                                <i class="mdi mdi-delete"></i>
                                            </button>
                                        </form>
                                        <a href="{{ route('custom-offers.status', $offer->id) }}" class="btn btn-xs {{ $offer->status == 1 ? 'btn-warning' : 'btn-success' }}" title="{{ $offer->status == 1 ? 'Deactivate' : 'Activate' }}">
                                            <i class="mdi mdi-power"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
