@extends('admin.layouts.default')
@section('title', 'Dashboard')
@section('content')
<div class="main-content app-content">
<div class="card-header my-3 col-md-3">
    <select class="form-select form-select-sm" id="website-dropdown" name="website_id" onchange="redirectToWebsite()">
        @foreach($data['websites'] as $website)
            <option value="{{ $website['id'] }}" 
                {{ $data['website']['id'] == $website['id'] ? 'selected' : '' }}>
                {{ $website['website'] }}
            </option>
        @endforeach
    </select>
</div>

    <div class="row">
        <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">
                    <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">Payments</h5>
                    <h2 class="counter text-primary">${{$data['payment']}}</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['message_count']}}</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="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">Payment status</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> <!-- New Column for Order Topic -->
                                    <th scope="col">Sender</th> <!-- Changed from Sender ID to Sender -->
                                    <th scope="col">Service Name</th>
                                    <th scope="col">Message</th>
                                </tr>
                            </thead>
                            <tbody>

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

    </div>
</div>


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

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

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

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

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

</script>

<script>
    $(document).ready(function() {
        var urlPath = window.location.pathname; 
        var websiteId = urlPath.split('/').pop();
        // console.log(websiteId);

        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/customer-by-website/' + websiteId,
                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 websiteId = window.location.pathname.split('/').pop();
        var table = $('#orderDatatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/orders-list-by-website/' + websiteId, // Your endpoint
                data: function(d) {
                    d.website_id = $('#web_id').val();
                }
            }, // Adjust the endpoint to match your setup
            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) {
                        // Check if the website field is null or empty
                        return data ? data : 'NA';
                    }
                },
                {
                    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: 'websites.website',
                    name: 'websites.website'
                },
            ]
        });
        $('#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() {
    // Extract website ID from the URL (assuming the URL pattern is consistent, e.g., website-dashboard/{id})
    var urlPath = window.location.pathname; 
    var websiteId = urlPath.split('/').pop(); // Extract the last part of the URL (website ID)

    var table = $('#messageDatatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: base_url + '/messages-list/' + websiteId, // Dynamically include the website ID in the URL
            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>


<script>
    function redirectToWebsite() {
        var websiteId = document.getElementById('website-dropdown').value;
        // Generate the full URL with the website ID
        var url = '{{ url("/website-dashboard") }}/' + websiteId;
        window.location.href = url; // Redirect to the generated URL
    }
</script>
@endsectioncecs