@extends('Users.app')
@section('content')
<div class="card mb-3" id="ordersTable" data-list="">
    <div class="card-header">
        <div class="row flex-between-center">
            <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Feedback</h5>
            </div>
            <div class="col-8 col-sm-auto ms-auto text-end ps-0">
                <div id="orders-actions">
                    <!-- <button class="btn btn-falcon-default btn-sm" onclick="Addorder()" type="button"><span
                            class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span
                            class="d-none d-sm-inline-block ms-1">Create Order</span></button> -->
                    <!-- <button class="btn btn-falcon-default btn-sm mx-2" type="button"><span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">Filter</span></button>
                    <button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">Export</span></button> -->
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="row top">
              <form action="{{route('orders')}}" method="POST" class="form-inline d-flex justify-content-between" style="margin-top:10px;">
                @csrf
                <div class="col-md-4">               
                        <input type="search"  id="" value="{{ old('term', request('term')) }}" class="search_id form-control" placeholder="Search By Name,Phone,Email,Order Code,Topic,Sort Name" aria-controls="myTable" name="term" value="{{ old('term', request('term')) }}">            
                    <button class="account-search" type="button"> <i class="fa fa-search"></i> </button>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <select name="status" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                            <option value="">Select Internal Status</option>
                            <option value="TBA" {{ request('status') == 'TBA' ? 'selected' : '' }}>TBA</option>
                            <option value="Not Accepted" {{ request('status') == 'Not Accepted' ? 'selected' : '' }}>Not Accepted</option>
                            <option value="Cancelled" {{ request('status') == 'Cancelled' ? 'selected' : '' }}>Cancelled</option>                           
                            <option value="In Process" {{ request('status') == 'In Process' ? 'selected' : '' }}>In Process</option>
                            <option value="Ready" {{ request('status') == 'Ready' ? 'selected' : '' }}>Ready</option>
                            <option value="Checked" {{ request('status') == 'Checked' ? 'selected' : '' }}>Qua. Approved</option>
                            <option value="Quality Rejected" {{ request('status') == 'Quality Rejected' ? 'selected' : '' }}>Qua. Rejected</option>
                            <option value="Delivered Draft" {{ request('status') == 'Delivered Draft' ? 'selected' : '' }}>Delivered Draft</option>
                            <option value="Delivered" {{ request('status') == 'Delivered' ? 'selected' : '' }}>Delivered</option>
                            <option value="Feedback" {{ request('status') == 'Feedback' ? 'selected' : '' }}>Feedback</option>
                            <option value="Feedback Ready" {{ request('status') == 'Feedback Ready' ? 'selected' : '' }}>Feedback Ready</option>
                            <option value="Payment Refund" {{ request('status') == 'Payment Refund' ? 'selected' : '' }}>Payment Refund</option>
                           
                        </select>
                    </div>
                </div>

                <div class="col-md-2">
                   
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-info">Filter</button>
                   
                    <a href="orders" class="btn btn-default">Reset</a>
                   
                </div>
            </form>
        </div> -->
    <div class="card-body p-0">
        <div class="table-responsive scrollbar">
            <table class="table table-sm table-striped fs--1 mb-0 overflow-hidden text-center">
                <thead class="bg-200 text-900">
                    <tr>
                        <th data-sort="order">S.No.</th>
                        <th data-sort="order">Order Code</th>
                        <th data-sort="order">Message</th>
                        <th data-sort="order">Receive On</th>
                        <th data-sort="order">Delivery Date</th>
                    </tr>
                </thead>
                <tbody class="list text-center" id="table-orders-body">
                    @foreach($feedbacks as $orders)
                        <tr>
                            <td>{{ $loop->iteration }}</td>  
                            <td><a href="{{ route('showFeedbackForm', [$orders->order_id]) }}"
                                    style="color: #5e6e82;">{{ $orders->order_code }}</a></td> 
                            <td>
                                <i 
                                    class="fas fa-sign-in-alt" 
                                    style="font-size:15px; color: {{ $orders->user_id == 0 ? 'green' : 'red' }};">
                                </i>
                                {{ \Illuminate\Support\Str::limit($orders->message, 100) }}
                            </td>
                            <td>{{ \Carbon\Carbon::parse($orders->send_date_time)->format('d M Y') }}
                            <td>{{ \Carbon\Carbon::parse($orders->ddate)->format('d M Y') }}                                           
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @php
        $current = $order->currentPage();
        $last = $order->lastPage();

        // Determine the sliding window
        $start = max(1, $current - 2);
        $end = min($last, $start + 4);

        // Adjust start if we're at the end
        if ($end - $start < 4) {
            $start = max(1, $end - 4);
        }
    @endphp

    <div class="card-footer">
        <div class="d-flex align-items-center justify-content-center">
            {{-- Previous button --}}
            @if ($order->onFirstPage())
                <button class="btn btn-sm btn-falcon-default me-1" disabled>
                    <span class="fas fa-chevron-left"></span>
                </button>
            @else
                <a href="{{ $order->previousPageUrl() }}" class="btn btn-sm btn-falcon-default me-1">
                    <span class="fas fa-chevron-left"></span>
                </a>
            @endif

            {{-- Pagination numbers --}}
            <ul class="pagination mb-0">
                @for ($page = $start; $page <= $end; $page++)
                    <li class="page-item {{ $page == $current ? 'active' : '' }}">
                        <a class="page" href="{{ $order->url($page) }}">{{ $page }}</a>
                    </li>
                @endfor
            </ul>

            {{-- Next button --}}
            @if ($order->hasMorePages())
                <a href="{{ $order->nextPageUrl() }}" class="btn btn-sm btn-falcon-default me-1">
                    <span class="fas fa-chevron-right"></span>
                </a>
            @else
                <button class="btn btn-sm btn-falcon-default me-1" disabled>
                    <span class="fas fa-chevron-right"></span>
                </button>
            @endif
        </div>
    </div>
