@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="d-flex flex-column justify-content-center" style="height: 100px;">
            <h2>Track Your Parcel<sub>&nbsp;&nbsp;&nbsp;By Waypointexpress.co</sub></h2>
            </div>
            <textarea id="trackingNumbers" rows="4" class="form-control mb-3" placeholder="Enter tracking numbers separated by commas/spaces/enter">{{ $numbers }}</textarea>
            <button id="submitTracking" class="btn btn-primary">Track Parcels</button>
            <button id="copyLinkButton" class="btn btn-light ml-2" style="display:none;"><i class="fas fa-link"></i> Copy Link</button>
            
            <table class="table table-bordered mt-4">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Tracking Number</th>
                        <th>Marking Code</th>
                        <th>Status</th>
                        <th>Last Updated At</th>
                        <th>Remark</th>
                    </tr>
                </thead>
                <tbody id="resultsBody">
                    <!-- Results will be injected here via AJAX -->
                </tbody>
            </table>
        </div>
    </div>
</div>


<script>
$(document).ready(function() {
    if ($('#trackingNumbers').val()) {
        $('#submitTracking').trigger('click');
    }

    $('#submitTracking').click(function() {
        let trackingNumbersArray = $('#trackingNumbers').val().trim().split(/[\s,;]+/);
        let trackingNumbers = trackingNumbersArray.join(',');

        $.ajax({
            url: "{{ route('tracking.search') }}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { tracking_numbers: trackingNumbers },
            success: function(data) {
                let html = '';
                data.forEach(parcel => {
                    html += `<tr>
                                <td>${parcel.date}</td>
                                <td>${parcel.tracking_no}</td>
                                <td>${parcel.marking_code}</td>
                                <td>${parcel.status}</td>
                                <td>${parcel.updated_at}</td>
                                <td>${parcel.description}</td>
                             </tr>`;
                });
                $('#resultsBody').html(html);
                
                // Update the URL to make it shareable
                window.history.pushState({}, '', '/tracking?numbers=' + encodeURIComponent(trackingNumbers));
                if (trackingNumbersArray.length > 0 && trackingNumbersArray[0] !== "") {
                    $('#copyLinkButton').show();  // Show the copy link button
                } else {
                    $('#copyLinkButton').hide();  // Hide the copy link button
                }


            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("AJAX error: ", textStatus, errorThrown);
            }
        });
    });

    if ($('#trackingNumbers').val().trim() !== "") {
        $('#submitTracking').trigger('click');
    }

    $('#copyLinkButton').click(function() {
    const el = document.createElement('textarea');  // Create a <textarea> element
    el.value = window.location.href;  // Set its value to the current URL
    document.body.appendChild(el);  // Add it to the DOM
    el.select();  // Select the URL
    document.execCommand('copy');  // Copy it to the clipboard
    document.body.removeChild(el);  // Remove the <textarea> element
    alert('Link copied to clipboard!');  // Inform the user
    
});

});
</script>
@endsection