@extends('admin.layouts.default')
@section('title', 'orders')
@section('content')

<style>

.table-bordered {
    border: 1px solid #dee2e6; /* Add border to the table */
}

.table-bordered th, .table-bordered td {
    border: 1px solid #dee2e6; /* Add border to the cells */
}</style>
<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">
                    <div class="d-flex align-items-center">
                        <input type="text" id="userSearchInput" class="form-control me-2" placeholder="Search customer name" style="max-width: 250px;">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="d-flex align-items-center">
                        <input type="text" id="phoneSearchInput" name="phone" class="form-control me-2" placeholder="Search phone" style="max-width: 250px;">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="d-flex align-items-center">
                        <input type="text" id="emailSearchInput" name="email" class="form-control me-2" placeholder="Search email" style="max-width: 250px;">
                    </div>
                </div>
                <div class="col-md-2">
                    <h1 class="page-title mb-0 text-primary">
                        <select class="form-control me-2" id="type" name="website_id" 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>
                    </h1>
                </div>
                <div class="col-md-3">
                    <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">
                    Customers
                </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">Name </th>
                                <th scope="col">Phone</th>
                                <th scope="col">Email</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 canEditCustomer = @json(auth()->user()->can('customer-edit'));
</script>

<script>
    $(document).ready(function() {
        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/customer-listing',
                data: function(d) {
                    d.website_id = $('#type').val();
                    d.customer_name = $('#userSearchInput').val();  
                    d.phone = $('#phoneSearchInput').val();  // Add phone filter
                    d.email = $('#emailSearchInput').val();
                    
                }
            },
            // data: function(d) {
            //         d.website_id = $('#type').val(); 
            //         console.log(d.website_id);
            //     },// 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: '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';
                    }
                },
                {
                    data: null,
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var editButton = '';
                        
                        if (isSuperAdmin || canEditCustomer) {
                            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'); 
        window.location.href = base_url + '/customer-detail/' + id;
    });

    });

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

    $('#refreshFilterButton').on('click', function() {
        $('#userSearchInput').val('');
        $('#phoneSearchInput').val('');
        $('#emailSearchInput').val('');
        $('#type').val('');
        $('#website_data_table').DataTable().ajax.reload();
    });
</script>

@endsection