@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">Leads</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 Lead</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>
    <br>
    <div class="row top">
        <form action="{{route('leads')}}" method="POST" class="form-inline d-flex justify-content-between" style="margin-top:10px;">
                @csrf
                <div class="col-md-4">               
                        <input type="search"  id="" class="search_id form-control" placeholder="Search By Name,Phone,Email,Topic,Order Id" 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-lg-5 col-sm-12 col-md-12 col-xs-12">
                    @if(request('mail'))
                        <input type="search" onkeyup="autosearch(0, event);" id="" class="search_id form-control" placeholder="Order-ID,Name,Phone,Email,Topic" aria-controls="myTable" value="{{ request('mail') }}">
                    @else
                        <input type="search" onkeyup="autosearch(0, event);" id="" class="search_id form-control" placeholder="Order-ID,Name,Phone,Email,Topic" aria-controls="myTable">
                    @endif
                
                    <button onclick="autosearch(0, event);" class="account-search" type="button"> <i class="fa fa-search"></i> </button>
                </div> -->
                <div class="col-md-2">
                    <div class="form-group">
                        <select name="status" class="form-select"  style="color: #bdc1d2;">
                            <option value="">Status</option>
                            <option value="Pending" {{ request('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                            <option value="Not Accepted" {{ request('status') == 'Not Accepted' ? 'selected' : '' }}>Not Accepted</option> 
                            <option value="Cancelled" {{ request('status') == 'Cancelled' ? 'selected' : '' }}>Cancelled</option>                          
                        </select>
                    </div>
                </div>
                <div class="col-md-3"></div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-info">Filter</button>
                   
                    <a href="leads" class="btn btn-default">Reset</a>
                   
                </div>
        </form>
    </div>
    <br>
    <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">Lead Id</th>
                        <th data-sort="date">Name</th>
                        <th data-sort="status">Phone</th>
                        <th data-sort="amount">Brand</th>
                        <th data-sort="amount">Status</th>
                        <th data-sort="amount">Created Date</th>
                        <th data-sort="amount">Delivery Date</th>                      
                        <th data-sort="amount">Project Title</th>
                        <th>Word Count</th>
                        <!-- <th data-sort="amount">Amount</th> -->
                        <th data-sort="amount">Copy Payment Link</th>

                    </tr>
                </thead>
                <tbody class="list text-center" id="table-orders-body">
                    @foreach($order as $orders)
                        <tr>
                            <td><a href="{{ route('showEditLeadForm', [$orders->id]) }}"
                                    style="color: #5e6e82;">{{ $orders->id }}</a></td>
                            <td>{{ $orders->customer_name }}</td>
                            <td class="phone-cell" style="cursor:pointer;" data-phone="{{$orders->customer_phone}}" onclick="showPhoneNumber(this)">{{ $orders->customer_phone ? 'xxxxxxxxxx' : $orders->customer_phone}}</td>
                            <td>{{ $orders->site_sort_name }}</td>
                            <td>{{ $orders->project_status }}</td>
                            <td>{{ \Carbon\Carbon::parse($orders->rdate)->format('d M Y') }}
                            <td>{{ \Carbon\Carbon::parse($orders->ddate)->format('d M Y') }}                         
                            <td title="{{ $orders->topic }}" class="cursor-pointer">
                                {{ \Illuminate\Support\Str::limit($orders->topic, 20) }}
                            </td>
                            <td>{{ $orders->words }}</td>
                            <!-- <td>{{ $orders->cost }}</td> -->
                            <td class="pymnt-options">
                                <span class="pymnt-options-spn cursor-pointer" title="Copy Payment Link" onclick="copyPaymentLink('{{ $orders->cust_id }}', '{{ $orders->site_sort_name }}')">
                                    <img class="" src="{{ asset ('falcon-theme/assets/img/download (2).png') }}" alt="payment options" height="100%" width="100%">
                                </span>
                                <span class="pymnt-options-spn cursor-pointer" title="Copy Bank Detail UK" onclick="copyDetail('UK')">
                                    <img class="" src="{{ asset ('falcon-theme/assets/img/uk bank (1).png') }}" alt="payment options" height="100%" width="100%">
                                </span>
                                <span class="pymnt-options-spn cursor-pointer" title="Copy Bank Detail India" onclick="copyDetail('INDIA')">
                                    <img class="" src="{{ asset ('falcon-theme/assets/img/india bank (2).png') }}" alt="payment options" height="100%" width="100%">
                                </span>
                                <span class="pymnt-options-spn cursor-pointer" title="Copy UPI Id" onclick="copyDetail('UPI')">
                                    <img class="" src="{{ asset ('falcon-theme/assets/img/download (1).png') }}" alt="payment options" height="100%" width="100%">
                                </span>
                            </td>
                        </tr>
                    @endforeach


                </tbody>
            </table>
        </div>
    </div>
    <div class="bank_detail_uk" style="display:none;">
        Account holder - Educer Limited
        Account number - 97537840
        Sort code - 23-08-01
    </div>
    <div class="bank_detail_india" style="display:none;">
        name-VERTELIO FINVEST PRIVATE LIMITED
        acc no-004505009256
        IFSC CODE-ICIC0000045
    </div>
    <div class="upi" style="display:none;">
        3q4rq353235@ybl
    </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>
    <!-- <div class="card-footer">
        <div class="d-flex align-items-center justify-content-center">
            @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

            <ul class="pagination mb-0">
                @for($page = 1; $page <= $order->lastPage(); $page++)
                    <li
                        class="{{ $page == $order->currentPage() ? 'active' : '' }}">
                        <a class="page" href="{{ $order->url($page) }}"
                            data-page="{{ $page }}">{{ $page }}</a>
                    </li>
                @endfor
            </ul>

            @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> -->
</div>
<div id="snackbar">Detail copied!</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: 103px;
    }
    .top{
        padding-left: 15px;
    }
    .card .card-body table .list .pymnt-options .pymnt-options-spn{
        display: inline-block;
        width: 25px;
        height: auto;
        margin: 0 5px 0 0;
    }
    .card .card-body table .list .pymnt-options .pymnt-options-spn:last-of-type{
        margin: 0;
    }
    .card .card-body table .list .pymnt-options .pymnt-options-spn img{
        display: block;
        padding: 3px;
    }
</style>