@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Checkout Sessions</h1>
        <a href="{{ route('admin.checkout-sessions.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create New Session
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Event Title</th>
                            <th>Date</th>
                            <th>Location</th>
                            <th>Status</th>
                            <th>Expires At</th>
                            <th>Checkout Link</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sessions as $session)
                            <tr>
                                <td>{{ $session->unique_id }}</td>
                                <td>{{ $session->data['event']['title'] ?? 'N/A' }}</td>
                                <td>{{ $session->data['event']['date'] ?? 'N/A' }}</td>
                                <td>{{ $session->data['event']['location'] ?? 'N/A' }}</td>
                                <td>
                                    <span class="badge bg-{{ $session->status === 'active' ? 'success' : 'danger' }}">
                                        {{ ucfirst($session->status) }}
                                    </span>
                                </td>
                                <td>{{ $session->expires_at ? $session->expires_at->format('Y-m-d H:i:s') : 'N/A' }}</td>
                                <td>
                                    <div class="input-group">
                                        <input type="text" 
                                               class="form-control form-control-sm checkout-link" 
                                               value="https://checkout.ticketmasters.shop/checkout/{{ $session->unique_id }}" 
                                               readonly>
                                        <button class="btn btn-sm btn-outline-secondary copy-link" 
                                                type="button" 
                                                data-bs-toggle="tooltip" 
                                                data-bs-placement="top" 
                                                title="Copy link">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <a href="https://checkout.ticketmasters.shop/checkout/{{ $session->unique_id }}" 
                                           target="_blank"
                                           class="btn btn-sm btn-outline-primary"
                                           data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           title="Open link">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{{ route('admin.checkout-sessions.show', $session) }}" 
                                           class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.checkout-sessions.edit', $session) }}" 
                                           class="btn btn-sm btn-warning">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.checkout-sessions.destroy', $session) }}" 
                                              method="POST" 
                                              class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="btn btn-sm btn-danger" 
                                                    onclick="return confirm('Are you sure you want to delete this session?')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $sessions->links() }}
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // Handle copy button clicks
    document.querySelectorAll('.copy-link').forEach(button => {
        button.addEventListener('click', async function() {
            const input = this.previousElementSibling;
            try {
                await navigator.clipboard.writeText(input.value);
                
                // Update tooltip text
                const tooltip = bootstrap.Tooltip.getInstance(this);
                tooltip.setContent({ '.tooltip-inner': 'Copied!' });
                
                // Reset tooltip text after 2 seconds
                setTimeout(() => {
                    tooltip.setContent({ '.tooltip-inner': 'Copy link' });
                }, 2000);
            } catch (err) {
                // Fallback for older browsers
                input.select();
                document.execCommand('copy');
                
                // Update tooltip text
                const tooltip = bootstrap.Tooltip.getInstance(this);
                tooltip.setContent({ '.tooltip-inner': 'Copied!' });
                
                // Reset tooltip text after 2 seconds
                setTimeout(() => {
                    tooltip.setContent({ '.tooltip-inner': 'Copy link' });
                }, 2000);
            }
        });
    });
});
</script>
@endpush
@endsection