@extends('mobile.layouts.app', ['disableFoot' => true])


@section('title', app_name() . ' | Elite Rewards')

@push('after-styles')
<style>
    .custom-btn {
        border-radius: 0 0 0.75rem 0.75rem !important;
    }

    ol {
        margin-block-start: 1rem;
        margin-left: 2rem;
        list-style-type: decimal;
    }

    .swal2-popup .swal2-styled:focus {
        box-shadow: none !important;
    }
</style>
@endpush

@section('content')
    @include('mobile.includes.app-bar', ['navBarName' => __('mobile.rewardDetail'), 'backRoute' => route('mobile.rewards')])
    @include('mobile.includes.reward-redeem-modal', ['point' => $reward->redeem_points])
    <div class="m-3 p-3">
        <div class="max-w-auto bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
            <a href="#">
                <img class="rounded-t-lg w-full" src="{{asset('uploads/'.$reward->image)}}" alt="" />
            </a>
            <div class="p-5">
                <a href="#" class="flex mb-2">
                    <h4 class="mb-2 text-xl tracking-tight text-gray-900 dark:text-white">{{$reward->name}}</h5>
                    <img class="h-12 max-w-xs ms-auto" src="{{asset('uploads/'.$reward->client->logo)}}" alt="image logo">
                </a>
                <div class="grid grid-cols-2 mb-3">
                    <div class="flex justify-center border-e p-2" style="border-color: rgb(100 116 139);">
                        <div>
                            <p class="text-base">Points</p>
                            <p class="text-sm text-green-500">{{$reward->redeem_points}} points</p>
                        </div>

                    </div>
                    <div class="flex justify-center p-2">
                        <div>
                            <p class="text-base">Validity</br></p>
                            <p class="text-sm text-green-500">Lifetime</p>
                        </div>
                    </div>
                </div>
                <hr style="border-color: rgb(100 116 139);">
                <p class="mb-3 mt-4 font-normal text-sm text-gray-700 dark:text-gray-400">{!! $reward->description !!}</p>
            </div>
            <div class="p-2">
                <button type="button" data-modal-target="reward-redeem-modal" data-modal-toggle="reward-redeem-modal"
                class="w-full py-3.5 text-white bg-blue-800 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-500 font-medium rounded-lg text-lg px-5 py-3
                text-center dark:bg-blue-600 dark:hover:bg-blue-800 dark:focus:ring-blue-900">
                    @lang('mobile.redeem')
                </button>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#redeem').click(function(e) {
                e.preventDefault();
                var reward_id = "{{$reward->id}}";
                $.ajax({
                    url: "{{route('mobile.rewards.redeem')}}",
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        'reward_id': reward_id,
                    },
                    success: function(res) {
                        console.log(res);
                        Swal.fire({
                            title: 'SUCCESS',
                            text: res.message,
                            customClass: {
                                container: 'bg-red-500',
                                popup: 'rounded-xl justify-items-start p-0',
                                title: 'ms-2 text-black text-xl font-bold',
                                actions: 'w-full max-w-auto',
                                confirmButton: 'px-4 py-3 m-0 w-full text-lg font-bold text-white border-gray-200 custom-btn bg-blue-800 block',
                            },
                            focusConfirm: false,
                            confirmButtonColor: '#1E3A8A'
                        }).then(function() {
                            window.location.replace("{{route('mobile.my-rewards')}}")
                        });
                    },
                    error: function(jqXHR, textStatus, exception) {
                        swal.fire("Failed!", jqXHR.responseJSON.message, "error")
                    }
                });
            })
        });
    </script>
@endpush