@include('admin.layout.header')

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.css" /> --}}

<div class="modal fade" id="potentialDetailModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Potential Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <table class="table table-bordered" style="font-size: 15px;" id="potentialTable">
                            <thead>
                                <tr>
                                    <th>Product Name</th>
                                    <th>Product SKU</th>
                                    <th>Potential Count</th>
                                </tr>
                            </thead>
                            <tbody style="text-align: center;">
                                {{-- Details Added Here --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header">
            <div class="row w-100 justify-content-end g-2">
                <div class="col-lg-auto my-auto col-md-6">
                    <h1>View Potential Detail</h1>
                </div>
                <div class="col-lg-2 col-md-6 my-auto ml-auto">
                    <div class="form-group mb-0 my-1">
                        <select class="select2 form-select w-100" name="BEFilter" id="BEFilter">
                            <option value="" selected disabled>Select BE</option>
                            @foreach ($beUsers as $user)
                                <option value="{{ $user->user_id }}">{{ $user->emp_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto my-2 my-lg-auto my-md-0 col-md-6">
                    <button id="applyButton" class="btn btn-primary mr-2">Apply</button>
                    <button id="clearButton" class="btn btn-danger mr-2">Clear</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="#">
                    <div class="card card-statistic-1 green_card">
                        <div class="card-icon count_icon green_count_icon">
                            <i class="fa fa-stopwatch"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #edf2c8;">Remaining Doctor Potential</h4>
                            </div>
                            <div class="card-body" style="color: #edf2c8;" id="remainingDoctorPotential">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="#">
                    <div class="card card-statistic-1 pink_count">
                        <div class="card-icon count_icon pink_count_icon">
                            <i class="fa fa-user-check"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #ffd4e3;">Completed Doctor Potential</h4>
                            </div>
                            <div class="card-body" style="color: #ffd4e3;" id="completedDoctorPotential">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <a href="#">
                    <div class="card card-statistic-1 yellow_count">
                        <div class="card-icon count_icon yellow_count_icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="total_count_text" style="color: #fff0d7;">All Doctors Count</h4>
                            </div>
                            <div class="card-body" style="color: #fff0d7;" id="totalDoctor">
                                0
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>BE Name</th>
                                        <th>Doctor Name</th>
                                        <th>Potential Detail</th>
                                        <th>Updated Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@include('admin.layout.footer')

<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.js"></script>
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>

<script>
    function PotentialDetailSet(productNames, productSkus, potentialCounts) {
        // Split the product names and counts by commas
        let names = productNames.split(',');
        let skus = productSkus.split(',');
        let counts = potentialCounts.split(',');

        // Get the table body where the data will be appended
        let tableBody = document.querySelector('#potentialTable tbody');
        tableBody.innerHTML = ''; // Clear the table body before appending new rows

        // Loop through the product names and counts and append them as rows
        for (let i = 0; i < names.length; i++) {
            let row = `
            <tr>
                <td>${names[i]}</td>
                <td>${skus[i]}</td>
                <td>${counts[i]}</td>
            </tr>
        `;
            tableBody.innerHTML += row;
        }
    }
    function getCount() {
        $.ajax({
            url: "{{ route('potentialCount') }}",
            type: 'POST',
            data: {
                '_token': '{{ csrf_token() }}'
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                // console.log(response);
                $("#totalDoctor").html(response.data.totalDoctor);
                $("#completedDoctorPotential").html(response.data.completedDoctorPotential);
                $("#remainingDoctorPotential").html(response.data.remainingDoctorPotential);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }
    var potentialDetailDataTable;
    $(document).ready(function() {
        // call Count api
        getCount();

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'beName',
                    name: 'beName'
                },
                {
                    data: 'doctorName',
                    name: 'doctorName'
                },
                {
                    data: 'potential_detail',
                    name: 'potential_detail',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'updatedAt',
                    name: 'updatedAt'
                }
            ];
            var columnDefs = [{
                "width": "150",
                "targets": [3]
            }];
            getdatatable("{{ route('potentialDetailsPaginate') }}", columns, columnDefs);

            $('#applyButton').click(function() {
                potentialDetailDataTable.draw();
            });

            $('#clearButton').click(function() {
                $("#BEFilter").val('').change();
                potentialDetailDataTable.draw();
            });
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            potentialDetailDataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                        d.user_id = $('#BEFilter option:selected').val();
                    }
                }
            });
        }
    });
</script>