@extends('front.layouts.main')

@section('title', 'Customers')

@push('pageCss')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<style>
/* Custom table row colors for lead timeline */
.products-table tbody tr.table-success {
    background-color: #DDF1E1 !important;
    border-left: 4px solid #28a745;
}

.products-table tbody tr.table-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-left: 4px solid #ffc107;
}

.products-table tbody tr.table-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-left: 4px solid #dc3545;
}

/* Badge styling */
.badge {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 12px;
}

.badge-success {
    background-color: #28a745;
    color: white;
}

.badge-danger {
    background-color: #dc3545;
    color: white;
}

.badge-secondary {
    background-color: #6c757d;
    color: white;
}

/* Filter button styling */
.btn-filter {
    position: relative;
}

.btn-filter.has-filters::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
}

/* Color legend styling */
.color-legend {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.color-legend h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 10px;
}

.legend-item {
    font-size: 0.875rem;
    color: #6c757d;
}

.legend-color {
    border-radius: 4px;
}

@media (max-width: 768px) {
    .color-legend .d-flex {
        flex-direction: column;
        gap: 10px !important;
    }
}
</style>
@endpush

@section('content')
<main class="products-page-container">
    <div class="products-card">
        {{-- Header --}}
        <div class="card-header-bar">
            <h2>Customers</h2>
            <div class="d-flex align-items-center" style="gap: 1rem;">
                <button type="button"
                    class="btn-filter {{ request('customer_type') || request('full_name') || request('registered_company_name') || request('client') || request('tin') ? 'has-filters' : '' }}"
                    data-bs-toggle="modal" data-bs-target="#filter">
                    <i class="fa-solid fa-filter"></i>
                    <span>{{ request('customer_type') || request('tin') ? 'Edit Filter' : 'Filter' }}</span>
                </button>
                {{-- <a href="{{ route('kua-agent-customer.create') }}" class="btn  btn-primary-em">
                    <i class="fa-solid fa-plus"></i>
                    Add Customer
                </a> --}}
            </div>
        </div>

        {{-- Search and Pagination Form --}}
        <form action="{{ url()->current() }}" method="GET" id="main-form">
            <div class="controls-bar">
                <div class="search-input-wrapper">
                    <i class="fa-solid fa-search"></i>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Search by name, tin, or email">
                </div>

                <div class="pagination-controls">
                    <div class="record-per-page">
                        <label for="per_page">Record Per Page</label>
                        <select name="per_page" id="per_page" onchange="this.form.submit()">
                            <option value="10" @if (request('per_page', 10)==10) selected @endif>10</option>
                            <option value="25" @if (request('per_page')==25) selected @endif>25</option>
                            <option value="50" @if (request('per_page')==50) selected @endif>50</option>
                            <option value="100" @if (request('per_page')==100) selected @endif>100</option>
                        </select>
                    </div>
                    {{-- THIS IS THE CORRECTION: Use total() for paginated collections --}}
                    <span>Total {{ $customers->total() }}</span>

                    <nav class="pagination-nav">
                        <a href="{{ $customers->previousPageUrl() }}"
                            class="{{ $customers->onFirstPage() ? 'disabled' : '' }}"><i
                                class="fa-solid fa-arrow-left"></i></a>
                        <span class="page-number active">{{ $customers->currentPage() }}</span>
                        <a href="{{ $customers->nextPageUrl() }}"
                            class="{{ !$customers->hasMorePages() ? 'disabled' : '' }}"><i
                                class="fa-solid fa-arrow-right"></i></a>
                    </nav>
                </div>
            </div>
        </form>

        {{-- Customers Table --}}
        @if ($customers->count() > 0)
        <div id="customers-table-container">
            <table class="products-table">
                <thead>
                    <tr>
                        @php
                        $currentSort = request('sort_by');
                        $currentOrder = request('order') === 'asc' ? 'desc' : 'asc';
                        @endphp
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => $currentSort == 'full_name' ? 'registered_company_name' : 'full_name', 'order' => $currentSort == 'full_name' || $currentSort == 'registered_company_name' ? $currentOrder : 'asc']) }}">
                                Name
                                @if ($currentSort === 'full_name' || $currentSort === 'registered_company_name')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'customer_type', 'order' => $currentSort == 'customer_type' ? $currentOrder : 'asc']) }}">
                                Customer Type
                                @if ($currentSort === 'customer_type')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'client', 'order' => $currentSort == 'client' ? $currentOrder : 'asc']) }}">
                                Client
                                @if ($currentSort === 'client')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'product_name', 'order' => $currentSort == 'product_name' ? $currentOrder : 'asc']) }}">
                                Product
                                @if ($currentSort === 'product_name')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'created_at', 'order' => $currentSort == 'created_at' ? $currentOrder : 'asc']) }}">
                                Added on
                                @if ($currentSort === 'created_at')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>

                        <th>
                            <a
                                href="{{ request()->fullUrlWithQuery(['sort_by' => 'action', 'order' => $currentSort == 'action' ? $currentOrder : 'asc']) }}">
                                Action
                                @if ($currentSort === 'action')
                                <i class="fa-solid fa-sort-{{ request('order') === 'asc' ? 'up' : 'down' }}"></i>
                                @else
                                <i class="fa-solid fa-sort"></i>
                                @endif
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>

                    {{-- @dd($customers) --}}
                    @foreach ($customers as $customer)
                    {{-- @dd($customer->kuaClient->name) --}}
                    <tr>
                        <td>{{ $customer->full_name ? $customer->full_name : $customer->registered_company_name ?? 'N/A' }}
                        </td>
                        <td>{{ $customer->customer_type ?? 'N/A' }}</td>
                        <td>{{ $customer->kuaClient->name ?? 'N/A' }}</td>
                        <td>{{ $customer->kuaProduct->product_name ?? 'N/A' }}</td>
                        <td>{{ \Carbon\Carbon::parse($customer->created_at)->format('d M Y') ?? 'N/A' }}</td>
                        <td>


                            <a href="{{ route('kua-agent-customer.show', $customer->id) }}"
                                class="btn  btn-primary-em action-icon me-10">
                                <i class="material-icons">visibility</i>
                            </a>
                            <a href="{{ route('kua-agent-customer.edit', $customer->id) }}" title="Edit"
                                class="btn btn-primary-em edit-btn action-icon">
                                <i class="material-icons">edit</i>
                            </a>
                        </td>
                    </tr>
                    @endforeach

                </tbody>
            </table>
        </div>
        @else
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning" role="alert">
                    {{ 'No Records to show' }}
                </div>
            </div>
        </div>
        @endif


        {{-- <div class="modal right filter-modal" id="filter" tabindex="-1" role="dialog" aria-labelledby="filter">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="filter">Kua Agent Customer Filter</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>

                    <form id="filter-form" method="GET" action="{{ route('kua-agent-customer.index') }}">
                        <div class="modal-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <input type="hidden" name="per_page" value="{{ request('per_page') }}">
                                    <div class="col-md-12">
                                        <div class="form-group  select">
                                            <label class="control-label">Select Customer Type</label>
                                            <select id="customer_type" name="customer_type"
                                                class="form-control select-two">
                                                <option value="">Show All</option>
                                                <option value="individual"
                                                    {{ request('customer_type') == 'individual' ? 'selected' : '' }}>
                                                    Individual</option>
                                                <option value="business"
                                                    {{ request('customer_type') == 'business' ? 'selected' : '' }}>
                                                    Business</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group  select">
                                            <label class="control-label">Select Tin</label>
                                            <select id="tin" name="tin" class="form-control select-two">
                                                <option value="">Show All</option>
                                                @foreach ($customers as $customer)
                                                <option value="{{ $customer->tin }}">{{ $customer->tin }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer d-flex justify-content-between">
                            <button type="submit" class="btn btn-em">Filter</button>
                            <button type="button" class="btn btn-em" id="reset-all-filter"
                                onclick="window.location.href = '{{ route('kua-agent-customer.index') }}'">Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div> --}}
    </div>

</main>

@endsection
@push('pageJs')
<script>
$(document).ready(function() {
    // Update filter button text when form changes
    // $('#filter-form select, #filter-form input').on('change', function() {
    //     var hasFilters = false;
    //     $('#filter-form select, #filter-form input').each(function() {
    //         if ($(this).val() && $(this).val() !== '') {
    //             hasFilters = true;
    //             return false;
    //         }
    //     });

    //     var $filterBtn = $('.btn-filter span');
    //     var $filterBtnContainer = $('.btn-filter');

    //     if (hasFilters) {
    //         $filterBtn.text('Edit Filter');
    //         $filterBtnContainer.addClass('has-filters');
    //     } else {
    //         $filterBtn.text('Filter');
    //         $filterBtnContainer.removeClass('has-filters');
    //     }
    // });
    $('input[name="search"]').on('keyup', function() {
        $(this).closest('form').submit();
    });

    // $('.btn-filter').on('click', function(e) {
    //     e.preventDefault();
    //     $('#filter').modal('show');
    // });
});
</script>
@endpush