@extends('layouts.admin')

@section('content')

    @can('user_create')
        <?php /* <div style="margin-bottom: 10px;" class="row">
            <div class="col-lg-12">
                <a class="btn btn-success" href="{{ route('admin.users.create') }}">
                    {{ trans('global.add') }} {{ trans('cruds.user.title_singular') }}
                </a>
                {{-- <button class="btn btn-warning" data-toggle="modal" data-target="#csvImportModal">
                    {{ trans('global.app_csvImport') }}
                </button> --}}
                {{-- @include('csvImport.modal', ['model' => 'User', 'route' => 'admin.users.parseCsvImport']) --}}
            </div>
        </div> */ ?>
    @endcan

    <div class="card">
        <div class="card-header">
            {{ trans('cruds.user.title_singular') }} {{ trans('global.list') }}
        </div>

        <div class="card-body">
            <div class="row mb-3">
                {{-- <div class="col-md-3">
                    <select id="roleFilter" class="form-control select2">
                        <option value="">{{ trans('global.all') }} Roles</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->title }}">{{ $role->title }}</option>
                        @endforeach
                    </select>
                </div> --}}
                <div class="col-md-3" id="kycFilterDiv">
                    <select id="kycFilter" class="form-control select2">
                        <option value="">{{ trans('global.all') }} KYC Status</option>
                        <option value="0">Pending</option>
                        <option value="1">Under Review</option>
                        <option value="2">Approved</option>
                        <option value="3">Rejected</option>
                    </select>
                </div>
                <div class="col-md-3" id="seller_status_filter_div">
                    <select id="seller_status_filter" class="form-control select2">
                        <option value="">{{ trans('global.all') }} Seller Status</option>
                        <option value="1">Requested</option>
                        <option value="2">Approved</option>
                        <option value="3">Rejected</option>
                    </select>
                </div>
            </div>

            @if(session()->has('success'))
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div>
            @endif

            @php
                $b_count = '';
                if($buyer_count > 0){
                    $b_count = '('.$buyer_count.')';
                }

                $s_count = '';
                if($seller_count > 0){
                    $s_count = '('.$seller_count.')';
                }
            @endphp 

            <ul class="nav nav-tabs" id="userTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="buyer-requested-tab" data-toggle="tab" href="#buyer_requested" role="tab" aria-controls="buyer_requested" aria-selected="false">Buyer Requested  {{ $b_count }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="buyers-tab" data-toggle="tab" href="#buyers" role="tab" aria-controls="buyers" aria-selected="false">Buyer Accepted</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="buyer-rejected-tab" data-toggle="tab" href="#buyer_rejected" role="tab" aria-controls="buyer_rejected" aria-selected="false">Buyer Rejected</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="sellers-requested-tab" data-toggle="tab" href="#sellers_requested" role="tab" aria-controls="sellers_requested" aria-selected="false">Seller Requested {{ $s_count }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="sellers-tab" data-toggle="tab" href="#sellers" role="tab" aria-controls="sellers" aria-selected="true">Seller Accepted</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="seller-rejected-tab" data-toggle="tab" href="#seller_rejected" role="tab" aria-controls="seller_rejected" aria-selected="false">Seller Rejected</a>
                </li>
            </ul>
            
            <div class="tab-content mt-3" id="userTabsContent">
                <div class="tab-pane fade show active" id="buyer_requested" role="tabpanel" aria-labelledby="buyer-requested-tab">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-buyer-requested">
                        <thead>
                            <tr>
                                <th>
                                    {{ trans('cruds.user.fields.full_name') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone_code') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.email_id') }}
                                </th>
                                {{-- <th>
                                    {{ trans('cruds.user.fields.roles') }}
                                </th> --}}
                                <th>
                                    {{ trans('cruds.user.fields.kyc_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.seller_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.created_at') }}
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="buyers" role="tabpanel" aria-labelledby="buyers-tab">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-Buyers">
                        <thead>
                            <tr>
                                <th>
                                    {{ trans('cruds.user.fields.full_name') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone_code') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.email_id') }}
                                </th>
                                {{-- <th>
                                    {{ trans('cruds.user.fields.roles') }}
                                </th> --}}
                                <th>
                                    {{ trans('cruds.user.fields.kyc_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.seller_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.created_at') }}
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="buyer_rejected" role="tabpanel" aria-labelledby="buyer-rejected-tab">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-buyer-rejected">
                        <thead>
                            <tr>
                                <th>
                                    {{ trans('cruds.user.fields.full_name') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone_code') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.email_id') }}
                                </th>
                                {{-- <th>
                                    {{ trans('cruds.user.fields.roles') }}
                                </th> --}}
                                <th>
                                    {{ trans('cruds.user.fields.kyc_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.seller_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.created_at') }}
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="sellers_requested" role="tabpanel" aria-labelledby="sellers-requested-tab">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-sellers-requested">
                        <thead>
                            <tr>
                                <th>
                                    {{ trans('cruds.user.fields.full_name') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone_code') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.email_id') }}
                                </th>
                                {{-- <th>
                                    {{ trans('cruds.user.fields.roles') }}
                                </th> --}}
                                <th>
                                    {{ trans('cruds.user.fields.kyc_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.seller_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.created_at') }}
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="sellers" role="tabpanel" aria-labelledby="sellers-tab">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-Sellers">
                        <thead>
                            <tr>
                                <th>
                                    {{ trans('cruds.user.fields.full_name') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone_code') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.email_id') }}
                                </th>
                                {{-- <th>
                                    {{ trans('cruds.user.fields.roles') }}
                                </th> --}}
                                <th>
                                    {{ trans('cruds.user.fields.kyc_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.seller_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.created_at') }}
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="seller_rejected" role="tabpanel" aria-labelledby="seller-rejected-tab">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-sellers-rejected">
                        <thead>
                            <tr>
                                <th>
                                    {{ trans('cruds.user.fields.full_name') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone_code') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.phone') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.email_id') }}
                                </th>
                                {{-- <th>
                                    {{ trans('cruds.user.fields.roles') }}
                                </th> --}}
                                <th>
                                    {{ trans('cruds.user.fields.kyc_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.seller_status') }}
                                </th>
                                <th>
                                    {{ trans('cruds.user.fields.created_at') }}
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    @parent
    <script>
        // $(function() {
        //     let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        //     @can('user_delete')
        //         let deleteButtonTrans = "{{ trans('global.datatables.delete') }}";
        //         let deleteButton = {
        //             text: deleteButtonTrans,
        //             url: "{{ route('admin.users.massDestroy') }}",
        //             className: 'btn-danger',
        //             action: function(e, dt, node, config) {
        //                 var ids = $.map(dt.rows({
        //                     selected: true
        //                 }).data(), function(entry) {
        //                     return entry.id
        //                 });

        //                 if (ids.length === 0) {
        //                     alert("{{ trans('global.datatables.zero_selected') }}")

        //                     return
        //                 }

        //                 if (confirm("{{ trans('global.areYouSure') }}")) {
        //                     $.ajax({
        //                         headers: {
        //                             'x-csrf-token': _token
        //                         },
        //                         method: 'POST',
        //                         url: config.url,
        //                         data: {
        //                             ids: ids,
        //                             _method: 'DELETE'
        //                         }
        //                     })
        //                     .done(function() {
        //                         location.reload()
        //                     })
        //                 }
        //             }
        //         }
        //         dtButtons.push(deleteButton)
        //     @endcan

        //     let dtOverrideGlobals = {
        //         buttons: dtButtons,
        //         processing: true,
        //         serverSide: true,
        //         retrieve: true,
        //         aaSorting: [],
        //         ajax: {
        //             url: "{{ route('admin.users.index') }}",
        //             data: function(d) {
        //                 d.role = $('#roleFilter').val();
        //                 d.kyc_status = $('#kycFilter').val();
        //                 d.seller_status = $('#seller_status_filter').val();
        //             }
        //         },
        //         columns: [{
        //                 data: 'full_name',
        //                 name: 'full_name'
        //             }, {
        //                 data: 'phone_code',
        //                 name: 'phone_code'
        //             }, {
        //                 data: 'phone',
        //                 name: 'phone'
        //             }, {
        //                 data: 'email',
        //                 name: 'email'
        //             }, { 
        //                 data: 'roles', 
        //                 name: 'roles.title' 
        //             }, { 
        //                 data: 'kyc_status', 
        //                 name: 'kyc_status' 
        //             }, { 
        //                 data: 'seller_status', 
        //                 name: 'seller_status' 
        //             }, { 
        //                 data: 'created_at', 
        //                 name: 'created_at' 
        //             }, {
        //                 data: 'actions',
        //                 name: "{{ trans('global.actions') }}"
        //             }
        //         ],
        //         orderCellsTop: true,
        //         order: [
        //             [1, 'desc']
        //         ],
        //         pageLength: 10,
        //     };

        //     let table = $('.datatable-User').DataTable(dtOverrideGlobals);
        //     $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e) {
        //         $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
        //     });

        //     $('#roleFilter, #kycFilter, #seller_status_filter').change(function() {
        //         table.ajax.reload();
        //     });
        // });

        $(function () {
            const hash = window.location.hash;
            if (hash === '#buyer_requested' || hash === '#buyers' || hash === '#buyer_rejected' || hash === '#sellers_requested' || hash === '#sellers' || hash === '#seller_rejected') {
                const tabLink = document.querySelector(`.nav-link[href="${hash}"]`);
                const tabContent = document.querySelector(hash);

                if (tabLink && tabContent) {
                    document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
                    document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active', 'show'));
                    tabLink.classList.add('active');
                    tabContent.classList.add('active', 'show');
                }
            }

            function initUserTable(tableClass, roleFilter) {
                let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons);
                let routeUrl = "{{ route('admin.users.index') }}";

                let dtOverrideGlobals = {
                    buttons: dtButtons,
                    processing: true,
                    serverSide: true,
                    retrieve: true,
                    aaSorting: [],
                    ajax: {
                        url: routeUrl,
                        data: function (d) {
                            d.role = roleFilter;
                            d.kyc_status = $('#kycFilter').val();
                            d.seller_status = $('#seller_status_filter').val();
                        }
                    },
                    columns: [
                        { data: 'full_name', name: 'full_name' },
                        { data: 'country_id', name: 'country_id' },
                        { data: 'phone', name: 'phone' },
                        { data: 'email', name: 'email' },
                        // { data: 'roles', name: 'roles.title' },
                        { data: 'kyc_status', name: 'kyc_status' },
                        { data: 'seller_status', name: 'seller_status' },
                        { data: 'created_at', name: 'created_at' },
                        { data: 'actions', name: "{{ trans('global.actions') }}" }
                    ],
                    order: [[7, 'desc']],
                    pageLength: 10,
                };

                return $('.' + tableClass).DataTable(dtOverrideGlobals);
            }

            let buyerRequestedTable = initUserTable('datatable-buyer-requested', 'buyer_requested');
            let buyerTable = initUserTable('datatable-Buyers', 'Buyer');
            let buyerRejectedTable = initUserTable('datatable-buyer-rejected', 'buyer_rejected');
            let sellerRequestedTable = initUserTable('datatable-sellers-requested', 'sellers_requested');
            let sellerTable = initUserTable('datatable-Sellers', 'Seller');
            let sellerRejectedTable = initUserTable('datatable-sellers-rejected', 'seller_rejected');

            function toggleColumns(tabId) {
                if (tabId === 'sellers') {
                    sellerTable.column(4).visible(false); // Hide KYC
                    sellerTable.column(5).visible(true);  // Show Seller Status

                    $('#kycFilterDiv').hide();
                    $('#seller_status_filter_div').show();
                } else if (tabId === 'buyers') {
                    buyerTable.column(4).visible(true);   // Show KYC
                    buyerTable.column(5).visible(false);   // Hide Seller Status

                    $('#seller_status_filter_div').hide();
                    $('#kycFilterDiv').show();
                } else if(tabId === 'buyer_requested'){
                    buyerRequestedTable.column(5).visible(false);  // Hide Seller Status
                    
                    $('#seller_status_filter_div').hide();
                    $('#kycFilterDiv').show();
                } else if(tabId === 'sellers_requested'){
                    sellerRequestedTable.column(4).visible(false);  // Hide KYC

                    $('#kycFilterDiv').hide();
                    $('#seller_status_filter_div').show();
                } else if(tabId === 'buyer_rejected'){
                    buyerRejectedTable.column(5).visible(false);  // Hide Seller Status
                    
                    $('#seller_status_filter_div').hide();
                    $('#kycFilterDiv').show();
                } else if(tabId === 'seller_rejected'){
                    sellerRejectedTable.column(4).visible(false);  // Hide KYC

                    $('#kycFilterDiv').hide();
                    $('#seller_status_filter_div').show();
                }
            }

            const activeTab = document.querySelector('.nav-link.active');
            if (activeTab) {
                const tabId = activeTab.getAttribute('href').replace('#', '');
                console.log('Initial tab:', tabId);
                setTimeout(() => {
                    toggleColumns(tabId);
                }, 300);
            }

            document.querySelectorAll('.nav-link').forEach(tab => {
                tab.addEventListener('click', function () {
                    setTimeout(() => {
                        const activeTab = document.querySelector('.nav-link.active');
                        const tabId = activeTab.getAttribute('href').replace('#', '');
                        toggleColumns(tabId);
                    }, 300);
                });
            });

            $('#kycFilter, #seller_status_filter').change(function () {
                buyerRequestedTable.ajax.reload();
                buyerTable.ajax.reload();
                buyerRejectedTable.ajax.reload();

                sellerRequestedTable.ajax.reload();
                sellerTable.ajax.reload();
                sellerRejectedTable.ajax.reload();
            });
        });
    </script>
@endsection