@extends('layouts.dashboard-app')
@section('main-content')
<div class="content-body">
    <div class="container">
        <div class="row page-titles">
            <div class="col p-0">
                <h4>Hello, <span>Welcome {{ auth()->user()->name }}</span></h4>
            </div>
            <div class="col p-0">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">All Leads</a></li>
                    <li class="breadcrumb-item active">All Leads Records MIS Coordinator</li>
                </ol>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="product_wise">Product Wise</label>
                                <select name="product_wise" id="product_wise" class="form-control">
                                    <option value="" disabled selected>- Select Product -</option>
                                    <option value="Elife">Elife</option>
                                    <option value="IdeaCoup">Wireless</option>
                                    <option value="Postpaid">Postpaid</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label for="status">Status</label>
                                <select name="status" id="status" class="form-control">
                                    <option value="" disabled selected>- Select Status -</option>
                                    <option value="1.01">Total Submission</option>
                                    <option value="1.24">Total Closed</option>
                                    <option value="1.25">Total Inprocess</option>
                                    <option value="1.26">Total Cancel</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <br>
                                <button id="submitBtn" class="btn btn-primary mt-2" aria-label="Submit filter">
                                    Submit
                                </button>
                                <div id="loadingSpinner" class="spinner-border text-primary mt-2 d-none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                        </div>

                        <br>
                        <h4 class="card-title">All Leads Records MIS Coordinator</h4>
                        <div id="errorMsg" class="text-danger d-none"></div>
                        <div id="successMsg" class="text-success d-none"></div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered zero-configuration">
                                <thead>
                                    <tr>
                                        <th>S#</th>
                                        <th>Lead No</th>
                                        <th>Customer Name</th>
                                        <th>Plan Name</th>
                                        <th>Sim Type</th>
                                        <th>Lead Type</th>
                                        <th>C.M. No</th>
                                        <th>Status</th>
                                        <th>Revenue</th>
                                        <th>Verified Status</th>
                                        <th>Sr Status</th>
                                        <th>File Uploader Name</th>
                                    </tr>
                                </thead>
                                <tbody id="preview"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#submitBtn").click(function() {
            const productWise = $("#product_wise").val();
            const status = $("#status").val();
            const loadingSpinner = $("#loadingSpinner");
            const errorMsg = $("#errorMsg");
            const successMsg = $("#successMsg");
            const preview = $("#preview");

            errorMsg.addClass('d-none').text('');
            successMsg.addClass('d-none').text('');

            if (!productWise || !status) {
                errorMsg.removeClass('d-none').text("Please select both Product and Status.");
                return;
            }

            loadingSpinner.removeClass('d-none');

            $.ajax({
                type: "POST",
                url: "{{ route('product.search') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    product_wise: productWise,
                    status: status
                },
                success: function(response) {
                    loadingSpinner.addClass('d-none');
                    preview.empty();

                    if (response.length === 0) {
                        successMsg.removeClass('d-none').text("No records found.");
                    } else {
                        response.forEach((record, index) => {
                            preview.append(`
                                <tr>
                                    <td>${index + 1}</td>
                                    <td>${record.lead_no || '-'}</td>
                                    <td>${record.customer_name || '-'}</td>
                                    <td>${record.plan_names || '-'}</td>
                                    <td>${record.sim_type || '-'}</td>
                                    <td>${record.lead_type || '-'}</td>
                                    <td>${record.customer_number || '-'}</td>
                                    <td>${record.status_name || '-'}</td>
                                    <td>${record.revenue || '-'}</td>
                                    <td>${record.verified_status || '-'}</td>
                                    <td>${record.sr_status || '-'}</td>
                                    <td>${record.file_uploader_name || '-'}</td>
                                </tr>
                            `);
                        });
                        successMsg.removeClass('d-none').text("Records successfully fetched.");
                    }
                },
                error: function(xhr) {
                    loadingSpinner.addClass('d-none');
                    errorMsg.removeClass('d-none').text("An error occurred while fetching records. Please try again.");
                    console.error(xhr);
                }
            });
        });
    });
</script>