@extends('layouts.admin')

@section('content')
<div class="card">
    <div class="card-header">
        {{ trans('cruds.product.auction_products_title') }} {{ trans('global.list') }}
        @can('user_create')
            <a href="{{ route('admin.products.create') }}" class="btn btn-primary float-right">
                {{ trans('global.add') }} {{ trans('cruds.product.singular') }}
            </a>
        @endcan
    </div>
    
    <div class="card-body">
        {{-- Filters --}}
        <div class="row mb-3">
            <div class="col-md-3">
                <select id="sellerFilter" class="form-control select2">
                    <option value="">{{ trans('global.all') }} {{ trans('cruds.product.fields.user_id') }}</option>
                    @foreach($seller_users as $user)
                        <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select id="categoryFilter" class="form-control select2">
                    <option value="">{{ trans('global.all') }} {{ trans('cruds.category.title') }}</option>
                    @foreach($category as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select id="statusFilter" class="form-control select2">
                    <option value="">{{ trans('global.all') }} {{ trans('cruds.product.fields.status') }}</option>
                    <option value="Draft">{{ trans('cruds.product.status.draft') }}</option>
                    <option value="Pending">{{ trans('cruds.product.status.pending') }}</option>
                    <option value="Approved">{{ trans('cruds.product.status.approved') }}</option>
                    <option value="Rejected">{{ trans('cruds.product.status.rejected') }}</option>
                    <option value="Save">{{ trans('cruds.product.status.save') }}</option>
                </select>
            </div>
            <div class="col-md-2">
                <select id="conditionFilter" class="form-control select2">
                    <option value="">{{ trans('global.all') }} {{ trans('cruds.product.fields.condition') }}</option>
                    <option value="1">{{ trans('cruds.product.condition.new') }}</option>
                    <option value="2">{{ trans('cruds.product.condition.used') }}</option>
                </select>
            </div>
            <div class="col-md-2">
                <select id="isAdminFilter" class="form-control select2">
                    <option value="">{{ trans('global.all') }} {{ trans('cruds.product.fields.is_admin') }}</option>
                    <option value="0">{{ trans('cruds.product.is_admin.no') }}</option>
                    <option value="1">{{ trans('cruds.product.is_admin.yes') }}</option>
                </select>
            </div>
        </div>

        <div class="row mb-3 date_time_div">
            <div class="col-md-4">
                <input type="text" name="live_date_time" class="form-control live_date_time" placeholder="{{ trans('global.select_live_date_time_placeholder') }}">
            </div>
            <div class="col-md-4">
                <input type="text" name="finish_date_time" class="form-control finish_date_time" placeholder="{{ trans('global.select_finish_date_time_placeholder') }}">
            </div>
        </div>

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

        {{-- Tabs --}}
        <ul class="nav nav-tabs" id="productTabs" role="tablist">
            @php
                $tabs = [
                    'live' => ['label' => trans('global.tabbing.live_auction'), 'count' => $product_live_count],
                    'upcoming' => ['label' => trans('global.tabbing.upcoming_auction'), 'count' => $product_upcoming_count],
                    'archived' => ['label' => trans('global.tabbing.archived'), 'count' => $product_archived_count],
                    'waiting-for-payment' => ['label' => trans('global.tabbing.waiting_for_payment'), 'count' => $waiting_for_payment],
                    'sold_auction' => ['label' => trans('global.tabbing.sold_auction'), 'count' => $product_sold_auction_count],
                ];
            @endphp

            @foreach($tabs as $key => $tab)
                <li class="nav-item">
                    <a class="nav-link {{ $loop->first ? 'active' : '' }}" 
                       id="{{ $key }}-tab" 
                       data-toggle="tab" 
                       href="#{{ $key }}" 
                       role="tab">
                        {{ $tab['label'] }} ({{ $tab['count'] }})
                    </a>
                </li>
            @endforeach
        </ul>

        <div class="tab-content mt-3">
            @foreach(['live', 'upcoming', 'archived', 'waiting-for-payment', 'sold_auction'] as $index => $tab)
                @php
                    // Fix class name (convert to StudlyCase)
                    $datatableClass = Illuminate\Support\Str::studly(str_replace('-', '_', $tab));
                @endphp
                <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="{{ $tab }}" role="tabpanel">
                    <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-{{ $datatableClass }}Products">
                        <thead>
                            <tr>
                                <th>{{ trans('cruds.product.fields.id') }}</th>
                                <th>{{ trans('cruds.product.fields.category') }}</th>
                                <th>{{ trans('cruds.product.fields.name') }}</th>
                                <th>{{ trans('cruds.product.fields.user_id') }}</th>
                                <th>{{ trans('cruds.product.fields.sku') }}</th>
                                <th>{{ trans('cruds.product.fields.price') }}</th>
                                <th>{{ trans('cruds.product.fields.commission_percentage') }}</th>
                                <th>{{ trans('cruds.product.fields.win_price') }}</th>
                                <th>{{ trans('cruds.product.fields.admin_commission') }}</th>
                                <th>{{ trans('cruds.product.fields.seller_receiver') }}</th>
                                <th>{{ trans('cruds.product.fields.live_date') }}</th>
                                <th>{{ trans('cruds.product.fields.finish_date') }}</th>
                                <th>{{ trans('cruds.product.fields.status') }}</th>
                                <th>{{ trans('cruds.product.fields.condition') }}</th>
                                <th>{{ trans('cruds.product.fields.number_of_bids') }}</th>
                                <th>{{ trans('cruds.product.fields.is_admin') }}</th>
                                <th>{{ trans('cruds.product.fields.actions') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@section('scripts')
@parent

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script>
$(function () {
    'use strict';

    const CONFIG = {
        tabs: {
            live: { status: 'Approved', type: 1, selector: '.datatable-LiveProducts', isAuction: true },
            upcoming: { status: 'Pending', type: 1, selector: '.datatable-UpcomingProducts', isAuction: true },
            archived: { status: 'Archived', type: 1, selector: '.datatable-ArchivedProducts', isAuction: true },
            'waiting-for-payment': { status: 'WaitingForPayment', type: 1, selector: '.datatable-WaitingForPaymentProducts', isAuction: true },
            sold_auction: { status: 'SoldAuction', type: 1, selector: '.datatable-SoldAuctionProducts', isAuction: true },
        }
    };

    const tables = {};
    const initializedTabs = new Set();
    let currentTab = 'live';

    // Detect hash navigation
    const hash = window.location.hash.replace('#', '');
    if (hash && CONFIG.tabs[hash]) {
        currentTab = hash;
        activateTab(hash);
    }

    const baseTableConfig = {
        buttons: '',
        processing: true,
        serverSide: true,
        retrieve: true,
        aaSorting: [],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'cat_id', name: 'cat_id' },
            { data: 'name', name: 'name' },
            { data: 'seller_name', name: 'name' },
            { data: 'sku', name: 'sku' },
            { data: 'price', name: 'price' },
            { data: 'commission_percentage', name: 'commission_percentage' },
            { data: 'win_price', name: 'win_price', searchable: false},
            { data: 'admin_commission', name: 'admin_commission', searchable: false},
            { data: 'seller_receiver', name: 'seller_receiver', searchable: false },
            { data: 'live_date', name: 'live_date' },
            { data: 'finish_date', name: 'finish_date' },
            { data: 'status', name: 'status' },
            { data: 'condition', name: 'condition' },
            { data: 'bid_count', name: 'bid_count' },
            { data: 'is_admin', name: 'is_admin' },
            { data: 'actions', name: "{{ trans('global.actions') }}" }
        ],
        order: [[1, 'desc']],
        pageLength: 10
    };

    function initTable(tabKey) {
        if (initializedTabs.has(tabKey)) return tables[tabKey];
        const config = CONFIG.tabs[tabKey];
        if (!$(config.selector).length) return null;

        const ajaxConfig = {
            url: "{{ route('admin.products.auction_product') }}",
            data: function (d) {
                d.user_id = $('#sellerFilter').val();
                d.cat_id = $('#categoryFilter').val();
                d.status = $('#statusFilter').val();
                d.condition = $('#conditionFilter').val();
                d.is_admin = $('#isAdminFilter').val();
                d.product_type = config.type;
                d.live_date = $('.live_date_time').val();
                d.finish_date = $('.finish_date_time').val();
                d.currant_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
                d.tab_status = config.status;
            }
        };

        const table = $(config.selector).DataTable($.extend(true, {}, baseTableConfig, { ajax: ajaxConfig }));
        tables[tabKey] = table;
        initializedTabs.add(tabKey);

        setTimeout(() => setColumnVisibility(tabKey), 100);
        return table;
    }

    function setColumnVisibility(tabKey) {
        const config = CONFIG.tabs[tabKey];
        if (!tables[tabKey]) return;

        if(tabKey == 'sold_auction'){
            tables[tabKey].column(1).visible(false); // Category
            tables[tabKey].column(12).visible(false); // Status
            tables[tabKey].column(13).visible(false); // Condition
            tables[tabKey].column(15).visible(false); // Is Admin
        } else {
            tables[tabKey].column(7).visible(false); // win_price
            tables[tabKey].column(8).visible(false); // admin_commission
            tables[tabKey].column(9).visible(false); // seller_receiver
        }
    }

    function toggleDateTimeDiv(tabId) {
        $('.date_time_div').toggle(CONFIG.tabs[tabId]?.isAuction || false);
    }

    function activateTab(tabId) {
        $('.nav-link').removeClass('active');
        $('.tab-pane').removeClass('active show');
        $(`#${tabId}-tab`).addClass('active');
        $(`#${tabId}`).addClass('active show');
    }

    initTable(currentTab);
    toggleDateTimeDiv(currentTab);

    $('.nav-link').on('click', function () {
        const tabId = $(this).attr('href').replace('#', '');
        currentTab = tabId;
        toggleDateTimeDiv(tabId);

        if (!initializedTabs.has(tabId)) {
            setTimeout(() => initTable(tabId), 150);
        } else {
            setTimeout(() => {
                if (tables[tabId]) tables[tabId].columns.adjust().draw(false);
            }, 150);
        }
    });

    $('input[name="live_date_time"], input[name="finish_date_time"]').daterangepicker({
        timePicker: true,
        autoUpdateInput: false,
        locale: { format: 'YYYY-MM-DD HH:mm', cancelLabel: 'Clear' }
    }).on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
        reloadInitializedTables();
    }).on('cancel.daterangepicker', function () {
        $(this).val('');
        reloadInitializedTables();
    });

    $('#sellerFilter, #categoryFilter, #statusFilter, #conditionFilter, #isAdminFilter').on('change', reloadInitializedTables);

    function reloadInitializedTables() {
        initializedTabs.forEach(tabKey => {
            if (tables[tabKey]) {
                try { tables[tabKey].ajax.reload(null, false); }
                catch (e) { console.error(`Error reloading ${tabKey}:`, e); }
            }
        });
    }

    $('a[data-toggle="tab"]').on('shown.bs.tab', () => {
        try { $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); }
        catch (e) { console.error('Error adjusting columns:', e); }
    });
});
</script>
@endsection