@extends('Admin.layouts.master')
@section('title', 'Ongoing Leads')
@section('style')
<style>
    .dataTables_filter {
        display: none;
    }

    .dt-buttons {
        display: none;
    }
</style>
@endsection
@section('content')
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <div class="d-flex flex-column flex-column-fluid mt-10">
        <div id="kt_app_content_container" class="app-container container-xxl">
            <div class="row max-w-100">
                <div class="top_header d-flex justify-content-between align-items-center">
                    <p class='fs-2 fw-bold mb-0'>Ongoing Leads</p>
                </div>

                <div class="dataTable_area my-5 mb-0">
                    <div class="card">
                        <div class="card-header border-0 pt-0 h-0">
                            <div class="card-toolbar">
                                <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                    <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
                                        <button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body py-4">
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5" id="ongoing_leads">
                                    <thead>
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                            <th class="w-60px pe-2 align-top">Sr. No.</th>
                                            <th class="min-w-125px  w-100px align-top">Investor name</th>
                                            <th class="min-w-125px  w-125px align-top">Email</th>
                                            <th class="min-w-50px w-200px align-top">Product Name</th>
                                            <th class="min-w-50px w-200px align-top">Product Category</th>
                                            <th class="min-w-50px w-75px align-top">Contact Number</th>
                                            <th class="min-w-50px  w-75px align-top">Lead Status</th>
                                            <th class="min-w-50px  w-75px align-top">Created Date</th>
                                            <th class="text-center min-w-100px align-top notexport">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-600 fw-semibold">
                                        @foreach($leads as $lead)
                                        <tr>
                                            <td>
                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                    {{$loop->iteration}}
                                                </div>
                                            </td>
                                            <td class="d-flex align-items-center">
                                                <p class='full_name'>{{$lead->user->name}}</p>
                                            </td>
                                            <td>{{$lead->email}}</td>
                                            <td>{{$productName[$loop->index]['product_name']}}</td>
                                            <td>{{$lead->product != null ? $lead->product->category->category_name : 'No product'}}</td>
                                            <td class='w-75px'>{{$lead->mobile}}</td>
                                            <td>{{$lead->lead_status}}</td>
                                            <td>
                                                <div class="badge badge-light fw-bold">{{$lead->created_at->format('d/m/Y')}}</div>
                                            </td>
                                            <td class="text-end d-flex align-items-center justify-content-around">
                                                <a href='{{route("view-lead",$lead->id)}}' class="action_icon">
                                                    <i class="fa-regular fa-eye"></i>
                                                </a>
                                                <a href="{{route('edit-lead',$lead->id)}}" class="action_icon" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" data-kt-initialized="1">
                                                    <svg class="svg-inline--fa fa-pen-to-square" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-to-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                                        <path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.8 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path>
                                                    </svg>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    $(function() {
        var table = $('#ongoing_leads').DataTable({
            dom: "Bfrtip",
            buttons: [{
                extend: "excel",
                title: "Leads List",
                text: "Export Search Results",
                className: "btn btn-default",
                exportOptions: {
                    columns: ":not(.notexport)",
                    // rows: {
                    //     order: 'current',
                    //     search: 'none'
                    // },
                    // modifier: {
                    //     selected: null
                    // }
                },
            }, ],
        });
        $("#ExportReporttoExcel").on("click", function() {
            table.button(".buttons-excel").trigger();
        });
        $("#searchbox").keyup(function() {
            table.search($(this).val()).draw();
        });

    });
</script>
@endsection