@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">Import Gradding 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="" method="" 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-1">
                        <div class="form-group">
                            <select name="service" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                                <option value="">Services</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>                           
                            </selec t>
                        </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 class="col-md-2">
                        <button type="button" class="btn btn-info" onclick="getData();">Filter</button>
                       
                        <a href="customer" class="btn btn-default">Reset</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 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><a href="{{ route('showEditCustomerForm', [$value->id]) }}"
                                    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 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>{{ 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)->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>
@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;
    }
    function getData(){

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