@extends('layouts.admin')

@section('style')
    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.css') }}">
    <style>
        .stats-card {
            background: #fff;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }

        .stats-card h3 {
            margin: 0 0 5px 0;
            font-size: 24px;
            font-weight: bold;
        }

        .stats-card p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }
    </style>
@endSection

@section('content')
    <!-- Stats Cards -->
    <div class="card mx-3 mb-3">
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="stats-card">
                    <h3>{{ $stats['today'] }}</h3>
                    <p>Referrals Today</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <h3>{{ $stats['this_week'] }}</h3>
                    <p>Referrals This Week</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <h3>{{ $stats['this_month'] }}</h3>
                    <p>Referrals This Month</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="border-left: 3px solid #28a745;">
                    <h3 class="text-success">{{ $stats['notified'] }}</h3>
                    <p>Notified</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mx-3 mb-3">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.referrer_code_logs.index') }}">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Referral Code</label>
                            <input type="text" name="referrer_code" class="form-control" placeholder="Search by code..."
                                value="{{ $filters['referrer_code'] ?? '' }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Notification Status</label>
                            <select name="is_notified" class="form-control">
                                <option value="">All Status</option>
                                <option value="1" {{ ($filters['is_notified'] ?? '') == '1' ? 'selected' : '' }}>
                                    Notified</option>
                                <option value="0" {{ ($filters['is_notified'] ?? '') === '0' ? 'selected' : '' }}>Not
                                    Notified</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Start Date</label>
                            <input type="date" name="start_date" class="form-control"
                                value="{{ $filters['start_date'] ?? '' }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>End Date</label>
                            <input type="date" name="end_date" class="form-control"
                                value="{{ $filters['end_date'] ?? '' }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary btn-block">
                                    <i class="fas fa-filter"></i> Filter
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-right">
                        <a href="{{ route('admin.referrer_code_logs.index') }}" class="btn btn-default btn-sm">
                            <i class="fas fa-times"></i> Clear Filters
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Main content -->
    @component('admin.components.tabs')
        <table id="referral_logs_table" class="table-bordered table-hover dataTable table">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>ID</th>
                    <th>Referral Code</th>
                    <th>Referrer</th>
                    <th>Referee</th>
                    <th>Notification Status</th>
                    <th>Created At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($referral_logs as $log)
                    <tr>
                        <td></td>
                        <td>{{ $log->id }}</td>
                        <td>
                            <strong>{{ $log->referrer_code }}</strong>
                        </td>
                        <td>
                            @if ($log->referrer)
                                <strong>{{ $log->referrer->name }}</strong>
                                <br>
                                <small class="text-muted">ID: {{ $log->referrer->id }}</small>
                                @if ($log->referrer->email)
                                    <br>
                                    <small class="text-muted">{{ $log->referrer->email }}</small>
                                @endif
                            @else
                                <span class="text-muted">User #{{ $log->referrer_user_id }}</span>
                            @endif
                        </td>
                        <td>
                            @if ($log->user)
                                <strong>{{ $log->user->name }}</strong>
                                <br>
                                <small class="text-muted">ID: {{ $log->user->id }}</small>
                                @if ($log->user->email)
                                    <br>
                                    <small class="text-muted">{{ $log->user->email }}</small>
                                @endif
                            @else
                                <span class="text-muted">User #{{ $log->user_id }}</span>
                            @endif
                        </td>
                        <td>
                            @if ($log->is_notified)
                                <span class="badge badge-success">
                                    <i class="fas fa-check"></i> Notified
                                </span>
                            @else
                                <span class="badge badge-warning">
                                    <i class="fas fa-clock"></i> Not Notified
                                </span>
                            @endif
                        </td>
                        <td>{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                        <td>
                            <a href="{{ route('admin.referrer_code_logs.show', $log->id) }}" class="btn btn-sm btn-info">
                                <i class="fas fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endcomponent
@endsection

@section('script')
    <script src="{{ asset('assets/bower/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script>
        $(function() {
            var t = $('#referral_logs_table').DataTable({
                lengthMenu: [
                    [10, 25, 50, 100, 200, 500, -1],
                    [10, 25, 50, 100, 200, 500, "All"]
                ],
                dom: "<'row p-2'<'#back_button.col-sm-6 mb-2 text-left'><'#export_buttons.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                autoWidth: false,
                order: [
                    [6, 'desc']
                ]
            });

            t.on('order.dt search.dt', function() {
                t.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
        });
    </script>
@endSection