@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">Upcoming Project</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="Addlead()" 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 Customer</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="card-body p-0">
        <div class="table-responsive scrollbar">
            <table class="table table-sm table-striped fs--1 mb-0 overflow-hidden">
                <thead class="bg-200 text-900">
                    <tr>
                        <th data-sort="order">S. No.</th>
                        <th data-sort="date">Name</th>
                        <th data-sort="date">email</th>
                        <th data-sort="address">Cr. Date</th>
                        <th data-sort="status">Phone</th>
                        <th data-sort="amount">Brand</th>
                        <th data-sort="amount">Stage</th>
                        <!-- <th data-sort="amount">Assignee</th> -->
                        <th data-sort="amount">Last Followup</th>
                        <th data-sort="amount">Next Followup</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="list" id="table-orders-body">
                    @foreach($getrecord as $value)
                        @php
                            $id = $value->source == 'Chilly' ? 'C-' . $value->id : 'B-' . $value->id;
                        @endphp
                        <tr class="btn-reveal-trigger">
                            <td><a href="{{ route('showEditCustomerForm', [$value->id]) }}"
                            style="color: #5e6e82;">{{ $id }}</a></td>
                            <td>{{ $value->name }}</td>
                            <td class="email-cell" style="cursor:pointer;" data-phone="{{$value->email}}" onclick="showEmail(this)">{{ $value->phone ? 'xxxxxxxxxx' : $value->email}}</td>
                            <td>{{ \Carbon\Carbon::parse($value->created_at)->format('d M Y') }}</td>
                            <td class="phone-cell" style="cursor:pointer;" data-phone="{{$value->phone}}" onclick="showPhoneNumber(this)">{{ $value->phone ? 'xxxxxxxxxx' : $value->phone}}</td>
                            <td>{{ $value->web_sort_name }}</td>
                            <td>{{ $value->stage }}</td>
                            <!-- <td>{{ $value->assignee }}</td> -->
                            <td>{{ optional($value->latestCallTracker)->follow_up_time ? \Carbon\Carbon::parse($value->latestCallTracker->follow_up_time)->format('d M Y') : 'Not Followed' }}
                            </td>
                            <td>{{ optional($value->latestCallTracker)->follow_up_time ? \Carbon\Carbon::parse($value->latestCallTracker->next_followup_time)->format('d M Y') : 'Not Followed' }}
                            </td>


                        </tr>
                    @endforeach


                </tbody>
            </table>
        </div>
    </div>
    <!-- <div class="card-footer">
        <div class="d-flex align-items-center justify-content-center">
            @if($getrecord->onFirstPage())
                <button class="btn btn-sm btn-falcon-default me-1" disabled>
                    <span class="fas fa-chevron-left"></span>
                </button>
            @else
                <a href="{{ $getrecord->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 <= $getrecord->lastPage(); $page++)
                    <li
                        class="{{ $page == $getrecord->currentPage() ? 'active' : '' }}">
                        <a class="page" href="{{ $getrecord->url($page) }}"
                            data-page="{{ $page }}">{{ $page }}</a>
                    </li>
                @endfor
            </ul>

            @if($getrecord->hasMorePages())
                <a href="{{ $getrecord->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> -->
    @php
        $current = $getrecord->currentPage();
        $last = $getrecord->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 ($getrecord->onFirstPage())
                <button class="btn btn-sm btn-falcon-default me-1" disabled>
                    <span class="fas fa-chevron-left"></span>
                </button>
            @else
                <a href="{{ $getrecord->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="{{ $getrecord->url($page) }}">{{ $page }}</a>
                    </li>
                @endfor
            </ul>

            {{-- Next button --}}
            @if ($getrecord->hasMorePages())
                <a href="{{ $getrecord->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>
@endsection
<script>
    function Addlead() {
        window.location.href = "{{ route('showCustomerForm') }}";
    }
    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 showEmail(element) {
        // Get all phone cells except the first one
        let emailCells = document.querySelectorAll(".email-cell:not(:first-child)");

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

        // Show the actual number for the clicked row
        let actualPhone = element.getAttribute("data-phone");
        element.innerText = actualPhone;
    }
</script>