@extends('superadmin.layouts.app')

@section('title', 'Shortlink Management')

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Shortlink Management</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('super-admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Shortlink Management</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Statistics Cards -->
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{ number_format($stats['total']) }}</h3>
                            <p>Total Shortlinks</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-link"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{ number_format($stats['today']) }}</h3>
                            <p>Created Today</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{ number_format($stats['this_week']) }}</h3>
                            <p>This Week</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-week"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{ number_format($stats['total_clicks']) }}</h3>
                            <p>Total Clicks</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-mouse-pointer"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Stats Row -->
            <div class="row mb-4">
                <div class="col-lg-3 col-6">
                    <div class="info-box">
                        <span class="info-box-icon bg-secondary"><i class="fas fa-calendar-alt"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">This Month</span>
                            <span class="info-box-number">{{ number_format($stats['this_month']) }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Quick Stats:</strong> 
                        Total of {{ number_format($stats['total']) }} shortlinks with {{ number_format($stats['total_clicks']) }} total clicks.
                        {{ number_format($stats['today']) }} new shortlinks created today.
                    </div>
                </div>
            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="info-box">
                        <span class="info-box-icon bg-warning"><i class="fas fa-chart-line"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Avg Clicks</span>
                            <span class="info-box-number">{{ $stats['avg_clicks_per_shortlink'] }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters and Search -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Filter &amp; Search</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('super-admin.shortlinks.index') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="search">Search</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" 
                                           placeholder="ID, URL, label, user...">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="user_id">User</label>
                                    <select class="form-control" id="user_id" name="user_id">
                                        <option value="">All Users</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }} ({{ $user->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="">All Status</option>
                                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="date_from">Date From</label>
                                    <input type="date" class="form-control" id="date_from" name="date_from" 
                                           value="{{ request('date_from') }}">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="date_to">Date To</label>
                                    <input type="date" class="form-control" id="date_to" name="date_to" 
                                           value="{{ request('date_to') }}">
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="clicks_min">Min Clicks</label>
                                    <input type="number" class="form-control" id="clicks_min" name="clicks_min" 
                                           value="{{ request('clicks_min') }}" min="0">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="clicks_max">Max Clicks</label>
                                    <input type="number" class="form-control" id="clicks_max" name="clicks_max" 
                                           value="{{ request('clicks_max') }}" min="0">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="sort_by">Sort By</label>
                                    <select class="form-control" id="sort_by" name="sort_by">
                                        <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Created Date</option>
                                        <option value="clicks" {{ request('sort_by') == 'clicks' ? 'selected' : '' }}>Clicks</option>
                                        <option value="id" {{ request('sort_by') == 'id' ? 'selected' : '' }}>ID</option>
                                        <option value="updated_at" {{ request('sort_by') == 'updated_at' ? 'selected' : '' }}>Updated Date</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="sort_order">Order</label>
                                    <select class="form-control" id="sort_order" name="sort_order">
                                        <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('super-admin.shortlinks.index') }}" class="btn btn-secondary btn-block">
                                        <i class="fas fa-times"></i> Clear
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('super-admin.shortlinks.export', request()->query()) }}" class="btn btn-success btn-block">
                                        <i class="fas fa-download"></i> Export
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Shortlinks Table -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Shortlinks ({{ $shortlinks->total() }} total)</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-danger btn-sm" id="bulkDeleteBtn" style="display: none;">
                            <i class="fas fa-trash"></i> Bulk Actions
                        </button>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    <form id="bulkForm" method="POST" action="{{ route('super-admin.shortlinks.bulk-action') }}">
                        @csrf
                        <table class="table table-hover text-nowrap">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll">
                                    </th>
                                    <th>ID</th>
                                    <th>Original URL</th>
                                    <th>Custom Label</th>
                                    <th>User</th>
                                    <th>Clicks</th>
                                    <th>Status</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($shortlinks as $shortlink)
                                <tr>
                                    <td>
                                        <input type="checkbox" name="shortlink_ids[]" value="{{ $shortlink->id }}" class="shortlink-checkbox">
                                    </td>
                                    <td>
                                        <code>{{ $shortlink->id }}</code>
                                    </td>
                                    <td>
                                        <div style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;" title="{{ $shortlink->original }}">
                                            {{ $shortlink->original }}
                                        </div>
                                    </td>
                                    <td>
                                        {{ $shortlink->custom_label ?: '-' }}
                                    </td>
                                    <td>
                                        @if($shortlink->user)
                                            <a href="{{ route('super-admin.users.show', $shortlink->user) }}" class="text-decoration-none">
                                                {{ $shortlink->user->name }}
                                                <br><small class="text-muted">{{ $shortlink->user->email }}</small>
                                            </a>
                                        @else
                                            <span class="text-muted">No User</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-info">{{ number_format($shortlink->clicks) }}</span>
                                    </td>
                                    <td>
                                        @if($shortlink->is_active)
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <small>{{ $shortlink->created_at->format('M d, Y') }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('super-admin.shortlinks.show', $shortlink) }}" 
                                               class="btn btn-sm btn-info" title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <form method="POST" action="{{ route('super-admin.shortlinks.toggle-status', $shortlink) }}" style="display: inline;">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" class="btn btn-sm {{ $shortlink->is_active ? 'btn-warning' : 'btn-success' }}" 
                                                        title="{{ $shortlink->is_active ? 'Deactivate' : 'Activate' }}">
                                                    <i class="fas {{ $shortlink->is_active ? 'fa-pause' : 'fa-play' }}"></i>
                                                </button>
                                            </form>
                                            <form method="POST" action="{{ route('super-admin.shortlinks.destroy', $shortlink) }}" 
                                                  style="display: inline;" 
                                                  onsubmit="return confirm('Are you sure you want to delete this shortlink?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center text-muted py-4">
                                        <i class="fas fa-link fa-3x mb-3"></i>
                                        <br>No shortlinks found.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </form>
                </div>
                @if($shortlinks->hasPages())
                <div class="card-footer">
                    {{ $shortlinks->appends(request()->query())->links() }}
                </div>
                @endif
            </div>
        </div>
    </section>
