@extends('admin.layouts.app')

@section('title', 'Redeem Points')

@section('content')
    <div class="card mb-2">
        <div class="card-body py-2">
            <div class="row d-flex justify-content-between align-items-center">
                <div class="col-lg-6 d-flex" style="gap:6px;">
                    <h4>Redeem Points</h4>
                </div>
                <div class="col-lg-6 d-flex justify-content-end" style="gap:6px;">
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-2">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-center" style="gap: 25px;">
                <div class="form-check border rounded p-4 text-center" style="width: 120px;">
                    <input class="form-check-input redeemType d-none" type="radio" name="redeem_type" id="redeemGift"
                        value="gift">
                    <label class="form-check-label d-block" for="redeemGift" style="cursor:pointer;">
                        <i class="mdi mdi-gift text-primary display-4 d-block mb-2"></i>
                        <span class="fw-medium">Gift</span>
                    </label>
                </div>

                <div class="form-check border rounded p-4 text-center" style="width: 120px;">
                    <input class="form-check-input redeemType d-none" type="radio" name="redeem_type" id="redeemDiscount"
                        value="discount">
                    <label class="form-check-label d-block" for="redeemDiscount" style="cursor:pointer;">
                        <i class="mdi mdi-ticket-percent text-success display-4 d-block mb-2"></i>
                        <span class="fw-medium">Discount</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="card" id="giftRow" style="display: none;">
        <div class="card-body">
            @if (!$user->address)
                <div class="alert alert-light text-danger alert-icon mb-4" role="alert">
                    <i class="mdi mdi-alert"></i>
                    <strong>Before redeeming a gift, please update your complete address in your profile.</strong>
                    <a class="showLoader" href="{{ route('users.edit', auth()->id()) }}">
                        <span class="nav-text">Update Profile</span>
                    </a>
                </div>
            @endif

            <h4 class="mb-3 border-bottom pb-2">🎁 Redeemable Gifts</h4>

            <div class="gift-list row">
                @forelse ($gifts as $gift)
                    <div class="col-xl-6 col-lg-6 col-md-12">
                        <div class="card gift-card shadow-sm mb-4 overflow-hidden">
                            <div class="row no-gutters">
                                <!-- Left Image Section -->
                                <div class="col-md-4">
                                    @if ($gift->image)
                                        <img src="{{ asset($gift->image) }}"
                                            class="img-fluid h-100 w-100 object-cover rounded-left" alt="Gift Image"
                                            style="object-fit: cover; min-height: 180px;">
                                    @else
                                        <img src="{{ asset('admin/assets/images/placeholder/300x300.png') }}"
                                            class="img-fluid h-100 w-100 object-cover rounded-left" alt="Gift Image"
                                            style="object-fit: cover; min-height: 180px;">
                                    @endif
                                </div>

                                <!-- Right Content Section -->
                                <div class="col-md-8 d-flex flex-column justify-content-between">
                                    <div class="card-body">
                                        <h5 class="card-title text-dark mb-2">{{ $gift->name }}</h5>
                                        <p class="card-text text-muted mb-3">
                                            {{ \Illuminate\Support\Str::words($gift->description, 25, ' ...') }}
                                        </p>
                                        <span>
                                            <strong>Quantity:</strong> {{ $gift->quantity ?? 0 }}
                                        </span>
                                    </div>
                                    <div
                                        class="card-footer bg-white border-0 pt-0 pb-3 px-3 d-flex justify-content-between align-items-center">
                                        <span class="badge badge-pill badge-primary px-3 py-2">
                                            <i class="mdi mdi-star mr-1"></i>{{ $gift->price }} Points
                                        </span>

                                        @if ($user->bonus_points >= $gift->price)
                                            <form action="{{ route('point-redeem.store') }}" method="POST"
                                                class="confirmable-form d-inline" data-title="{{ $gift->name }}"
                                                data-price="{{ $gift->price }}">
                                                @csrf
                                                <input type="hidden" name="gift_id" value="{{ $gift->id }}">
                                                <button type="submit"
                                                    class="btn redeem-btn px-3 py-1">
                                                    <i class="mdi mdi-gift"></i> Redeem
                                                </button>
                                            </form>
                                        @else
                                            <small class="text-danger">
                                                <i class="mdi mdi-alert-circle-outline"></i>
                                                Need {{ $gift->price - $user->bonus_points }} more points
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted py-5">
                        <i class="mdi mdi-alert display-4 d-block mb-2"></i>
                        No redeemable gift found.
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="row" id="discountRow" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if ($user->bonus_points < setting('redeem_threshold'))
                        <div class="alert alert-light text-danger alert-icon mb-5" role="alert">
                            <i class="mdi mdi-alert"></i>
                            <strong>
                                You need at least {{ setting('redeem_threshold') }} bonus points to redeem discounts.
                            </strong>
                        </div>
                    @endif

                    <div class="mb-4">
                        <h5 class="mb-2 text-dark">
                            <i class="mdi mdi-star-circle-outline text-warning"></i> Bonus Point Details
                        </h5>

                        <ul class="list-group shadow-sm">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="mdi mdi-account-circle text-primary mr-2"></i> Current Bonus Points</span>
                                <strong class="text-dark">{{ $user->bonus_points }}</strong>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="mdi mdi-currency-usd text-success mr-2"></i> Equivalent Value</span>
                                <strong class="text-success">
                                    {{ number_format($user->bonus_points * setting('points_conversion_rate'), 2) }}{{ setting('default_currency_symbol') }}
                                </strong>
                            </li>

                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="mdi mdi-swap-horizontal text-info mr-2"></i> Conversion Rate</span>
                                <span class="text-muted">1 Point = {{ setting('points_conversion_rate') }}{{ setting('default_currency_symbol') }}</span>
                            </li>
                        </ul>
                    </div>

                    <h4 class="mb-3 border-bottom pb-2">
                        🏷️ Redeemable Discounts
                        <small class="text-info">(Below are the websites where you can redeem your points while shopping!)</small>
                    </h4>

                    <div class="discount-list row">
                        @if ($user->bonus_points >= setting('redeem_threshold'))
                            @forelse ($websites as $website)
                                <div class="col-lg-6 mb-4">
                                    <div class="card shadow-sm border h-100">
                                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mr-2"
                                                    style="width: 36px; height: 36px;">
                                                    <i class="mdi mdi-web"></i>
                                                </div>
                                                <h5 class="mb-0 text-dark">{{ $website->name }}</h5>
                                            </div>
                                        </div>

                                        <div class="card-body">
                                            <p class="mb-0 text-muted">
                                                <i class="mdi mdi-link-variant"></i>
                                                <a href="{{ $website->url }}" target="_blank">{{ $website->url }}</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12 text-center text-muted py-5">
                                    <i class="mdi mdi-alert display-4 d-block mb-2"></i>
                                    No redeemable discount found.
                                </div>
                            @endforelse
                        @else
                            <div class="col-12 text-center text-muted py-5">
                                <i class="mdi mdi-alert display-4 d-block mb-2"></i>
                                You do not have enough bonus points to redeem discounts.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Listen for redeem type change
            $('.redeemType').on('change', function() {
                let selected = $(this).val();

                if (selected === 'gift') {
                    $('#giftRow').show();
                    $('#discountRow').hide();
                } else if (selected === 'discount') {
                    $('#discountRow').show();
                    $('#giftRow').hide();
                } else {
                    $('#giftRow').hide();
                    $('#discountRow').hide();
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.confirmable-form').forEach(form => {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    // Get gift name from data attribute
                    let giftName = this.dataset.title || 'this gift';
                    let price = this.dataset.price;

                    Swal.fire({
                        title: 'Are you sure?',
                        text: `You are about to redeem ${price} bonus points. This action cannot be undone.`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, redeem it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            this.submit();
                        }
                    });
                });
            });
        });
    </script>

@endsection