@extends('backend.layouts.app')
@section('metades')
    <meta name="description" content="Meilleur Holidays: Travel Company in Kolkata" />
    <meta name="author" content="Meilleur Holidays: Travel Company in Kolkata" />
    <meta name="keywords" content="Meilleur Holidays: Travel Company in Kolkata" />
@endsection
@section('title')
    <title>Meilleur Holidays: Travel Company in Kolkata</title>
@endsection
@section('css')
    <style>
    </style>
@endsection
@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Datatables</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
                                <li class="breadcrumb-item active">Datatables</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="d-flex align-items-center">
                                <h5 class="card-title mb-0 flex-grow-1">Lead List</h5>
                                <div class="flex-shrink-0">
                                    <a class="btn btn-danger add-btn" href="{{ url('/admin/lead/create') }}"><i class="ri-add-line align-bottom me-1"></i> Create Task</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body border border-dashed border-end-0 border-start-0">
                            <form>
                                <div class="row g-3">
                                    <div class="col-xxl-4 col-sm-12">
                                        <div class="search-box">
                                            <input type="text" id="searchedWord" class="form-control search bg-light border-light" placeholder="Search by ID, Email and Contact Number...">
                                            <i class="ri-search-line search-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-xxl-2 col-sm-4">
                                        <input type="date" class="form-control" id="toDate">
                                        
                                          <span class="badge bg-soft-danger text-danger mb-0 me-1"> <i class="ri-arrow-up-line align-middle"></i>Search By Lead Created From</span>
                                    </div>
                                    <div class="col-xxl-2 col-sm-4">
                                        <input type="date" class="form-control" id="fromDate">
                                         <span class="badge bg-soft-danger text-danger mb-0 me-1"> <i class="ri-arrow-up-line align-middle"></i>Search By Lead Created To</span>
                                    </div>
                   
                                    <div class="col-xl-3 col-sm-4">
                                        <div class="input-light">
                                            <select class="form-control" id="selectStatus" data-choices data-choices-search-false name="choices-single-default">
                                                <option value="" selected>Status</option>
                                                <option value="Open">Open</option>
                                                <option value="Close">Close</option>
                                                <option value="Follow Up">Follow Up</option>
                                                <option value="Converted">Converted</option>
                                                <option value="Rejected">Rejected</option>
                                                <option value="Canciled">Canciled</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xxl-1 col-sm-4">
                                        <button type="button" class="btn btn-primary w-100" onclick="SearchData();">
                                            Filters
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-body">
                            <div style="overflow: auto;">
                                <table id="scroll-horizontal" class="table nowrap align-middle" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>SR No.</th>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Journey Date</th>
                                            <th>Email Id</th>
                                            <th>Contact No.</th>
                                            <th>Lead Source</th>
                                            <th>Lead Type</th>
                                            <th>Date of Entry</th>
                                            <th>Entered By</th>
                                            <th>Status</th>
                                            <th>History</th>
                                            <th>Rank</th>
                                            <th>Assign To</th>
                                            <th>URL</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="show-result">
                                        {{-- @foreach ($data as $item)
                                            <tr>
                                                <td>01</td>
                                                <td>{{ $item['id'] }}</td>
                                                <td>{{ $item['customerName'] }}</td>
                                                <td>{{ $item['jurneyDate'] }}</td>
                                                <td>{{ $item['email'] }}</td>
                                                <td>{{ $item['contactNumber'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>{{ $item['leadSource'] }}</td>
                                                <td>
                                                    <div class="dropdown d-inline-block">
                                                        <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="ri-more-fill align-middle"></i>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a href="#!" class="dropdown-item"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>
                                                           <!-- <li><a class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>-->
                                                            <li>
                                                                <a class="dropdown-item remove-item-btn">
                                                                    <i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function SearchData() {
            var toDate = document.getElementById('toDate').value;
            var fromDate = document.getElementById('fromDate').value;
            var searchedWord = document.getElementById('searchedWord').value;
            var status = document.getElementById('selectStatus').value;
            $.ajax({
                type: "GET",
                url: "{{ route('searchLead') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    toDate: toDate,
                    fromDate: fromDate,
                    searchedWord: searchedWord,
                    status: status
                },
                success: function(data) {
                    $('#show-result').html(data);
                }
            })
        }
    </script>
@endsection
@push('scripts')
@endpush