@extends('admin.layouts.masterlayout')

@section('title')
View Promotion
@endsection

@section('head_title')
Promotion
@endsection

@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Promotion Details</h2>
        <p><a href="{{ route('admin.promotions.index') }}">Promotion List</a> / Promotion Details</p>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="post-image-container h-auto mb-4">
                <div class="post-image-title">
                    <h2>Promotion Details</h2>
                </div>
                <div class="post-image-body">
                    <div class="post-image-flex mb-3">
                        <h2>Shop:</h2>
                        <p>{{ $promotion->shop->shop_name ?? 'NA' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Discount Code:</h2>
                        <p>{{ $promotion->discount_code ?? 'NA' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Discount Type:</h2>
                        <p>{{ $promotion->discount_type == 0 ? 'Percentage' : 'Fixed' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Assign To:</h2>
                        <p>{{ $promotion->assign_to == 0 ? 'Existing Users' : 'New Users' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Discount Value:</h2>
                        <p>{{ $promotion->discount_value ?? 'NA' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Usage Limit:</h2>
                        <p>{{ $promotion->usage_limit ?? 'NA' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Expiry Date:</h2>
                        <p>{{ \Carbon\Carbon::parse($promotion->expiry_date)->format('F d, Y') ?? 'NA' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Extra Notes:</h2>
                        <p>{{ $promotion->extra_notes ?? 'NA' }}</p>
                    </div>
                    <div class="post-image-flex mb-3">
                        <h2>Show To Users:</h2>
                        <p>{{ $promotion->show_to_users == 1 ? 'Yes' : 'No' }}</p>
                    </div>
                    <div class="col-lg-12">
                        <div class="post-image-flex mb-3 align-items-center">
                            <h2>Status</h2>
                            @php
                            $status = $promotion->status ?? 'inactive';
                            $statusClass = $status === 'active' ? 'active' : 'inactive';
                            $statusText = ucfirst($statusClass);
                            @endphp
                            <div class="table-badge {{ $statusClass }}">{{ $statusText }}</div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="post-image-flex mb-3 align-items-center">
                            <h2>Is Expired</h2>
                            @php
                            $isExpired = $promotion->is_expired ?? 'inactive';
                            $isExpiredClass = $isExpired === 'active' ? 'active' : 'inactive';
                            $isExpiredText = $promotion->is_expired == 0 ? 'No' : 'Yes';
                            @endphp
                            <div class="table-badge {{ $isExpiredClass }}">{{ $isExpiredText }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="post-image-container h-auto mb-4">
                <div class="post-image-title">
                    <h2>Promotions Usages History</h2>
                </div>
            <div class="post-image-body px-1 pt-3 promo-usages-history">

                    <div class="tab-content">
                        <div id="artist_data">
                            <div class="ct-dashboard-table-container">
                                <div class="card p-0 border-0 shadow-none">
                                    <div class="table-responsive">
                                        <table class="table mb-0" id="promoUsage_Table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Customer Name</th>
                                                    <th>Email</th>
                                                    <th>Shop</th>
                                                    <th>Used Date</th>
                                                    <th>Promo</th>
                                                    <th>Value</th>
                                               
                                                </tr>
                                            </thead>
                                            <tbody> </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        // === REQUESTED DATATABLE ===
        const promoUsage_Table = $('#promoUsage_Table').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{route('admin.getPromotionUsageList')}}",
            order: [],
             columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex',orderable: false, searchable: false  },  
                { data: 'customer_name', name: 'customer_name',orderable: false, searchable: false  },
                { data: 'customer_email', name: 'customer_email',orderable: false, searchable: false  },
                { data: 'shop_name', name: 'shop_name',orderable: false, searchable: false  },
                { data: 'used_date', name: 'used_date',orderable: false, searchable: false  },
                { data: 'discount_code', name: 'discount_code',orderable: false, searchable: false  },
                { data: 'discount_value', name: 'discount_value',orderable: false, searchable: false  },
            ]
        });

       
    });
</script>
@endsection