@extends('admin.layouts.default')
@section('title', 'Dashboard')
@section('content')
<div class="main-content app-content">
     <div class="row my-3">
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body text-center" id="website-card">
                    <span class="avatar avatar-xl rounded-circle bg-primary-transparent border-primary text-primary"><i class="las la-users"></i></span>
                    <h5 class="mt-4 text-muted">Websites</h5>
                    <h2 class="counter text-primary">{{$data['website']}}</h2>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body text-center" id="customer-card">
                    <span class="avatar avatar-xl rounded-circle bg-primary-transparent border-primary text-primary"><i class="las la-users"></i></span>
                    <h5 class="mt-4 text-muted">Customers</h5>
                    <h2 class="counter text-primary">{{$data['customers']}}</h2>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body text-center" id="order-card">
                    <span class="avatar avatar-xl rounded-circle bg-primary-transparent border-primary text-primary"><i class="las la-users"></i></span>
                    <h5 class="mt-4 text-muted">Orders</h5>
                    <h2 class="counter text-primary">{{$data['orders']}}</h2>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body text-center" id="message-card">
                    <span class="avatar avatar-xl rounded-circle bg-primary-transparent border-primary text-primary"><i class="las la-users"></i></span>
                    <h5 class="mt-4 text-muted">Messages</h5>
                    <h2 class="counter text-primary">{{$data['messages']}}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-8" id="customer-table" style="display: none;">
            <div class="card ">
                <div class="card-header justify-content-between">
                    <h3 class="card-title">
                        Customers
                    </h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="website_data_table" class="table text-nowrap table-bordered" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th scope="col">S.no</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Phone</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">website</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8" id="website-table" style="display: none;">
            <div class="card ">
                <div class="card-header justify-content-between">
                    <h3 class="card-title">
                        Websites
                    </h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="websiteDatatable" class="table text-nowrap table-bordered" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th scope="col">S.no</th>
                                    <th scope="col">Title</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Website</th>
                                    <th scope="col">token</th>
                                    <th scope="col">status</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8" id="order-table" style="display: none;">
            <div class="card ">
                <div class="card-header justify-content-between">
                    <h3 class="card-title">
                        Orders
                    </h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="orderDatatable" class="table text-nowrap table-bordered" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th scope="col">S.no</th>
                                    <th scope="col">order Id</th>
                                    <th scope="col">service name </th>
                                    <th scope="col">Customer name </th>
                                    <th scope="col">Assignment type name</th>
                                    <th scope="col">Payment Status</th>
                                    <th scope="col">Total Amount</th> 
                                    <th scope="col">Website </th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8" id="message-table" style="display: none;">
            <div class="card ">
                <div class="card-header justify-content-between">
                    <h3 class="card-title">
                        Messages
                    </h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="messageDatatable" class="table text-nowrap table-bordered" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <!-- <th scope="col">S.no</th> -->
                                    <th scope="col">Order ID</th>
                                    <!-- <th scope="col">Topic</th> -->
                                    <th scope="col">Sender</th>
                                    <!-- <th scope="col">Service Name</th> -->
                                    <th scope="col">Message</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        
          
     </div>
</div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('#website-table').show();

        $('#customer-card').click(function() {
            if ($('#customer-table').is(':hidden')) {
                $('#customer-table').show();
            }
            $('#order-table').hide();
            $('#website-table').hide();
            $('#message-table').hide();
        });

        $('#website-card').click(function() {
            if ($('#website-table').is(':hidden')) {
                $('#website-table').show();
            }
            $('#customer-table').hide();
            $('#order-table').hide();
            $('#message-table').hide();
        });

        $('#order-card').click(function() {
            if ($('#order-table').is(':hidden')) {
                $('#order-table').show();
            }
            $('#customer-table').hide();
            $('#website-table').hide();
            $('#message-table').hide();
        });

        $('#message-card').click(function() {
            if ($('#message-table').is(':hidden')) {
                $('#message-table').show();
            }
            $('#customer-table').hide();
            $('#website-table').hide();
            $('#order-table').hide();
        });

    });
</script>

<script>
    $(document).ready(function() {


        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/customer-by-web/',
                data: function(d) {
                    d.website_id = $('#web_id').val();
                }
            },
            columns: [{
                    data: null, // Use null to generate the row number
                    name: 'row_number',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                    }
                }, {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'phone',
                    name: 'Phone'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'website.website',
                    name: 'website.website',
                    render: function(data, type, row) {
                        // Check if the website field is null or empty
                        return data ? data : 'NA';
                    }
                },

            ]
        });
        $('#submit-button').on('click', function() {
            table.ajax.reload();
        });
        $(document).on('click', '.edit-button', function() {
            var id = $(this).data('id');
            window.location.href = base_url + '/customer-detail/' + id;
        });

    });
</script>

