@extends('admin.templates.layout')
@section('head')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <style>
        .gift-card {
          background: #f8fafc;
          border-radius: 16px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.05);
          transition: 0.3s;
          border: 1px solid #d5afdd;
        }
        
        .gift-card:hover {
          transform: translateY(-4px);
        }
        
        .gift-icon {
          width: 60px;
          height: 60px;
          object-fit: contain;
        }
        
        .price {
          font-size: 22px;
          font-weight: 700;
          color: #FF9201;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 6px;
        }
        
        .price-icon {
          width: 20px;
        }
        
        .badge-active {
          background: #d1fae5;
          color: #059669;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 12px;
        }
        
        .rarity {
          color: #f59e0b;
          font-size: 12px;
          font-weight: 600;
        }
        
        .stat-row {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border-bottom: 1px solid #e5e7eb;
          font-size: 14px;
        }
        
        .btn-light {
          background: #f1f5f9;
          border: none;
        }
        
        .btn-outline-warning {
          border-radius: 10px;
        }
    </style>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-header border-0 d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">Gifts</h5>
                <div>
                    <a class="btn btn-success" href="{{ route('admin.gifts.create') }}">+ New Gift</a>
                </div>
            </div>
           
            <!--<div class="card-body pt-0 mt-4">-->
            <!--</div>-->
        </div>
        
        
                <div>
                    <div class="row">
                        @if ($gifts->first())
                        @foreach($gifts as $gift)

                        
                        <div class="col-lg-4">
                          <div class="gift-card p-4">
                        
                            <!-- Top Icon -->
                            <div class="text-center mb-3">
                              <img src="{{ $gift->icon_image_url }}" class="gift-icon">
                            </div>
                        
                            <!-- Title -->
                            <h5 class="text-center fw-bold mb-2">{{ $gift->title }}</h5>
                        
                            <!-- Status + Rarity -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                              <span class="badge badge-active">{{ $gift->status }}</span>
                              <span class="rarity">{{ ($gift->tag)?$gift->tag->title:'' }}</span>
                            </div>
                        
                            <!-- Price -->
                            <div class="text-center price mb-3">
                              <img src="{{ $gift->icon_image_url }}" class="price-icon">
                              <span>{{ $gift->price }}</span>
                            </div>
                        
                            <!-- Stats -->
                            <div class="stat-row">
                              <span>Category</span>
                              <span class="fw-semibold">{{ ($gift->category)?$gift->category->title:'' }}</span>
                            </div>
                            <div class="stat-row">
                              <span>Sales</span>
                              <span class="fw-semibold">{{ $gift->sales }}</span>
                            </div>
                            <div class="stat-row">
                              <span>Revenue</span>
                              <span class="fw-semibold">{{ $gift->revenue }}</span>
                            </div>
                            <div class="stat-row">
                              <span>Animation</span>
                              <span class="fw-semibold">{{ ($gift->has_animation=='1')?'Yes':'No' }}</span>
                            </div>
                            <div class="stat-row border-0">
                              <span>Limited</span>
                              <span class="fw-semibold">{{  ($gift->limited_edition=='1')?'Yes':'No'  }}</span>
                            </div>
                        
                            <!-- Buttons -->
                            <div class="d-flex gap-2 mt-4">
                              <a href='{{   route('admin.gifts.edit', $gift->id)}}' class="btn btn-dark w-100">Edit</a>
                              <button class="btn btn-warning w-100">{{  ($gift->status=='1')?'Active':'Deactive'  }}</button>
                            </div>
                        
                          </div>
                        </div>
                        
                        
                        @endforeach
                        
                        @endif
                       
                    </div>
                </div>
                
    </div>
</div>
@stop

@section('script')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script>
    jQuery(document).ready(function () {
       $('#search_table').on('keyup', function () { table.draw(); });

        $('body').on('click', '.remove-item-btn', function () {
            let href = $(this).attr('href');
            Swal.fire({
                iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/trash.svg" class="img-fluid">',
                text: 'Do you want to delete this membership plan?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, keep it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({ url: href, type: 'delete', dataType: 'json', data: { "_token": "{{ csrf_token() }}" }, success: function (response) { if (response.status == 'success') { Swal.fire({ text: response.message, iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/tick.svg" class="img-fluid">', timer: 3000, timerProgressBar: true, showConfirmButton: false }).then(() => { window.location.reload(); }); } else { Swal.fire({ text: response.message, iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">', icon: 'error' }); } }, error: function () { Swal.fire({ text: 'Something went wrong. Please try later.', iconHtml: '<img src="{{asset('/')}}admin_assets/assets/images/close.svg" class="img-fluid">', icon: 'error' }); } });
                }
            });
        });
    });
</script>
@stop