@extends('admin.layouts.default')
@section('title', 'orders')
@section('content')
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">

            <div class="row col-md-12">

                <!-- <div class="col-md-2">
                    <select class="form-control me-2" id="orderIdDropdown" name="order_id" aria-label="Order ID">
                        <option value="">Select Order ID</option>
                        @foreach($orderIds as $orderId)
                            <option value="{{$orderId}}">{{$orderId}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <select class="form-control me-2" id="customerNameDropdown" name="customer_name" aria-label="Customer Name">
                        <option value="">Select Customer Name</option>
                        @foreach($customerNames as $customerName)
                            <option value="{{$customerName}}">{{$customerName}}</option>
                        @endforeach
                    </select>
                </div> -->

                <div class="col-md-2">
                    <input type="text" class="form-control me-2" id="orderIdInput" name="order_id" aria-label="Order ID" placeholder="Enter Order ID">
                </div>

                <div class="col-md-2">
                    <input type="text" class="form-control me-2" id="customerNameDropdown" name="customer_name" aria-label="customer Name" placeholder="Enter customer Name">
                </div>

                <div class="col-md-2">
                    <select class="form-control me-2" id="serviceNameDropdown" name="service_name" aria-label="Service Name">
                        <option value="">Select Service Name</option>
                        <!-- Populate dynamically with service names -->
                        @foreach($serviceNames as $serviceName)
                            <option value="{{$serviceName}}">{{$serviceName}}</option>
                        @endforeach
                    </select>
                </div>
                
                <!-- Assignment Type Name Filter -->
                <div class="col-md-2">
                    <select class="form-control me-2" id="assignmentTypeDropdown" name="assignment_type_name" aria-label="Assignment Type">
                        <option value="">Select Assignment Type</option>
                        <!-- Populate dynamically with assignment types -->
                        @foreach($assignmentTypes as $assignmentType)
                            <option value="{{$assignmentType}}">{{$assignmentType}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <select class="form-control me-2" id="type" name="type" aria-label=".form-select-sm example">
                        <option value="">Select Website</option>
                        @foreach($data['website'] as $row)
                        <option value="{{$row->id}}">{{$row->website}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">     
                    <select class="form-control me-2" id="payment" name="payment" aria-label=".form-select-sm example">
                        <option value="">Select payment status</option>
                        <option value="PAID">PAID</option>
                        <option value="UNPAID">UNPAID</option>
                        <option value="PARTIAL PAID">PARTIAL PAID</option>
                    </select>
                </div>
                    
                <div class="col-md-2">     
                    <button type="submit" class="btn btn-primary" id="submit-button">Filter</button>
                    <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
                </div>  
                  
            </div>
        
            <div class="page-rightheader">
            <div>
                                     
        </div>
    </div>

</div>

        <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="website_data_table" class="table text-nowrap table-bordered">
                        <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>
                                <th scope="col">action</th>
                            </tr>
                        </thead>
                        <tbody>

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

        </div>

    </div>
</div>

<script>
    var isSuperAdmin = @json(auth()->user()->hasRole('Superadmin'));
    var canEditOrder = @json(auth()->user()->can('orders-edit'));
    var candeleteOrder = @json(auth()->user()->can('orders-delete'));
</script>

<script>
    $(document).ready(function() {
        var table = $('#website_data_table').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'
                },
                {
                    data: null,
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var editButton = '';
                        
                        if (isSuperAdmin || canEditOrder) {
                            var editButton = '<button type="button" class="btn btn-primary btn-sm edit-button mx-2" data-id="' + row.id + '">' +
                                '<i class="ri-edit-line"></i> Edit' +
                                '</button>';
                        }
                        return editButton;
                    }
                }
            ]
        });

        // 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;
        });

        // Reset button click event
        $('#refreshFilterButton').on('click', function() {
            // Reset all filter dropdowns
            $('#orderIdInput').val('');
            $('#serviceNameDropdown').val('');
            $('#customerNameDropdown').val('');
            $('#assignmentTypeDropdown').val('');
            $('#type').val('');
            $('#payment').val('');
            table.ajax.reload(); // Reload DataTable to reflect changes
        });
    });
</script>

<!-- <script>
    $(document).ready(function() {
        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url +'/orders-list', // Your endpoint
                data: function(d) {
                    d.website_id = $('#type').val();
                    d.payment_status = $('#payment').val();
                    d.payment_status = $('#payment').val();
                    d.order_id = $('#userSearchInput').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) {
                        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'
                },
                {
                    data: null,
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var editButton = '<button type="button" class="btn btn-primary btn-sm edit-button mx-2" data-id="' + row.id + '">' +
                            '<i class="ri-edit-line"></i>' +
                            '</button>';
                        return  editButton;

                    }
                }
            ]
        });
        $('#submit-button').on('click', function() {
            // table.ajax.reload();
            $('#website_data_table').DataTable().ajax.reload();
        });
        $(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; 
        });

        $('#refreshFilterButton').on('click', function() {
            $('#userSearchInput').val('');
            $('#email').val('');
            $('#assignToFilter').val(''); 
            $('#phoneFilter').val('');
            $('#roleFilter').val('');

            $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
        });

    });

    
    $('#userSearchInput').on('keyup', function() {
        $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
    });
</script> -->

@endsection