@extends('layouts.app')
@section('title', __('lang_v1.' . $type . 's'))

<style>
    .container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 30px;
    }

    h1 {
        color: #1f2937;
        margin-bottom: 30px;
        font-size: 28px;
    }

    .loading {
        text-align: center;
        padding: 40px;
        display: none;
    }

    .spinner {
        border: 4px solid #f3f4f6;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    .search-wrapper2 {
        margin-bottom: 12px;
        display: flex;
        justify-content: flex-end;
    }

    .search-wrapper2 input {
        width: 280px;
        padding: 8px 12px;
        font-size: 14px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        outline: none;
        transition: all 0.2s ease;
    }

    .search-wrapper2 input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    thead {
        background-color: #e5e7eb;
    }

    th,
    td {
        border: 1px solid #d1d5db;
        padding: 12px 16px;
        text-align: left;
    }

    th {
        font-weight: bold;
        color: #374151;
    }

    tbody tr {
        transition: background-color 0.2s;
    }

    tbody tr:hover {
        background-color: #f9fafb;
    }

    .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 14px;
    }

    .status-active {
        background-color: #d1fae5;
        color: #065f46;
    }

    .status-inactive {
        background-color: #fee2e2;
        color: #991b1b;
    }

    .pagination-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .pagination-info {
        color: #6b7280;
        font-size: 14px;
    }

    .pagination-controls {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-controls button {
        padding: 8px 16px;
        border: 1px solid #d1d5db;
        background-color: white;
        color: #374151;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 14px;
        border-radius: 4px;
    }

    .pagination-controls button:hover:not(:disabled) {
        background-color: #f3f4f6;
    }

    .pagination-controls button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-controls button.active {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    @media (min-width: 768px) {
        .pagination-wrapper {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .pagination-controls {
            justify-content: flex-end;
        }
    }

    .table-wrapper {
        overflow-x: auto;
    }
</style>

@section('content')
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black"> @lang('lang_v1.' . $type . 's')
            <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">@lang('contact.manage_your_contact', ['contacts' => __('lang_v1.' . $type . 's')])</small>
        </h1>
        @if (!empty($video) && auth()->user()->can('edu_videos.view'))
            @include('video.video_button', ['fileName' => $video])
        @endif
    </section>
    <section class="content">
        @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    <label>
                        {!! Form::checkbox('has_advance_balance', 1, false, ['class' => 'input-icheck', 'id' => 'has_advance_balance']) !!} <strong>@lang('lang_v1.advance_balance')</strong>
                    </label>
                </div>
            </div>

            @if ($type == 'customer')
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="cg_filter">@lang('lang_v1.customer_group'):</label>
                        {!! Form::select('cg_filter', $customer_groups, null, ['class' => 'form-control', 'id' => 'cg_filter']) !!}
                    </div>
                </div>
            @endif
            @if (request()->session()->get('business.district') == '1')
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('district_id', __('lang_v1.districts') . ':') !!}
                        {!! Form::select('district_id', $districts, null, [
                            'class' => 'form-control select2',
                            'id' => 'district_id',
                            'style' => 'width:100%',
                        ]) !!}
                    </div>
                </div>
            @endif
            @if (config('constants.enable_contact_assign') === true)
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('assigned_to', __('lang_v1.assigned_to') . ':') !!}
                        {!! Form::select('assigned_to', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%']) !!}
                    </div>
                </div>
            @endif

            <div class="col-md-3">
                <div class="form-group">
                    <label for="status_filter">@lang('sale.status'):</label>
                    {!! Form::select(
                        'status_filter',
                        ['active' => __('business.is_active'), 'inactive' => __('lang_v1.inactive')],
                        null,
                        ['class' => 'form-control', 'id' => 'status_filter', 'placeholder' => __('lang_v1.none')],
                    ) !!}
                </div>
            </div>
        @endcomponent
        <input type="hidden" value="{{ $type }}" id="contact_type">
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => __('contact.all_your_contact', ['contacts' => __('lang_v1.' . $type . 's')]),
        ])
            @if (auth()->user()->can('supplier.create') ||
                    auth()->user()->can('customer.create') ||
                    auth()->user()->can('supplier.view_own') ||
                    auth()->user()->can('customer.view_own'))
                @slot('tool')
                    <div class="box-tools">
                        <a class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl btn-modal"
                            style="background-color: @if (!empty(session('business.theme_color'))) {{ session('business.theme_color') }} @else{{ '#3498db' }} @endif;"
                            data-href="{{ action([\App\Http\Controllers\ContactController::class, 'create'], ['type' => $type]) }}"
                            data-container=".contact_modal">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                            </svg> @lang('messages.add')
                        </a>
                    </div>
                @endslot
            @endif
            @if (auth()->user()->can('supplier.view') ||
                    auth()->user()->can('customer.view') ||
                    auth()->user()->can('supplier.view_own') ||
                    auth()->user()->can('customer.view_own'))


                <div class="loading" id="loading">
                    <div class="spinner"></div>
                </div>
                <div class="search-wrapper2">
                    <input type="text" id="clientSearch" placeholder="Search by Contact ID or Name..." autocomplete="off">
                </div>
                <div class="table-actions tw-mb-2">
                    <button id="refreshTable"
                        class="tw-flex tw-items-center tw-gap-2 tw-bg-blue-500 tw-text-white tw-px-4 tw-py-2 tw-rounded hover:tw-bg-blue-600">
                        <i class="fa fa-sync-alt"></i> Refresh
                    </button>
                </div>
                <div class="table-wrapper">
                    <table id="clientsTable">
                        <thead>
                            <tr>
                                <th class="">@lang('messages.action')</th>
                                <th>@lang('lang_v1.contact_id')</th>
                                @if ($type == 'supplier')
                                    <th>@lang('business.business_name')</th>
                                    <th>@lang('contact.name')</th>
                                    <th>@lang('business.email')</th>
                                    <th>@lang('contact.tax_no')</th>
                                    <th>@lang('contact.pay_term')</th>
                                    <th>@lang('account.opening_balance')</th>
                                    <th>@lang('lang_v1.advance_balance')</th>
                                    <th>@lang('lang_v1.added_on')</th>
                                    <th>@lang('business.address')</th>
                                    <th>@lang('contact.mobile')</th>
                                    <th>@lang('contact.total_purchase_due')</th>
                                    <th>@lang('lang_v1.total_purchase_return_due')</th>
                                @elseif($type == 'customer')
                                    <th>@lang('user.name')</th>
                                    <th>@lang('business.email')</th>
                                    <th>@lang('contact.tax_no')</th>
                                    @if (request()->session()->get('business.district') == '1')
                                        <th>@lang('lang_v1.district_name')</th>
                                        <th>@lang('lang_v1.district_code')</th>
                                    @endif
                                    <th>@lang('lang_v1.credit_limit')</th>
                                    <th>@lang('contact.pay_term')</th>
                                    <th>@lang('account.opening_balance')</th>
                                    <th>@lang('lang_v1.advance_balance')</th>
                                    <th>@lang('lang_v1.added_on')</th>

                                    <th>@lang('lang_v1.customer_group')</th>
                                    <th>@lang('business.address')</th>
                                    <th>@lang('contact.mobile')</th>
                                    <th>@lang('contact.total_sale_due')</th>
                                    <th>@lang('lang_v1.total_sell_return_due')</th>
                                @endif

                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            <!-- Data will be loaded here via AJAX -->
                        </tbody>
                    </table>
                </div>

                <div class="pagination-wrapper">
                    <div class="pagination-info" id="paginationInfo">
                        Showing 0 to 0 of 0 entries
                    </div>
                    <div class="pagination-controls" id="paginationControls">
                        <!-- Pagination buttons will be generated here -->
                    </div>
                </div>

            @endif
        @endcomponent

        <div class="modal fade contact_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        </div>
        <div class="modal fade pay_contact_due_modal" id="pay_contact_due_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>
        @include('video.video_modal')
    </section>
@stop
@section('javascript')
    <script>
        const isDistrictEnabled = {{ session()->get('business.district') == '1' ? 'true' : 'false' }};
        const hasDistrict = @json(session('business.district') == '1');
    </script>
    <script>
        $(document).ready(function() {
            // Mock data - In real application, this would come from a server
            const allClients = [{
                    action: 'edit',
                    contact_id: 'C0001',

                    name: 'name',
                    email: 'email',
                    tax_no: 'tax_no',
                    @if (request()->session()->get('business.district') == '1')
                        district_name: 'district_name',
                        district_code: 'district_code',
                    @endif

                    credit_limit: 'credit_limit',
                    pay_term: 'pay_term',
                    advance_balance: 'advance_balance',
                    added_on: 'added_on',
                    customer_group: 'customer_group',
                    address: 'address',
                    mobile: 'mobile',

                },
                {
                    action: 'edit',
                    contact_id: 'C0001',

                    name: 'name',
                    email: 'email',
                    tax_no: 'tax_no',
                    @if (request()->session()->get('business.district') == '1')
                        district_name: 'district_name',
                        district_code: 'district_code',
                    @endif

                    credit_limit: 'credit_limit',
                    pay_term: 'pay_term',
                    advance_balance: 'advance_balance',
                    added_on: 'added_on',
                    customer_group: 'customer_group',
                    address: 'address',
                    mobile: 'mobile',

                },
                {
                    action: 'edit',
                    contact_id: 'C0001',

                    name: 'name',
                    email: 'email',
                    tax_no: 'tax_no',
                    @if (request()->session()->get('business.district') == '1')
                        district_name: 'district_name',
                        district_code: 'district_code',
                    @endif

                    credit_limit: 'credit_limit',
                    pay_term: 'pay_term',
                    advance_balance: 'advance_balance',
                    added_on: 'added_on',
                    customer_group: 'customer_group',
                    address: 'address',
                    mobile: 'mobile',

                },
            ];



            // Load clients data
            let currentPage = 1;
            const perPage = 8000;
            let totalPages = 1;
            let totalRecords = 0;

            function loadClients(page = 1) {
                $('#loading').show();
                $('#clientsTable').hide();

                $.ajax({
                    url: "/contacts/bb", // 👈 route to indexTest()
                    type: "GET",
                    data: {
                        page: page,
                        per_page: perPage,
                        type: 'test', // 👈 YOU ASKED FOR THIS
                        search: $('#clientSearch').val(),
                        has_advance_balance: $('#has_advance_balance').is(':checked') ? 1 : 0,
                        customer_group_id: $('#cg_filter').val(),
                        district_id: $('#district_id').val(),
                        assigned_to: $('#assigned_to').val(),
                        contact_status: $('#status_filter').val()
                    },
                    success: function(response) {
                        $('#loading').hide();
                        $('#clientsTable').show();

                        currentPage = response.current_page;
                        totalPages = response.last_page;
                        totalRecords = response.total;

                        populateTable(response.data);
                        updatePagination();
                    },
                    error: function() {
                        $('#loading').hide();
                        alert('Failed to load data');
                    }
                });
            }

            // Populate table with data
            function populateTable(data) {
                const tbody = $('#tableBody');
                tbody.empty();

                $.each(data, function(index, client) {

                    let districtColumns = '';
                    if (hasDistrict) {
                        districtColumns = `
                <td>${client.district_name ?? ''}</td>
                <td>${client.district_code ?? ''}</td>
            `;
                    }

                    const row = `
            <tr>
                <td>
                    <a href="/contacts/${client.id}/edit" class="btn btn-primary">Edit</a>
                </td>
                <td>${client.contact_id ?? ''}</td>
                
                <td>${client.name ?? ''}</td>
                <td>${client.email ?? ''}</td>
                <td>${client.tax_no ?? ''}</td>
                ${districtColumns}
                <td>${client.credit_limit ?? ''}</td>
                <td>${client.pay_term ?? ''}</td>
                <td><span class="display_currency">${client.opening_balance ?? ''}</span></td>
                <td>${client.advance_balance ?? ''}</td>
                <td>${client.added_on ?? ''}</td>
                <td>${client.customer_group ?? ''}</td>
                <td>${client.address ?? ''}</td>
                <td>${client.mobile ?? ''}</td>
                <td><span class="display_currency">${client.due ?? ''}</span></td>
                <td><span class="display_currency">${client.return_due ?? ''}</span></td>
            </tr>
        `;

                    tbody.append(row);
                });
            }

            // Update pagination controls
            function updatePagination() {
                // Update info text
                const startRecord = totalRecords > 0 ? (currentPage - 1) * perPage + 1 : 0;
                const endRecord = Math.min(currentPage * perPage, totalRecords);
                $('#paginationInfo').text(`Showing ${startRecord} to ${endRecord} of ${totalRecords} entries`);

                // Generate pagination buttons
                const controls = $('#paginationControls');
                controls.empty();

                // First button
                controls.append(`<button id="btnFirst" ${currentPage === 1 ? 'disabled' : ''}>First</button>`);

                // Previous button
                controls.append(`<button id="btnPrev" ${currentPage === 1 ? 'disabled' : ''}>Previous</button>`);

                // Page number buttons
                const maxVisible = 5;
                let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
                let endPage = Math.min(totalPages, startPage + maxVisible - 1);

                if (endPage - startPage < maxVisible - 1) {
                    startPage = Math.max(1, endPage - maxVisible + 1);
                }

                for (let i = startPage; i <= endPage; i++) {
                    const activeClass = currentPage === i ? 'active' : '';
                    controls.append(`<button class="page-btn ${activeClass}" data-page="${i}">${i}</button>`);
                }

                // Next button
                controls.append(
                    `<button id="btnNext" ${currentPage === totalPages ? 'disabled' : ''}>Next</button>`);

                // Last button
                controls.append(
                    `<button id="btnLast" ${currentPage === totalPages ? 'disabled' : ''}>Last</button>`);

                // Attach event handlers
                $('#btnFirst').click(function() {
                    goToPage(1);
                });

                $('#btnPrev').click(function() {
                    goToPage(currentPage - 1);
                });

                $('#btnNext').click(function() {
                    goToPage(currentPage + 1);
                });

                $('#btnLast').click(function() {
                    goToPage(totalPages);
                });

                $('.page-btn').click(function() {
                    const page = parseInt($(this).data('page'));
                    goToPage(page);
                });
            }

            // Navigate to specific page
            function goToPage(page) {
                if (page >= 1 && page <= totalPages) {
                    loadClients(page);
                }
            }

            // Initial load
            loadClients(1);
            $('#has_advance_balance, #cg_filter, #district_id, #assigned_to, #status_filter')
                .on('change', function() {
                    loadClients(1); // reset to page 1
                });
            let searchTimer = null;

            $('#clientSearch').on('keyup', function() {
                clearTimeout(searchTimer);

                searchTimer = setTimeout(function() {
                    loadClients(1); // reset page
                }, 300); // debounce
            });
            $('#refreshTable').on('click', function() {
    loadClients(1); // reload first page
});
        });
    </script>

@endsection