@endsection
<script>
    function Addorder() {
        window.location.href = "{{ route('showLeadForm') }}";
    }

    function copyPaymentLink(id, webName) {
        const websiteUrl = {
            GAH: "https://www.globalassignmenthelp.com/",
            IAH: "https://www.instantassignmenthelp.com/",
            IAH_AU: "https://www.instantassignmenthelp.com.au/",
            GAH_AU: "https://au1.globalassignmenthelp.com.au/",
            AP: "https://www.assignmentprime.com/",
            AD: "https://www.assignmentdesk.co.uk/"
        };

        const key = btoa(btoa(`${webName}?$&@${id}`));
        const url = `${websiteUrl[webName]}whatsaap.php?id=${key}`;
        navigator.clipboard.writeText(url).then(() => {
            snackBar("Payment link copied!");
        }).catch(err => {
            console.error("Failed to copy: ", err);
        });
    }
    function snackBar() {
        const snackbar = document.getElementById("snackbar");
        snackbar.className = "show";
        setTimeout(() => { snackbar.className = snackbar.className.replace("show", ""); }, 3000);
    }

    function showPhoneNumber(element) {
        // Get all phone cells except the first one
        let phoneCells = document.querySelectorAll(".phone-cell:not(:first-child)");

        // Reset all other phone numbers to 'xxxxxxx'
        phoneCells.forEach(cell => {
            cell.innerText = "xxxxxxxxxx";
        });

        // Show the actual number for the clicked row
        let actualPhone = element.getAttribute("data-phone");
        element.innerText = actualPhone;
    }
    function copyDetail(name){
        if(name == 'UK'){
        var text = $('.bank_detail_uk').text();       
        }else if(name == 'INDIA'){
        var text = $('.bank_detail_india').text();    
        }else if(name == 'UPI'){
        var text = $('.upi').text();  
        }
        navigator.clipboard.writeText(text).then(() => {
            snackBar("Detail copied!");
        }).catch(err => {
            console.error("Failed to copy: ", err);
        });
    }
</script>
<style>
    #snackbar {
        visibility: hidden;
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
    }

    #snackbar.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @keyframes fadein {
        from { bottom: 0; opacity: 0; }
        to { bottom: 30px; opacity: 1; }
    }

    @keyframes fadeout {
        from { bottom: 30px; opacity: 1; }
        to { bottom: 0; opacity: 0; }
    }
    .top .form-control {
        padding: 6px 12px 6px 40px;
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .055), 0 0 8px rgba(232, 232, 232, .5);
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .055), 0 0 8px rgba(232, 232, 232, .5);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .055), 0 0 8px rgba(232, 232, 232, .5);
        width: 100%;
        height: 34px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        display: block;
        /* color: #ccc; */
    }
    .account-search {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: medium none;
        color: #647182;
        font-size: 14px;
        position: absolute;
        left: 27px;
        top: 64px;
    }
    .top{
        padding-left: 15px;
    }
</style>