@extends('admin.layout.header')
@section('content')

<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">Contact</p>
                        
                        <div class="container mt-5">
                            <div class="row">
                                <div class="col-3">
                                    <label for="customToken">Enter Custom Token:</label>
                                    <input type="text" id="customToken" class="form-control" placeholder="Enter your token (e.g., aswin)">
                                </div>
                                <div class="col-3">
                                    <label for="expirationTime" >Set Expiration Time:</label>
                                    <div class="input-group">
                                        <input type="number" id="expirationTime" class="form-control" placeholder="Enter time (e.g., 10)" min="1">
                                
                                    </div>
                                </div>
                                <div class="col-3">
                                    <label for="expirationTime" >Set Expiration Time:</label>
                                    <div class="input-group">
                                        <select id="timeUnit" class="form-select form-control">
                                            <option value="minutes">Minutes</option>
                                            <option value="hours">Hours</option>
                                            <option value="days">Days</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <button id="generateLinkBtn" class="btn btn-primary" style="margin-top: 30px;">Generate Link</button>
                                </div>
                            </div>
                        


                        <div class="mt-3">
                            <label>Generated Link:</label>
                            <div class="input-group">
                                <input type="text" id="generatedLink" class="form-control" readonly>
                                <button id="copyLinkBtn" class="btn btn-secondary" onclick="copyLink()">Copy</button>
                            </div>
                        </div>
                    </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->


    <script>
    document.getElementById('generateLinkBtn').addEventListener('click', function() {
    let token = document.getElementById('customToken').value.trim();
    let expirationValue = document.getElementById('expirationTime').value.trim();
    let timeUnit = document.getElementById('timeUnit').value;

    if (!token) {
        alert("Please enter a custom token!");
        return;
    }

    if (!expirationValue || expirationValue <= 0) {
        alert("Please enter a valid expiration time!");
        return;
    }

    fetch("{{ route('generate.link') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ token: token, expires_in: expirationValue, time_unit: timeUnit })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            document.getElementById('generatedLink').value = data.link;
        }
    })
    .catch(error => console.error('Error:', error));
});

function copyLink() {
    let linkInput = document.getElementById('generatedLink');
    linkInput.select();
    linkInput.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand("copy");
    alert("Link copied to clipboard!");
}
</script>

@endsection