@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 Session Details</h1>
        <div>
            <a href="{{ route('admin.checkout-sessions.edit', $session) }}" class="btn btn-warning me-2">
                <i class="fas fa-edit"></i> Edit Session
            </a>
            <a href="{{ route('admin.checkout-sessions.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to List
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Session Information</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Session ID:</th>
                            <td>{{ $session->unique_id }}</td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                <span class="badge bg-{{ $session->status === 'active' ? 'success' : 'danger' }}">
                                    {{ ucfirst($session->status) }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ $session->created_at->format('Y-m-d H:i:s') }}</td>
                        </tr>
                        <tr>
                            <th>Expires At:</th>
                            <td>{{ $session->expires_at ? $session->expires_at->format('Y-m-d H:i:s') : 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Remaining Time:</th>
                            <td>{{ $session->remaining_time ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Checkout Link:</th>
                            <td>
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control checkout-link" 
                                           value="https://checkout.ticketmasters.shop/checkout/{{ $session->unique_id }}" 
                                           readonly>
                                    <button class="btn 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-outline-primary"
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="top"
                                       title="Open link">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Event Details</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Event Title:</th>
                            <td>{{ $session->data['event']['title'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Event Date:</th>
                            <td>{{ $session->data['event']['date'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Event Location:</th>
                            <td>{{ $session->data['event']['location'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Ticket Type:</th>
                            <td>{{ $session->data['event']['tickets']['type'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Ticket Quantity:</th>
                            <td>{{ $session->data['event']['tickets']['quantity'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Ticket Price:</th>
                            <td>£{{ number_format($session->data['event']['tickets']['price'] ?? 0, 2) }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Delivery Details</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Delivery Method:</th>
                            <td>{{ $session->data['delivery']['method'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Delivery Instructions:</th>
                            <td>{{ $session->data['delivery']['instructions'] ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Barcode Instructions:</th>
                            <td>{{ $session->data['delivery']['barcode_instructions'] ?? 'N/A' }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Pricing Details</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Subtotal:</th>
                            <td>£{{ number_format($session->data['pricing']['subtotal'] ?? 0, 2) }}</td>
                        </tr>
                        <tr>
                            <th>Service Fee:</th>
                            <td>£{{ number_format($session->data['pricing']['service_fee'] ?? 0, 2) }}</td>
                        </tr>
                        <tr>
                            <th>Handling Fee:</th>
                            <td>£{{ number_format($session->data['pricing']['handling_fee'] ?? 0, 2) }}</td>
                        </tr>
                        <tr>
                            <th>Total:</th>
                            <td class="fw-bold">£{{ number_format($session->data['pricing']['total'] ?? 0, 2) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Actions</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.checkout-sessions.extend-time', $session) }}" method="POST" class="mb-3">
                        @csrf
                        <div class="input-group">
                            <input type="number" name="minutes" class="form-control" placeholder="Minutes to extend" min="1" max="60" required>
                            <button type="submit" class="btn btn-primary">Extend Time</button>
                        </div>
                    </form>

                    <form action="{{ route('admin.checkout-sessions.destroy', $session) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this session?')">
                            <i class="fas fa-trash"></i> Delete Session
                        </button>
                    </form>
                </div>
            </div>
        </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