@php
    $headerOption = [
        'title' => $module,
        'header_buttons' => [
            ($permission['create'] ? '<a class="'. \Config::get('view.buttons.primary') .'" href="'. route($routePrefix . '.create') .'" data-toggle="tooltip" data-original-title="Add New Record">'. \Config::get('settings.icon_add') .' <span>Add New</span></a>' : '')
        ],
        'filters' => isset($filters) ? $filters : [],
        'data'    => isset($data) ? $data : []
    ];
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="col-xl-12">
        <div class="row">
            <div class="col-sm-3">
                <div class="card border border-primary">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-1">
                            <div class="avatar-sm me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                    <i class="bx bx-copy-alt"></i>
                                </span>
                            </div>
                            <h5 class="font-size-14 mb-0">Total Offers Received</h5>
                        </div>
                        <div class="text-muted mt-2">
                            <h4>$ 1,452 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
                            <div class="d-flex">
                                <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span class="ms-2 text-truncate">From previous period</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="card border border-warning">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-1">
                            <div class="avatar-sm me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                    <i class="bx bx-archive-in"></i>
                                </span>
                            </div>
                            <h5 class="font-size-14 mb-0">Pending Offers</h5>
                        </div>
                        <div class="text-muted mt-2">
                            <h4>$ 28,452 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
                            <div class="d-flex">
                                <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span class="ms-2 text-truncate">From previous period</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="card border border-success">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-1">
                            <div class="avatar-sm me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                    <i class="bx bx-purchase-tag-alt"></i>
                                </span>
                            </div>
                            <h5 class="font-size-14 mb-0">Active Sponsorship</h5>
                        </div>
                        <div class="text-muted mt-2">
                            <h4>$ 16.2 <i class="mdi mdi-chevron-down ms-1 text-danger"></i></h4>
                            
                            <div class="d-flex">
                                <span class="badge badge-soft-warning font-size-12"> 0% </span> <span class="ms-2 text-truncate">From previous period</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="card border border-danger">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-1">
                            <div class="avatar-sm me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                    <i class="fas fa-ban"></i>
                                </span>
                            </div>
                            <h5 class="font-size-14 mb-0">Declined / Withdrawn</h5>
                        </div>
                        <div class="text-muted mt-2">
                            <h4>$ 28,452 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
                            <div class="d-flex">
                                <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span class="ms-2 text-truncate">From previous period</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <div class="table-responsive">
        <table class="{!! \Config::get('view.table.table_class') !!}">
            <thead class="{!! \Config::get('view.table.table_head_class') !!}">
                <tr>
                    <th>Offer Title {!! \App\Helpers\Helper::sort($routePrefix . '.index', 'title', $orderBy) !!}</th>
                    <th colspan="2">Sponsor</th>
                    <th>Type</th>
                    <th style="text-align: right;">Funding</th>
                    <th>Duration</th>
                    <th>Status</th>
                    <!-- <th>Created At</th> -->
                    @if ($permission['edit'] || $permission['destroy'])
                        <th width="15%" style="text-align: right;">Action</th>
                    @endif
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>Elite Athlete Sponsorship</td>
                    <td style="width: 2%;">
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-primary text-white font-size-16">EA</span>
                        </div>
                    </td>
                    <td>Elite Athletics</td>
                    <td><span class="badge bg-success bg-opacity-10 text-success">Cash</span></td>
                    <td class="text-right">$5,000</td>
                    <td>Feb–Nov 2025</td>
                    <td><span class="badge bg-warning bg-opacity-25 text-warning">Pending</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-1').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-1"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_1"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Summer Gear Partnership</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-success text-white font-size-16">SG</span>
                        </div>
                    </td>
                    <td>GearUp Sports</td>
                    <td><span class="badge bg-primary bg-opacity-10 text-primary">Product</span></td>
                    <td class="text-right">$2,500</td>
                    <td>Jun–Aug 2025</td>
                    <td><span class="badge bg-success bg-opacity-25 text-success">Active</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-2').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-2"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_2"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Annual Nutrition Grant</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-warning text-white font-size-16">NG</span>
                        </div>
                    </td>
                    <td>NutriLife</td>
                    <td><span class="badge bg-success bg-opacity-10 text-success">Cash</span></td>
                    <td class="text-right">$1,800</td>
                    <td>Jan–Dec 2025</td>
                    <td><span class="badge bg-primary bg-opacity-25 text-primary">Completed</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-3').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-3"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_3"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Winter Training Support</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-info text-white font-size-16">WT</span>
                        </div>
                    </td>
                    <td>WinterPro</td>
                    <td><span class="badge bg-primary bg-opacity-10 text-primary">Product</span></td>
                    <td class="text-right">$1,200</td>
                    <td>Nov 2025–Feb 2026</td>
                    <td><span class="badge bg-secondary bg-opacity-25 text-secondary">Withdrawn</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-4').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-4"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_4"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Spring Social Campaign</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-danger text-white font-size-16">SC</span>
                        </div>
                    </td>
                    <td>Socialize Inc.</td>
                    <td><span class="badge bg-purple bg-opacity-0 text-bg-info">Hybrid</span></td>
                    <td class="text-right">$900</td>
                    <td>Apr–Jun 2025</td>
                    <td><span class="badge bg-danger bg-opacity-25 text-danger">Declined</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-5').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-5"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_5"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Pro Athlete Endorsement</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-success text-white font-size-16">PA</span>
                        </div>
                    </td>
                    <td>ProEndorse</td>
                    <td><span class="badge bg-success bg-opacity-10 text-success">Cash</span></td>
                    <td class="text-right">$3,500</td>
                    <td>May–Oct 2025</td>
                    <td><span class="badge bg-success bg-opacity-25 text-success">Active</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-6').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-6"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_6"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Fitness Equipment Grant</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-warning text-white font-size-16">FE</span>
                        </div>
                    </td>
                    <td>FitEquip</td>
                    <td><span class="badge bg-primary bg-opacity-10 text-primary">Product</span></td>
                    <td class="text-right">$2,200</td>
                    <td>Jul–Sep 2025</td>
                    <td><span class="badge bg-warning bg-opacity-25 text-warning">Pending</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-7').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-7"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_7"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Youth Sports Initiative</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-danger text-white font-size-16">YS</span>
                        </div>
                    </td>
                    <td>YouthFirst</td>
                    <td><span class="badge bg-success bg-opacity-10 text-success">Cash</span></td>
                    <td class="text-right">$1,000</td>
                    <td>Mar–Jul 2025</td>
                    <td><span class="badge bg-danger bg-opacity-25 text-danger">Declined</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-8').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-8"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_8"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Team Apparel Partnership</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-info text-white font-size-16">TA</span>
                        </div>
                    </td>
                    <td>TeamWear</td>
                    <td><span class="badge bg-primary bg-opacity-10 text-primary">Product</span></td>
                    <td class="text-right">$1,700</td>
                    <td>Aug–Dec 2025</td>
                    <td><span class="badge bg-primary bg-opacity-25 text-primary">Completed</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-9').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-9"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_9"></form>
                    </td>
                    @endif
                </tr>
                <tr>
                    <td>Regional Event Sponsorship</td>
                    <td>
                        <div class="avatar-xs">
                            <span class="avatar-title rounded-circle bg-success text-white font-size-16">RE</span>
                        </div>
                    </td>
                    <td>EventPro</td>
                    <td><span class="badge bg-success bg-opacity-10 text-success">Cash</span></td>
                    <td class="text-right">$2,800</td>
                    <td>May–Sep 2025</td>
                    <td><span class="badge bg-success bg-opacity-25 text-success">Active</span></td>
                    @if ($permission['edit'] || $permission['destroy'])
                    <td class="text-right">
                        <a href="#" class="btn btn-sm btn-outline-secondary waves-effect" data-toggle="tooltip" title="" data-original-title="Edit">
                            <i class="mdi mdi-border-color"></i>
                        </a>
                        <a class="btn btn-sm btn-outline-danger waves-effect" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                        document.getElementById('delete-form-10').submit();" data-original-title="Delete">
                            <i class="mdi mdi-delete"></i>
                        </a>
                        <form method="POST" action="#" style="display:inline" id="delete-form-10"><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="dummy_token_10"></form>
                    </td>
                    @endif
                </tr>

                {{-- 
                @if (count($data) != 0)
                    @foreach ($data as $key => $val)
                        <tr>
                            <td>{{ $val->title }}</td>
                            <td><span
                                    class="badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span>
                            </td>
                            <td><span class="utc-time" data-time="{{ $val->created_at->toIso8601String() }}"></span></td>
                            @if ($permission['edit'] || $permission['destroy'])
                                <td class="text-right">
                                    @if ($permission['edit'])
                                        <a href="{{ route($routePrefix . '.edit', $val->id) }}"
                                            class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip" title=""
                                            data-original-title="Edit">{!! \Config::get('settings.icon_edit') !!}</a>
                                    @endif
                                    @if ($permission['destroy'] && $val->id != auth()->user()->id)
                                        <a class="{!! \Config::get('view.table.list_danger_button') !!}" data-toggle="tooltip" title=""
                                            data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                            data-confirm-yes="event.preventDefault();
                    document.getElementById('delete-form-{{ $val->id }}').submit();"
                                            data-original-title="Delete">{!! \Config::get('settings.icon_delete') !!}</a>
                                        {!! html()->form('DELETE', route($routePrefix . '.destroy', $val->id))->attributes([
                                                'style' => 'display:inline',
                                                'id' => 'delete-form-' . $val->id,
                                            ])->open() !!}
                                        {!! html()->form()->close() !!}
                                    @endif
                                </td>
                            @endif
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="25">
                            <div class="alert alert-danger">No Data</div>
                        </td>
                    </tr>
                @endif
                --}}
            </tbody>
        </table>
    </div>

    @include('admin.components.pagination')
@endsection