<script>
     $(document).ready(function() {
          var table = $('#websiteDatatable').DataTable({
               processing: true,
               serverSide: true,
               ajax: {
                    url: base_url + '/website-list',  // Your API endpoint
                    data: function(d) {
                         // Add the role_name parameter from the input field to the request payload
                         d.web_name = $('#userSearchInput').val();  
                         d.web_name = $('#userSearchInput').val();
                         d.title = $('#titleSearchInput').val(); // Add title filter
                         d.email = $('#emailSearchInput').val(); // Add email filter
                         d.website = $('#websiteDropdown').val();
                         d.status = $('#statusDropdown').val();
                    }
               },
               columns: [
                    {
                         data: null, // Use null to generate the row number
                         name: 'row_number',
                         orderable: false,
                         searchable: false,
                         render: function(data, type, row, meta) {
                         return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                         }
                    },
                    {
                         data: 'title',
                         name: 'title'
                    },
                    {
                         data: 'email',
                         name: 'email'
                    },
                    {
                         data: 'website',
                         name: 'website'
                    },
                    {
                         data: 'token',
                         name: 'token'
                    },
                    {
                         data: 'status',
                         name: 'status',
                         render: function(data) {
                         return data === 1 ?
                              '<button type="button" class="btn btn-success-light btn-wave waves-effect waves-light">Active</button>' :
                              '<button type="button" class="btn btn-danger-light btn-wave waves-effect waves-light">Inactive</button>';
                         }
                    }
               ],
        });
        $('#submit-button').on('click', function() {
            table.ajax.reload(); // Reload the DataTable with the new filter
        });
        $(document).on('click', '.edit-button', function() {
            var id = $(this).data('id'); // Get the ID from the button
            window.location.href = base_url + '/customer-orders-detail/' + id;
        });

    });
</script>

<script>
    $(document).ready(function() {
        var table = $('#orderDatatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/orders-list', // Your endpoint
                data: function(d) {
                    d.order_id = $('#orderIdInput').val();
                    d.website_id = $('#type').val();
                    d.payment_status = $('#payment').val();
                    d.service_name = $('#serviceNameDropdown').val();
                    d.customer_name = $('#customerNameDropdown').val();
                    d.assignment_type_name = $('#assignmentTypeDropdown').val();
                }
            },
            columns: [
                {
                    data: null, // Use null to generate the row number
                    name: 'row_number',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                    }
                },
                {
                    data: 'order_id',
                    name: 'order_id'
                },
                {
                    data: 'service_name',
                    name: 'service_name'
                },
                {
                    data: 'customer.name',
                    name: 'customer.name',
                    render: function(data, type, row) {
                        return data ? data : 'N/A';
                    }
                },
                {
                    data: 'assignment_type_name',
                    name: 'assignment_type_name'
                },
                {
                    data: 'payment_status',
                    name: 'payment_status',
                    render: function(data) {
                        if (data == 'PAID') {
                            return '<button type="button" class="btn btn-success-light btn-wave waves-effect waves-light">PAID</button>';
                        } else if (data == 'PARTIAL PAID') {
                            return '<button type="button" class="btn btn-info-light btn-wave waves-effect waves-light">PARTIAL</button>';
                        } else {
                            return '<button type="button" class="btn btn-danger-light btn-wave waves-effect waves-light">UNPAID</button>';
                        }
                    }
                },
                {
                    data: 'total_amount',
                    name: 'total_amount',
                    render: function(data, type, row) {
                        var currency_name = row.currency_name; // Assuming currency_name is a property in your row data
                        return data ? currency_name + ' ' + parseFloat(data).toFixed(2) : 'N/A';
                    }
                },
                {
                    data: 'websites.website',
                    name: 'websites.website'
                }
            ]
        });

        // Filter button click event
        $('#submit-button').on('click', function() {
            $('#website_data_table').DataTable().ajax.reload();
        });

        // Edit button click event
        $(document).on('click', '.edit-button', function() {
            var id = $(this).data('id'); // Get the ID from the button
            window.location.href = base_url + '/customer-orders-detail/' + id;
        });

    });
</script>

<script>
$(document).ready(function() {
    var table = $('#messageDatatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: base_url + '/messages-list', // Endpoint to fetch messages
            data: function(d) {
                // You can add filters here if needed
            }
        },
        columns: [
            // {
            //     data: null, 
            //     name: 'row_number',
            //     orderable: false,
            //     searchable: false,
            //     render: function(data, type, row, meta) {
            //         return meta.row + meta.settings._iDisplayStart + 1; // Row number
            //     }
            // },
            {
                data: 'order_id',
                name: 'order_id'
            },
            // {
            //     data: 'order_topic', // Order Topic field from 'orders' table
            //     name: 'order_topic',
            //     render: function(data) {
            //         return data ? data : 'N/A';
            //     }
            // },
            {
                data: 'sender_name', // Sender's name from 'users' table
                name: 'sender_name',
                render: function(data) {
                    return data ? data : 'N/A';
                }
            },
            // {
            //     data: 'service_name',
            //     name: 'service_name'
            // },
            {
                data: 'message_content', // Message content from the 'messages' table
                name: 'message_content',
                render: function(data) {
                    return data ? data : 'N/A';
                }
            }
        ]
    });
});

</script>