</div>

<!-- Bulk Action Modal -->
<div class="modal fade" id="bulkActionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Actions</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Select an action to perform on <span id="selectedCount">0</span> selected shortlinks:</p>
                <div class="form-group">
                    <label for="bulkAction">Action:</label>
                    <select class="form-control" id="bulkAction" name="action">
                        <option value="activate">Activate</option>
                        <option value="deactivate">Deactivate</option>
                        <option value="delete">Delete</option>
                    </select>
                </div>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    This action cannot be undone for deleted shortlinks.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmBulkAction">Execute Action</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.table td {
    vertical-align: middle;
}
.url-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Select all functionality
    $('#selectAll').change(function() {
        $('.shortlink-checkbox').prop('checked', this.checked);
        toggleBulkActions();
    });

    // Individual checkbox change
    $('.shortlink-checkbox').change(function() {
        toggleBulkActions();
        
        // Update select all checkbox
        var totalCheckboxes = $('.shortlink-checkbox').length;
        var checkedCheckboxes = $('.shortlink-checkbox:checked').length;
        $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
    });

    // Toggle bulk actions button
    function toggleBulkActions() {
        var checkedCount = $('.shortlink-checkbox:checked').length;
        if (checkedCount > 0) {
            $('#bulkDeleteBtn').show();
            $('#selectedCount').text(checkedCount);
        } else {
            $('#bulkDeleteBtn').hide();
        }
    }

    // Show bulk action modal
    $('#bulkDeleteBtn').click(function() {
        $('#bulkActionModal').modal('show');
    });

    // Confirm bulk action
    $('#confirmBulkAction').click(function() {
        var action = $('#bulkAction').val();
        var form = $('#bulkForm');
        
        // Add action to form
        $('<input>').attr({
            type: 'hidden',
            name: 'action',
            value: action
        }).appendTo(form);
        
        // Submit form
        form.submit();
    });
});
</script>
@endpush