@extends('layouts.admin')

@section('title', $supermarket->name . ' - Promotions Management')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Promotions Management</h1>
            <p class="text-muted mb-0">{{ $supermarket->name }}</p>
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.index') }}">Supermarkets</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.supermarkets.show', $supermarket) }}">{{ $supermarket->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Promotions</li>
            </ol>
        </nav>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Promotions</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $promotions->total() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-percent fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Active Promotions</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $promotions->where('is_active', true)->where('start_datetime', '<=', now())->where('end_datetime', '>=', now())->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Upcoming</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $promotions->where('is_active', true)->where('start_datetime', '>', now())->count() }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Total Redemptions</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $promotions->sum('redemption_count') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-gift fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filters & Actions</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.supermarkets.promotions', $supermarket) }}" class="row g-3">
                <div class="col-md-4">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">All Promotions</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="upcoming" {{ request('status') == 'upcoming' ? 'selected' : '' }}>Upcoming</option>
                        <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Expired</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search"></i> Filter
                    </button>
                    <a href="{{ route('admin.supermarkets.promotions', $supermarket) }}" class="btn btn-outline-secondary me-2">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </a>
                </div>
                <div class="col-md-4 d-flex align-items-end justify-content-end">
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addPromotionModal">
                        <i class="bi bi-plus"></i> Create Promotion
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Promotions Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Active Promotions</h6>
        </div>
        <div class="card-body">
            @if($promotions->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Promotion</th>
                                <th>Type</th>
                                <th>Discount</th>
                                <th>Duration</th>
                                <th>Usage</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($promotions as $promotion)
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $promotion->promotion_title }}</div>
                                        <small class="text-muted">{{ Str::limit($promotion->promotion_description, 40) }}</small>
                                    </td>
                                    <td>
                                        <span class="badge 
                                            @switch($promotion->promotion_type)
                                                @case('percentage') bg-primary @break
                                                @case('fixed_amount') bg-success @break
                                                @case('buy_x_get_y') bg-info @break
                                                @case('bundle') bg-warning @break
                                                @default bg-secondary
                                            @endswitch
                                        ">
                                            {{ ucfirst(str_replace('_', ' ', $promotion->promotion_type)) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($promotion->promotion_type === 'percentage')
                                            {{ $promotion->discount_percentage }}%
                                        @elseif($promotion->promotion_type === 'fixed_amount')
                                            ${{ number_format($promotion->discount_amount, 2) }}
                                        @else
                                            {{ $promotion->special_offer_details }}
                                        @endif
                                    </td>
                                    <td>
                                        <div>
                                            <small class="text-muted">Start:</small> 
                                            @if($promotion->start_datetime)
                                                {{ $promotion->start_datetime->format('M d, Y H:i') }}
                                            @else
                                                Not set
                                            @endif
                                            <br>
                                            <small class="text-muted">End:</small> 
                                            @if($promotion->end_datetime)
                                                {{ $promotion->end_datetime->format('M d, Y H:i') }}
                                            @else
                                                Not set
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <span class="fw-bold">{{ $promotion->redemption_count }}</span>
                                            @if($promotion->max_uses)
                                                / {{ $promotion->max_uses }}
                                            @endif
                                        </div>
                                        @if($promotion->max_uses)
                                            <div class="progress mt-1" style="height: 5px;">
                                                <div class="progress-bar" style="width: {{ ($promotion->redemption_count / $promotion->max_uses) * 100 }}%"></div>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $now = now();
                                            $startDate = $promotion->start_datetime ? $promotion->start_datetime : null;
                                            $endDate = $promotion->end_datetime ? $promotion->end_datetime : null;
                                            
                                            $isActive = $promotion->is_active && $startDate && $endDate && $startDate <= $now && $endDate >= $now;
                                            $isUpcoming = $promotion->is_active && $startDate && $startDate > $now;
                                            $isExpired = $endDate && $endDate < $now;
                                        @endphp
                                        
                                        @if($isActive)
                                            <span class="badge bg-success">Active</span>
                                        @elseif($isUpcoming)
                                            <span class="badge bg-info">Upcoming</span>
                                        @elseif($isExpired)
                                            <span class="badge bg-secondary">Expired</span>
                                        @else
                                            <span class="badge bg-warning">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                                    onclick="editPromotion({{ $promotion->id }})" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-info" 
                                                    onclick="viewPromotion({{ $promotion->id }})" title="View Details">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-{{ $promotion->is_active ? 'warning' : 'success' }}" 
                                                    onclick="togglePromotion({{ $promotion->id }})" title="{{ $promotion->is_active ? 'Deactivate' : 'Activate' }}">
                                                <i class="bi bi-{{ $promotion->is_active ? 'pause' : 'play' }}"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                    onclick="deletePromotion({{ $promotion->id }})" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                {{ $promotions->appends(request()->query())->links() }}
            @else
                <div class="text-center py-4">
                    <i class="bi bi-percent display-1 text-muted"></i>
                    <h5 class="mt-3">No Promotions Found</h5>
                    <p class="text-muted">
                        @if(request('status'))
                            No promotions match your current filter.
                        @else
                            Create your first promotion to attract customers and boost sales.
                        @endif
                    </p>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPromotionModal">
                        <i class="bi bi-plus"></i> Create First Promotion
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Promotion Modal -->
<div class="modal fade" id="addPromotionModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Promotion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addPromotionForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="promotion_title" class="form-label">Promotion Title</label>
                            <input type="text" class="form-control" id="promotion_title" name="promotion_title" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="promotion_type" class="form-label">Promotion Type</label>
                            <select class="form-select" id="promotion_type" name="promotion_type" required>
                                <option value="">Select Type</option>
                                <option value="percentage">Percentage Discount</option>
                                <option value="fixed_amount">Fixed Amount Discount</option>
                                <option value="buy_x_get_y">Buy X Get Y</option>
                                <option value="bundle">Bundle Deal</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="promotion_description" class="form-label">Description</label>
                        <textarea class="form-control" id="promotion_description" name="promotion_description" rows="3"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3" id="discount_percentage_field" style="display: none;">
                            <label for="discount_percentage" class="form-label">Discount Percentage (%)</label>
                            <input type="number" class="form-control" id="discount_percentage" name="discount_percentage" min="0" max="100" step="0.01">
                        </div>
                        <div class="col-md-6 mb-3" id="discount_amount_field" style="display: none;">
                            <label for="discount_amount" class="form-label">Discount Amount ($)</label>
                            <input type="number" class="form-control" id="discount_amount" name="discount_amount" min="0" step="0.01">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="start_datetime" class="form-label">Start Date & Time</label>
                            <input type="datetime-local" class="form-control" id="start_datetime" name="start_datetime" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="end_datetime" class="form-label">End Date & Time</label>
                            <input type="datetime-local" class="form-control" id="end_datetime" name="end_datetime" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="max_uses" class="form-label">Maximum Uses</label>
                            <input type="number" class="form-control" id="max_uses" name="max_uses" min="1">
                            <small class="form-text text-muted">Leave empty for unlimited uses</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="min_purchase_amount" class="form-label">Minimum Purchase Amount ($)</label>
                            <input type="number" class="form-control" id="min_purchase_amount" name="min_purchase_amount" min="0" step="0.01">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="savePromotion()">Create Promotion</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Auto-submit form on filter change
    $('#status').on('change', function() {
        $(this).closest('form').submit();
    });
    
    // Show/hide discount fields based on promotion type
    $('#promotion_type').on('change', function() {
        const type = $(this).val();
        
        $('#discount_percentage_field, #discount_amount_field').hide();
        
        if (type === 'percentage') {
            $('#discount_percentage_field').show();
        } else if (type === 'fixed_amount') {
            $('#discount_amount_field').show();
        }
    });
});

function savePromotion() {
    alert('Save promotion functionality will be implemented');
}

function editPromotion(promotionId) {
    alert('Edit promotion ' + promotionId + ' functionality will be implemented');
}

function viewPromotion(promotionId) {
    alert('View promotion ' + promotionId + ' details functionality will be implemented');
}

function togglePromotion(promotionId) {
    if (confirm('Toggle promotion status?')) {
        alert('Toggle promotion ' + promotionId + ' functionality will be implemented');
    }
}

function deletePromotion(promotionId) {
    if (confirm('Are you sure you want to delete this promotion?')) {
        alert('Delete promotion ' + promotionId + ' functionality will be implemented');
    }
}
</script>
@endsection