@extends("layout.app")
@section("content")
    <style>
        .badge {
            padding: 10px;
            color: #fff;
        }
    </style>
    <style>
        .gift-cards-container {
            display: inline-block;
            margin-right: 5px;
        }

        .badge {
            padding: 10px;
            color: #fff;
        }

        .gift-card-button {
            font-weight: normal;
            font-size: 11px;
            cursor: pointer;
        }

        .gift-card-button:hover {

        }

        .gift-card-button {
            margin-left: 8px;
        }

        .gift-card-button i {
            margin-left: 1px;
        }
    </style>
    <section class="bg--secondary space--sm">
        <div class="container">
            <div class="row">
                @include("customers.aside")
                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-md-6 col-6 d-flex">
                            <div class="card boxed boxed--lg boxed--border text-center flex-fill">
                                <span class="h4 m-0 font-weight-bold type--fade">رصيدي</span>
                                <span class="h3"><span id="balance-amount">{{ number_format($balance, 2) }}</span> شيكل</span>
                                <a target="_blank"
                                   href="{{route("accessories-listing",['accessory-category' => "gift-cards"])}}">شراء
                                    بطاقات رصيد / هدية <i class="fa fa-external-link-alt"></i></a>
                            </div>
                        </div>

                        <div class="col-md-6 col-6 d-flex">
                            <div class="card boxed boxed--lg boxed--border text-center flex-fill">
                                <form id="redeem">
                                    <div class="col-md-12">
                                        <span class="h4 m-0 font-weight-bold type--fade">شحن رصيد عبر كود كوبون</span>
                                    </div>
                                    @if($gift_cards_r->count()>0)
                                        <div class="col-md-12">
                                            <select name="code-redeem" id="code-redeem">
                                                <option value="">كوبونات غير مستخدمة</option>
                                                @foreach($gift_cards_r as $gift_card_r)
                                                    @php
                                                        $campaignName = $gift_card_r->coupon_campaign ? $gift_card_r->coupon_campaign->name : "بطاقة هدية";
                                                    @endphp
                                                    <option dir="rtl" value="{{$gift_card_r->code}}"
                                                            data-amount="{{$gift_card_r->amount}}"
                                                            data-code="{{$gift_card_r->code}}"
                                                            data-campaign="{{$campaignName}}">
                                                        {{ $gift_card_r->amount." شيكل" }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    <div class="col-md-12">
                                        <input type="text" name="code" value="{{request()->get("code",null)}}"
                                               placeholder="ادخل رمز الكوبون"
                                               class="validate-required" required>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn--primary">شحن</button>
                                    </div>
                                    <div class="col-md-12">
                                        <div id="message-container" style="display: none;">
                                            <div id="message" class="alert"></div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="boxed boxed--lg boxed--border">
                                <nav>
                                    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                                        <button class="nav-link active" id="nav-gift-cards-tab" data-toggle="tab"
                                                data-target="#nav-gift-cards" type="button" role="tab"
                                                aria-controls="nav-gift-cards" aria-selected="false"><strong>بطاقات
                                                الهدايا المستخدمة</strong>
                                        </button>
                                        <button class="nav-link" id="nav-history-tab" data-toggle="tab"
                                                data-target="#nav-history" type="button" role="tab"
                                                aria-controls="nav-history" aria-selected="true"><strong>الرصيد
                                                المستخدم</strong>
                                        </button>

                                    </div>
                                </nav>
                                <div class="tab-content" id="nav-tabContent">
                                    <div class="tab-pane fade show active" id="nav-gift-cards" role="tabpanel"
                                         aria-labelledby="nav-gift-cards-tab">
                                        <div class="pt-4 pb-4">
                                            @if($gift_cards->count()>0)
                                                <table class="border--round table--alternate-row">
                                                    <thead>
                                                    <tr>
                                                        <th width="25%">رقم البطاقة</th>
                                                        <th width="20%">مبلغ البطاقة</th>
                                                        <th width="15%">تاريخ الإستخدام</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($gift_cards as $gift_card)
                                                        <tr>
                                                            <td>
                                                                <div class="gift-card-button-container">
                                                                    {{$gift_card->code}}
                                                                </div>
                                                            </td>
                                                            <td>
                                                                {{$gift_card->amount}}
                                                            </td>

                                                            <td>
                                                                {{$gift_card->redeemed_at->format("d-m-Y")}}

                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <h4 class="text-center">لا يوجد بيانات</h4>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="nav-history" role="tabpanel"
                                         aria-labelledby="nav-history-tab">
                                        <div class="pt-4 pb-4">
                                            @if($balance_histories->count()>0)
                                                <table class="border--round table--alternate-row">
                                                    <thead>
                                                    <tr>
                                                        <th width="25%">رقم الطلب</th>
                                                        <th width="25%">حالة الطلب</th>
                                                        <th width="20%">مبلغ الإستخدام</th>
                                                        <th width="15%">تاريخ الإستخدام</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($balance_histories as $balance_history)
                                                        <tr>
                                                            <td>
                                                                <a href="{{route("customers.order",$balance_history->order->track_id)}}"
                                                                   target="_blank">{{$balance_history->order->track_id}}</a>
                                                            </td>
                                                            <td>
                                                                  <span
                                                                      style="background-color:{{$balance_history->order->status->color}}"
                                                                      class="badge">{{$balance_history->order->status->title}}</span>
                                                            </td>
                                                            <td>
                                                                @if($balance_history->amount)
                                                                    {{$balance_history->amount}}
                                                                @else
                                                                    -
                                                                @endif
                                                            </td>

                                                            <td>
                                                                {{$balance_history->created_at->format("d-m-Y")}}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <h4 class="text-center">لا يوجد بيانات</h4>
                                            @endif
                                        </div>
                                    </div>
                                </div>


                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection
@section("scripts")
    <script>
        $(function () {
            $('#redeem').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    type: 'post',
                    url: '{{ route("customers.balance.redeem") }}',
                    data: $(this).serialize(),
                    success: function (response) {
                        if (response.message === "تم اضافة الكود بنجاح") {
                            var formattedBalance = parseFloat(response.balance).toFixed(2);
                            $('#balance-amount').text(formattedBalance);
                        }
                        showMessage(response.message, 'success');
                    },
                    error: function (xhr) {
                        if (xhr.status === 422) {
                            showMessage(xhr.responseJSON.message, 'danger');
                        }
                        if (xhr.status === 400) {
                            window.location.href = '{{ route("customers.login") }}?error=' + xhr.responseJSON.message;
                        }
                    }
                });
            });

            function showMessage(message, type) {
                var messageContainer = $('#message-container');
                messageContainer.removeClass('alert alert-success alert-danger');
                messageContainer.addClass('alert alert-' + type);
                messageContainer.text(message);
                messageContainer.show();
            }
        });

    </script>
    <script>
        $(document).ready(function () {
            $('.copy-button').on('click', function () {
                var textToCopy = $(this).data('clipboard-text');
                var originalText = $(this).text();
                var icon = '<i class="fa fa-copy"></i>';
                var checkIcon = '<i class="fa fa-check"></i>';
                var inputElement = document.createElement('input');
                inputElement.value = textToCopy;

                document.body.appendChild(inputElement);

                inputElement.select();

                document.execCommand('copy');

                document.body.removeChild(inputElement);

                $(this).html(checkIcon + ' تم النسخ');

                setTimeout(function () {
                    $(this).html(icon + ' ' + originalText);
                }.bind(this), 1000);
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('.redeem-button').on('click', function () {
                var textToRedeem = $(this).data('redeem-text');
                var originalText = $(this).text();
                var icon = '<i class="fa fa-wallet"></i>';
                var checkIcon = '<i class="fa fa-check"></i>';

                var redeemCodeInput = $('input[name="code"]');
                redeemCodeInput.val(textToRedeem);

                $(this).html(checkIcon + ' اضغط على "شحن"');

                setTimeout(function () {
                    $(this).html(icon + ' ' + originalText);
                }.bind(this), 1000);
            });
        });
    </script>
    @if($gift_cards->count()>0)
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <script>
            $(document).ready(function () {
                function formatCoupon(coupon) {
                    if (!coupon.id) {
                        return coupon.text;
                    }
                    var campaign = coupon.element.dataset.campaign;
                    var $coupon = $(
                        '<div style="display: flex; justify-content: space-between; align-items: center;">' +
                        '<span style="text-align: left;">' + coupon.element.dataset.code + '</span>' +
                        '<span>' + coupon.element.dataset.campaign + '</span>' +
                        '<strong style="text-align: right;">' + coupon.element.dataset.amount + ' شيكل</strong>' +
                        '</div>'
                    );
                    return $coupon;
                };

                $('#code-redeem').select2({
                    templateResult: formatCoupon,
                    minimumResultsForSearch: Infinity
                });
            });

        </script>
        <script>
            $(document).ready(function () {
                $('#code-redeem').on('change', function () {
                    var selectedOption = $(this).find('option:selected');

                    var selectedCode = selectedOption.data('code');

                    $('input[name="code"]').val(selectedCode);
                });
            });
        </script>
    @endif
@endsection