@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-2 col-sm-auto d-flex align-items-center pe-0">
                <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">My Data</h5>
            </div>
            <!-- <div class="col-10 col-sm-auto ms-auto text-end ps-0">
                <div id="orders-actions" class="col-2">
                    <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>   
                </div>
                <div class="col-9 mt-2">
                    <form action="{{ route('import.users') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="file" name="file"  accept=".xls,.xlsx" required>
                        <button type="submit">Import</button>
                    </form>
                </div>
               
            </div> -->
        </div>
    </div>
    <!-- @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif   -->
    <div class="row top">
              <form action="{{route('customer')}}" method="POST" class="form-inline d-flex flex-wrap justify-content-between gap-2" style="margin-top:10px;">
                  <div class="col-12 d-flex gap-2">
                    @csrf
                    <div class="col-md-3">               
                            <input type="search"  id="" class="search_id form-control" placeholder="Search By Name,Phone,Email" 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-1">
                        <div class="form-group">
                            <select name="lead_source" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                                <option value="">Source</option>
                                <option value="Chilly" {{ request('lead_source') == 'Chilly' ? 'selected' : '' }}>Chilly</option>                 
                                <option value="Facebook" {{ request('lead_source') == 'Facebook' ? 'selected' : '' }}>Facebook</option>                           
                                <option value="Instagram" {{ request('lead_source') == 'Instagram' ? 'selected' : '' }}>Instagram</option>
                                <option value="Telegram" {{ request('lead_source') == 'Telegram' ? 'selected' : '' }}>Telegram</option>
                                <option value="Friends Reference" {{ request('lead_source') == 'Friends Reference' ? 'selected' : '' }}>Friends Reference</option>                            
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                        <select class="form-select" id="country" name="country" onchange="getcountrycode();">
                            <option value="">Country</option>
                            @foreach($countries as $country)
                                @php
                                    $optionValue = $country->name . '@#$?' . $country->code;
                                @endphp
                                <option value="{{ $optionValue }}" {{ request('country') == $optionValue ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                            @endforeach
                        </select>

                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <select name="website" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                                <option value="">Brand</option>
                                <option value="AD" {{ request('website') == 'AD' ? 'selected' : '' }}>AD</option>
                                <option value="GAH" {{ request('website') == 'GAH' ? 'selected' : '' }}>GAH</option>
                                <option value="IAH" {{ request('website') == 'IAH' ? 'selected' : '' }}>IAH</option>
                                <option value="GAH_AU" {{ request('website') == 'GAH_AU' ? 'selected' : '' }}>GAH_AU</option>
                                <option value="AP" {{ request('website') == 'AP' ? 'selected' : '' }}>AP</option>
                                <option value="IAH_AU" {{ request('website') == 'IAH_AU' ? 'selected' : '' }}>IAH_AU</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <select name="status" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                                <option value="">Stage</option>
                                <option value="Pending" {{ request('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                                <option value="Converted" {{ request('status') == 'Converted' ? 'selected' : '' }}>Converted</option>
                                <option value="Interested" {{ request('status') == 'Interested' ? 'selected' : '' }}>Interested</option>
                                <option value="Not Interested" {{ request('status') == 'Not Interested' ? 'selected' : '' }}>Not Interested</option>
                                <option value="May Be Later" {{ request('status') == 'May Be Later' ? 'selected' : '' }}>May Be Later</option>
                                <option value="Budget Issue" {{ request('status') == 'Budget Issue' ? 'selected' : '' }}>Budget Issue</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <select name="followup_status" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                                <option value="">Status</option>
                                <option value="">Select</option>
                                <option value="No Response" {{ request('followup_status') == 'No Response' ? 'selected' : '' }}>No Response</option>
                                <option value="Pitched" {{ request('followup_status') == 'Pitched' ? 'selected' : '' }}>Pitched</option>
                                <option value="Voice Note" {{ request('followup_status') == 'Voice Note' ? 'selected' : '' }}>Voice Note</option>
                                <option value="Call Cut" {{ request('followup_status') == 'Call Cut' ? 'selected' : '' }}>Call Cut</option>
                                <option value="Other" {{ request('followup_status') == 'Other' ? 'selected' : '' }}>Other</option>  
                                <option value="Not Followed" {{ request('followup_status') == 'Not Followed' ? 'selected' : '' }}>Not Followed</option>                           
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="text" placeholder="Created date" class="form-control dateRange"  value="{{ old('dateRange', request('dateRange')) }}" name="dateRange"  style='padding: 6px 0px 6px 6px;'>
                        </div>
                    </div>
                  
                </div>
                <div class="col-12 d-flex gap-2">
                <div class="col-md-2">
                        <div class="form-group">
                          <select name="assignee" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                                <option value="">Assignee</option>
                                <option value="1667">Neha Manohar</option>
                                <option value="1697">Saviya</option>
                                <option value="1668">Tamanna</option>
                                <option value="1691">Janak</option>
                                <option value="1699">Kavya</option> option&gt;                          
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-info">Filter</button>
                       
                        <a href="customer" class="btn btn-default">Reset</a>
                        <a href="javascript:;" onclick="exportSelectedToCSV()" style="display:none;" class="export_csv btn btn-default">Export To CSV</a>
                         <a href="javascript:;" onclick="deleteSelected()" style="display:none;" class="delete_btn btn btn-default">Deleted Selected</a>
                         <a href="javascript:;" onclick="changeAssignee()" style="display:none;" class="assignee_btn btn btn-default">Change Assignee</a>
                    </div>
                </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">
                <thead class="bg-200 text-900">
                    <tr>
                        <th><input type="checkbox" value="" onclick="checkAll(this);"></th>
                        <th data-sort="order">S. No.</th>
                        <th data-sort="date">Name</th>
                        <th data-sort="date">Country</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">Status</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;
                            if(optional($value->latestCallTracker)->followup_status != ''){
                                $color = "blanchedalmond";
                            }
                            else{
                                $color = "";
                            }
                        @endphp
                       
                        <tr class="btn-reveal-trigger" style="background-color:{{ $color ?? '' }}">
                            <td><input type="checkbox" value="{{$value->id}}" class="checkedid"></td>
                            <td><a href="{{ route('showEditCustomerForm', [$value->id]) }}" target="_blank"
                                    style="color: #5e6e82;">{{ $id }}</a></td>
                            <td>{{ $value->name }}</td>
                            <td>{{ $value->country }}</td>
                            <td class="email-cell" style="cursor:pointer;" data-phone="{{$value->email}}" onclick="showEmail(this)">{{ $value->email ? 'xxxxxxxxxx' : $value->email}}</td>
                            <td>{{ \Carbon\Carbon::parse($value->created_at)->format('d M Y') }}</td>
                            <td><span class="phone-cell" style="cursor:pointer;" data-phone="{{$value->phone}}" onclick="showPhoneNumber(this)">{{ $value->phone ? 'xxxxxxxxxx' : $value->phone}}</span>  <i class="far fa-copy" style="cursor:pointer" onclick="copyNumber(event, this)"></i></td>
                            <td>{{ $value->web_sort_name }}</td>
                            <td>{{ $value->stage }}</td>
                            <td>{{ optional($value->latestCallTracker)->followup_status }}
                            </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)->next_followup_time ? \Carbon\Carbon::parse(optional($value->latestCallTracker)->next_followup_time)->format('d M Y') : '' }}</td>



                        </tr>
                    @endforeach


                </tbody>
            </table>
        </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>
<div id="snackbar">Number copied!</div>
<!-- Modal -->
<div id="assigneeModal" style="display:none; position:fixed; top:20%; left:35%; background:#fff; padding:20px; border:1px solid #ccc; z-index:1000;">
    <h4>Select New Assignee</h4>
   <select name="assignee" class="assigneeSelect form-select form-group">
        <option value="">Assignee</option>
        <option value="1667">Neha Manohar</option>
        <option value="1697">Saviya</option>
        <option value="1668">Tamanna</option>
        <option value="1691">Janak</option>
        <option value="1699">Kavya</option>                   
    </select>
    <input type="hidden" id="assigneeRowId">
    <br><br>
    <button onclick="confirmAssignee()">Confirm</button>
    <button onclick="$('#assigneeModal').hide()">Cancel</button>
</div>

@endsection
<script>  

 function snackBar() {
        const snackbar = document.getElementById("snackbar");
        snackbar.className = "show";
        setTimeout(() => { snackbar.className = snackbar.className.replace("show", ""); }, 3000);
    }
    
    function Addlead() {
        window.location.href = "{{ route('showCustomerForm') }}";
    }
    function showPhoneNumber(element) {
       // Get all .phone-cell elements
        const phoneCells = document.querySelectorAll(".phone-cell");

        // Reset all other phone numbers to 'xxxxxxxxxx'
        phoneCells.forEach(cell => {
            if (cell !== element) {
                cell.innerHTML = "xxxxxxxxxx"; // reset and remove any icons
            }
        });

        // Show the actual number in the clicked element
        const actualPhone = element.getAttribute("data-phone");
        element.innerHTML = 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;
    }
    function copyNumber(event, iconElement) {
        event.stopPropagation();

        const phoneSpan = iconElement.previousElementSibling; // The <span class="phone-cell">
        const phoneNumber = phoneSpan?.getAttribute('data-phone');

        if (phoneNumber) {
            navigator.clipboard.writeText(phoneNumber)
                .then(() => {
                    snackBar();
                })
                .catch(err => {
                    console.error("Copy failed", err);
                });
        }
    }
    function deleteSelected(){
         var selectedIds = $('.checkedid:checked').map(function() {
            return $(this).val();
        }).get();
         if (selectedIds.length === 0) {
            alert('Please select at least one record to delete.');
            return;
        }

        if (!confirm('Are you sure you want to delete selected records?')) {
            return;
        }
         $.ajax({
            url: '{{ route("bulkDelete") }}',
            type: 'POST',
            data: {
                ids: selectedIds,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                alert(response.message);
                location.reload();
            },
            error: function(xhr) {
                alert('Something went wrong.');
            }
        });
    }
   function changeAssignee() {
        //$('#assigneeRowId').val(rowId); // Store the record ID
        $('#assigneeModal').show(); // Show modal
     
    }
    function confirmAssignee() {
              var newAssigneeId = $('.assigneeSelect').val();
         var selectedIds = $('.checkedid:checked').map(function() {
            return $(this).val();
        }).get();
        $.ajax({
            url: '{{ route("changeAssignee") }}',
            method: 'POST',
            data: {
                ids: selectedIds,
                assignee_id: newAssigneeId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                alert(response.message);
                $('#assigneeModal').hide();
                location.reload(); // or update table dynamically
            },
            error: function() {
                alert('Failed to update assignee.');
            }
        });
    }


    function exportSelectedToCSV() {
        let rows = [];
        rows.push(["Name", "Phone"]); // CSV headers

        document.querySelectorAll("tr.btn-reveal-trigger").forEach(row => {
            let checkbox = row.querySelector("input.checkedid");
            if (checkbox && checkbox.checked) {
                let name = row.children[2].innerText.trim();
                let phoneSpan = row.querySelector(".phone-cell");
                let phone = phoneSpan ? phoneSpan.getAttribute('data-phone') : '';
                rows.push([name, phone]);
            }
        });

        // Convert to CSV string
        let csvContent = "data:text/csv;charset=utf-8," 
            + rows.map(e => e.join(",")).join("\n");

        // Trigger download
        let encodedUri = encodeURI(csvContent);
        let link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "selected_contacts.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    function checkAll(source) {
        const checkboxes = document.querySelectorAll('.checkedid');      
        checkboxes.forEach(cb => {
            cb.checked = source.checked;
        });

        toggleExportButton(); // Show/hide Export button
    }

    // Handles showing/hiding the Export button
    function toggleExportButton() {
        const anyChecked = Array.from(document.querySelectorAll('.checkedid')).some(cb => cb.checked);
        const exportBtn = document.querySelector('.export_csv');
        const deletetBtn = document.querySelector('.delete_btn');
        const assigneetBtn = document.querySelector('.assignee_btn');
        exportBtn.style.display = anyChecked ? 'inline-block' : 'none';
        deletetBtn.style.display = anyChecked ? 'inline-block' : 'none';
        assigneetBtn.style.display = anyChecked ? 'inline-block' : 'none';
    }

    // Also update the button if individual checkboxes are clicked
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.checkedid').forEach(cb => {
            cb.addEventListener('change', toggleExportButton);
        });
    });
</script>


</script>
<style>
     .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: 155px;
    }
    .top{
        padding-left: 15px;
    }
    #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; }
    }
</style>