@extends('layouts.main')

@section('container')
    <!-- [ Main Content ] start -->

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center"
                    style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);">
                    <div class="d-flex align-items-center">
                        <div class="bg-opacity-20 p-2 rounded-circle me-3">
                            <i class="fas fa-link text-white"></i>
                        </div>
                        <h5 class="mb-0 text-white fw-semibold">
                            Kelola Tracking Link
                        </h5>
                    </div>
                </div>
                <div class="card-body pc-component">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-compact">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th>Link Tracking</th>
                                    <th>Redirect URL</th>
                                    <th>Dibuat Oleh</th>
                                    <th>Dibuat Pada</th>
                                    <th width="5%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($trackingLinks as $link)
                                    <tr>
                                        <td>{{ $loop->iteration + ($trackingLinks->currentPage() - 1) * $trackingLinks->perPage() }}
                                        </td>
                                        <td><a href="#" data-link="{{ url('/track/' . $link->slug) }}" class="copy-btn">/track/{{ $link->slug }}</a></td>
                                        <td><a href="{{ $link->redirect_url }}"
                                                target="_blank">{{ $link->redirect_url }}</a></td>
                                        <td>{{ $link->creator->email ?? '-' }}</td>
                                        <td>{{ $link->created_at->format('d M Y H:i') }}</td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-default" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-h"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="{{ route('edit.link.tracking', $link->id) }}"
                                                            class="dropdown-item text-warning">
                                                            <i class="ti ti-pencil"></i> Edit
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <form action="{{ route('hapus.link.tracking', $link->id) }}"
                                                            method="POST"
                                                            onsubmit="return confirm('Yakin ingin menghapus link ini?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="dropdown-item text-danger">
                                                                <i class="ti ti-trash"></i> Hapus
                                                            </button>
                                                        </form>
                                                    </li>
                                                    <li>
                                                        <button type="button" class="dropdown-item text-primary copy-btn"
                                                            data-link="{{ url('/track/' . $link->slug) }}">
                                                            <i class="ti ti-copy"></i> Salin Link
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>

                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">Belum ada tracking link</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center mt-3">
                            @if ($trackingLinks->onFirstPage())
                                <li class="page-item disabled">
                                    <span class="page-link">Previous</span>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $trackingLinks->previousPageUrl() }}"
                                        rel="prev">Previous</a>
                                </li>
                            @endif

                            @foreach ($trackingLinks->getUrlRange(1, $trackingLinks->lastPage()) as $page => $url)
                                @if ($page == $trackingLinks->currentPage())
                                    <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                                @else
                                    <li class="page-item"><a class="page-link"
                                            href="{{ $url }}">{{ $page }}</a></li>
                                @endif
                            @endforeach

                            @if ($trackingLinks->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $trackingLinks->nextPageUrl() }}" rel="next">Next</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <span class="page-link">Next</span>
                                </li>
                            @endif
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('.copy-btn');

            buttons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const link = this.getAttribute('data-link');
                    navigator.clipboard.writeText(link).then(() => {
                        alert('Link berhasil disalin: ' + link);
                    }).catch(err => {
                        alert('Gagal menyalin link');
                        console.error(err);
                    });
                });
            });
        });
    </script>
@endsection