@extends('layouts.admin')

@section('title')
   @lang('Manage Country')
@endsection

@section('breadcrumb')
 <section class="section">
    <div class="section-header d-flex flex-wrap justify-content-between">
        <h1 class="mt-2">@lang('Manage GiftCard')</h1>
        <form action="">
            <div class="input-group has_append mt-2">
              <input type="text" class="form-control" placeholder="Gift Card Name" name="search" value="{{$search ?? ''}}"/>
              <div class="input-group-append">
                  <button class="input-group-text bg-primary border-0"><i class="fas fa-search text-white"></i></button>
              </div>
            </div>
          </form>
        @if (access('add country'))
            <div class="btn btn-groupd">
        <button class="btn btn-primary mt-2" data-toggle="modal" data-target="#addModal"><i class="fas fa-plus"></i> @lang('Add New')</button>
        <button class="btn btn-success mt-2" data-toggle="modal" data-target="#addAmount"><i class="fas fa-plus"></i> @lang('Add GiftCard Amount')</button>
            </div>
        @endif
    </div>
</section>
@endsection

@section('content')
<div class="row">

    @forelse ($giftCard as $card)
    <div class="col-sm-6 col-lg-6 col-xl-3 currency--card">
      <div class="card card-primary">
        <div class="card-header">
          <h4>{{$card->card_name}} </h4>
            <div class="card-header-action">
                <a class="btn btn-primary" data-toggle="collapse" href="#collapsec{{$card->id}}" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Amounts
                </a>
            </div>

        </div>
        <div class="card-body">

            <div class="collapse" id="collapsec{{$card->id}}">

                    <ul class="list-group mb-3">

                        @forelse($card->giftCardAmount as $cAmount)

                            <li class="list-group-item">
                                Amount:
                                <span class="font-weight-bold">${{$cAmount->amount}}</span><br>
                                Rate:
                                <span class="font-weight-bold">{{$cAmount->rate}}/USD</span><br>
                                Referer Bonus:
                                <span class="font-weight-bold">NGN{{$cAmount->refer_bonus}}</span><br>
                                <div class="btn btn-group-sm">
                                    <button class="btn btn-sm btn-primary editAmount" data-id="{{$cAmount->id}}" data-amount="{{$cAmount->amount}}"
                                            data-rate="{{$cAmount->rate}}" data-cardname="{{$card->card_name}}" data-bonus="{{$cAmount->refer_bonus}}" data-gitcard="{{$card->id}}" data-target="#editAmountModal" data-toggle="modal" ><i class="fas fa-edit"></i>Edit Amount</button><button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i>Delete</button></div>
                            </li>
                        @empty

                        @endforelse


                    </ul>

            </div>

            @if (access('update country'))
                <a href="javascript:void(0)" data-target="#addAmount" data-toggle="modal" data-id="{{$card->id}}"  class="btn btn-success btn-block edit"><i class="fas fa-plus"></i> @lang('Add Amount')</a>
            <a href="javascript:void(0)" data-target="#editModal" data-toggle="modal" data-id="{{$card->id}}"  class="btn btn-primary btn-block edit"><i class="fas fa-edit"></i> @lang('Edit Giftcard')</a>


            @endif
        </div>
      </div>
    </div>
    @empty
    <div class="col-md-12 text-center">
        <h5>@lang('No GiftCard Found')</h5>
    </div>
    @endforelse
</div>

<!-- Modal -->
@if (access('add country'))
   @include('admin.giftcard.add_giftcard')
   @include('admin.giftcard.add_amount',['giftCard'=>$giftCard])
   @include('admin.giftcard.edit_giftcard_amount',['giftCard'=>$giftCard])
@endif

@endsection


@push('script')
    <script>
        'use strict';


        $('.editAmount').on('click',function () {
            var modalEl =  $('#editAmountModal');
            modalEl.find('input[name=id]').val($(this).data('id'))
            modalEl.find('input[name=amount]').val($(this).data('amount'))
            modalEl.find('input[name=rate]').val($(this).data('rate'))
            modalEl.find('input[name=refer_bonus]').val($(this).data('bonus'))
            modalEl.find('.modal-title').text("Edit Amount for "+$(this).data('cardname'))
        })


    </script>
@endpush