@extends('layouts.user')
@section('title')
    @lang('Trade Gift Card')
@endsection
@section('breadcrumb')
    @lang('Sell Giftcard')
@endsection
@section('content')

    <div class="nk-content-body">
        <div class="components-preview wide-md mx-auto">
            <div class="nk-block nk-block-lg">
                @include('user.partials.breadcrumb',['btitle'=>'Trade Giftcard'])
                <div class="card card-bordered card-preview">
                    <div class="card-inner">

                        <div class="row gy-4">
                            <div class="col-sm-4">

                                <div class="form-group">
                                    <label class="form-label">Select Giftcard Type</label>
                                    <div class="form-control-wrap">
                                        <select id="gift-card" class="form-select js-select2" data-search="on" required>
                                            <option value="" >Select Giftcard Type</option>
                                            @foreach ($giftCards as $giftCard)
                                                <option value="{{ $giftCard->id }}">{{ $giftCard->card_name }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">

                                <div class="form-group">
                                    <label class="form-label">Select Currency</label>
                                    <div class="form-control-wrap">
                                        <select id="currency_id" class="form-control" required>
                                            <option value="">Select Currency </option>
                                            <option value="$">$- Dollar </option>
                                            <option value="€">€- Euro </option>
                                            <option value="£">£- Pounds</option>
                                            <option value="AU$">AU$- Austratralian US Dollar</option>
                                            <option value="CAN$">$- Canadian US Dollar</option>

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

                            </div><div class="col-sm-4">

                                <div class="form-group">
                                    <label class="form-label">Select Amount</label>
                                    <div class="form-control-wrap">
                                        <select id="gift-card-amount" class="form-control" required>
                                            <option value="">Select Giftcard Amount</option>

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

                            </div> <div class="col-sm-4">
                                <div class="form-group">    <label class="form-label">QTY</label>    <div class="form-control-wrap number-spinner-wrap">
                                        <button class="btn btn-icon btn-outline-light number-spinner-btn number-minus" data-number="minus"><em class="icon ni ni-minus"></em>
                                        </button>        <input type="number" class="form-control number-spinner" id="qty" value="1">
                                        <button class="btn btn-icon btn-outline-light number-spinner-btn number-plus" data-number="plus">
                                            <em class="icon ni ni-plus"></em></button>    </div></div>


                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary pull-right" id="add">Add</button>
                            </div>

                        </div>

                    </div>
                </div><!-- .card-preview -->
                <div class="card card-bordered card-preview">
                    <form action="{{route('admin.add-giftcard')}}" id="tradeForm" method="POST">
                        @csrf
                    <div class="card-inner">

                        <table class="table" id="myTrade">
                            <thead>
                            <tr>

                                <th>GiftCard</th>

                            </tr>
                            </thead>

                            <tbody>


                            </tbody>


                        </table>

                    </div>
                    <div class="card-footer text-right ">
                        <button class="btn btn-primary" type="button" id="loading-btn" disabled style="display: none">            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>
                        <button type="submit" class="btn btn-primary " id="btn-submit">Trade Selected GiftCard</button>

                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function () {
            $("#gift-card").val("").trigger('change');
            function addCommas(nStr)
            {
                nStr += '';
                x = nStr.split('.');
                x1 = x[0];
                x2 = x.length > 1 ? '.' + x[1] : '';
                var rgx = /(\d+)(\d{3})/;
                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }
                return x1 + x2;
            }
            $('#gift-card').change(function () {
                var selectedGiftCardId = $(this).val();

                // Make an AJAX request to retrieve the gift card amounts based on the selected gift card ID
                $.ajax({
                    url: "{{url('user/giftcard/get-amount')}}/" + selectedGiftCardId,
                    type: 'GET',
                    success: function (response) {
                        // Clear existing options in the gift card amount select
                        $('#gift-card-amount').empty();
                        console.log(response);
                        // Append the new options based on the response
                        $('#gift-card-amount').append(' <option value="">Select Giftcard Amount</option>');
                        $.each(response, function (index, amount) {

                            $('#gift-card-amount').append('<option value="' + amount + '">' + index + '</option>');
                        });
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            });

            $('#add').click(function () {

                var giftCardN = $('#gift-card').find('option:selected').text();
                var giftcardCurrency = $('#currency_id').find('option:selected').val();
                var giftCardAmt = $('#gift-card-amount').find('option:selected').text();
                var giftCardAmtV = $('#gift-card-amount').val();
                var giftCardV = '<input type="hidden" value="' + $('#gift-card').val() + '" name="giftCardID[]" />';
                var giftCardA = '<input type="hidden" value="' + giftCardAmtV + '" name="amount[]" />';
                var qty = $("#qty").val();
                var giftCardQty = '<input type="hidden" value="' + qty + '" name="qty[]" />';
                var giftCardCurrencyInput = '<input type="hidden" value="' + giftcardCurrency + '" name="currency[]" />';

                var rate =0;

        //get the rate
                var newRow = $('<tr>');
                var cols = '';
              //  console.log(giftCardAmt);
 if(giftCardAmtV==''){
     showAlert('Please Select Giftcard Amount','error');
     return;
 }
 if(giftcardCurrency==''){
     showAlert('Please Select Giftcard Currency','error');
     return;
 }

                $.ajax({
                    url:"{{url('user/giftcard/get-rate')}}/"+giftCardAmtV,
                    type: 'GET',
                    success: function(response){
                       rate= response.rate;
                       console.log(response.rate);

                        cols += '<td>' +giftcardCurrency+ giftCardAmt + " " + giftCardN +" x " +qty + ' <button class="btn_remove btn btn-xs btn-danger" id="remove"><i class="icon ni ni-trash"></i>Remove</button></td>';

                        cols += '<td></td>';

                        newRow.append(cols);
                        newRow.append(giftCardA);
                        newRow.append(giftCardV);
                        newRow.append(giftCardQty);
                        newRow.append(giftCardCurrencyInput);

                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                        cols += '<td class="bg-danger">Error</td>';
                    }
                })

                $('#myTrade').append(newRow);

            })

            $(document).on('click', '.btn_remove', function(){

                $(this).closest('tr').remove();
            });
//sumit the fucking form
            $("#btn-submit").click(function(e){
                e.preventDefault();
                var submitBtn= $("#btn-submit");
                var loadingBtn= $("#loading-btn");

                var formData = $('#tradeForm').serialize();

                var hasInputWithName = $('#tradeForm').find('input[name="giftCardID[]"]').length > 0;
if(!(hasInputWithName)){
    showAlert("Please Add At least 1 GiftCard to continue Trade", 'error');
    return;
}
                loadingBtn.show();
                submitBtn.hide();
                $.ajax({
                    url: "{{url('user/giftcard/save-trade')}}",
                    type: "POST",
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                        console.log(response)
                      //  showError(response);
                        loadingBtn.hide();
                        submitBtn.show();
                       // console.log(response);
                        window.location.href = "{{url('/user/giftcard/merchant/')}}"+"/"+response;
                    },
                    error: function(xhr, status, error){

                        //console.log(xhr.responseJSON.message);
                       loadingBtn.hide();
                       submitBtn.show();
                        showAlert(xhr.responseJSON.message, 'error');

                    }
                })
            })
        });
    </script>
@endpush