@extends('layouts.super_admin')

@section('title', 'Sales Management')

@section('content')
<!-- Stats Cards Row -->
<div class="row g-3 mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-people"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalSales }}</div>
                <div class="stat-label">Total Sales</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon success">
                    <i class="bi bi-wallet2"></i>
                </div>
            </div>
            <div class="stat-info">
                @php
                // Taruh di mana aja, misal AppServiceProvider atau Helper file
                function formatCurrency($number) {
                    if ($number >= 1_000_000_000) {
                        return 'Rp ' . number_format($number / 1_000_000_000, 1, ',', '.') . 'B';
                    } elseif ($number >= 1_000_000) {
                        return 'Rp ' . number_format($number / 1_000_000, 1, ',', '.') . 'M';
                    }
                    
                    return 'Rp ' . number_format($number, 0, ',', '.');
                }
                @endphp
                <div class="stat-value">{{ formatCurrency($totalCommission) }}</div>
                <div class="stat-label">Total Komisi</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-building"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalLBBs }}</div>
                <div class="stat-label">LBB Ditangani</div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-image">
                <div class="stat-icon info">
                    <i class="bi bi-percent"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ number_format($averageFee, 1) }}%</div>
                <div class="stat-label">Rata-rata Fee</div>
            </div>
        </div>
    </div>
</div>

<!-- Sales Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <i class="bi bi-people me-2"></i>
            Daftar Sales
            <span class="badge badge-info ms-2">{{ $salesUsers->total() }}</span>
        </div>
        <button class="btn btn-success" onclick="openModal('create')">
            <i class="bi bi-plus-lg me-1"></i>
            Tambah Sales
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th style="width: 80px;">No</th>
                        <th>Sales</th>
                        <th>Fee %</th>
                        <th>Komisi</th>
                        <th>Jumlah LBB</th>
                        <th>Status</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                        @if($salesUsers->count() > 0)
                        @foreach($salesUsers as $sales)
                        @php
                            $userName = $sales->user->name ?? '-';
                            $userPhone = $sales->user->phone ?? '-';
                            $userEmail = $sales->user->email ?? '-';
                            $feePercentage = $sales->fee_percentage;
                            $commission = $sales->commission_balance;
                            $salesStatus = $sales->status;
                            $lbbCount = $sales->lbb_count;
                        @endphp
                        <tr>
                            <td>
                                {{ $loop->iteration }}
                                <!-- <div class="user-avatar" style="width: 45px; height: 45px; font-size: 1rem;">
                                </div> -->
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="user-avatar" style="width: 45px; height: 45px; font-size: 1rem;">
                                        {{ strtoupper(substr($userName, 0, 2)) }}
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ $userName }}</div>
                                        <div class="text-muted small">{{ $userPhone }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="fw-bold text-primary">{{ number_format($feePercentage, 1) }}%</div>
                            </td>
                            <td>
                                <div class="money-display">Rp {{ number_format($commission, 0, ',', '.') }}</div>
                            </td>
                            <td>
                                <div class="fw-bold">{{ $lbbCount }}</div>
                            </td>
                            <td>
                                @if($salesStatus === 'active')
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-danger">Inactive</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary" onclick="openModal('edit', {{ $sales->id }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    @if($sales->status === 'active')
                                        <button class="btn btn-sm btn-warning" onclick="confirmStatusUpdate('{{ route('super-admin.sales.update-status', $sales->id) }}', 'inactive')">
                                            <i class="bi bi-pause-circle"></i>
                                        </button>
                                    @else
                                        <button class="btn btn-sm btn-success" onclick="confirmStatusUpdate('{{ route('super-admin.sales.update-status', $sales->id) }}', 'active')">
                                            <i class="bi bi-play-circle"></i>
                                        </button>
                                    @endif
                                    <button class="btn btn-sm btn-danger" onclick="confirmDelete('{{ route('super-admin.sales.destroy', $sales->id) }}', '{{ $userName }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <i class="bi bi-inbox fs-1 text-muted"></i>
                                <p class="text-muted mt-3">Tidak ada data Sales</p>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    <!-- Pagination -->
    <div class="card-footer d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <span class="me-2">Tampilkan:</span>
            <select class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                <option value="10" {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>10</option>
                <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
            </select>
            <span class="ms-2">per halaman</span>
        </div>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                @if($salesUsers->onFirstPage())
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                    </li>
                @else
                    <li class="page-item">
                        <a class="page-link" href="{{ $salesUsers->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                    </li>
                @endif
                
                @foreach($salesUsers->getUrlRange(1, $salesUsers->lastPage()) as $page => $url)
                    @if($page == $salesUsers->currentPage())
                        <li class="page-item active">
                            <span class="page-link">{{ $page }}</span>
                        </li>
                    @elseif($page == 1 || $page == $salesUsers->lastPage() || ($page >= $salesUsers->currentPage() - 1 && $page <= $salesUsers->currentPage() + 1))
                        <li class="page-item">
                            <a class="page-link" href="{{ $salesUsers->appends(request()->query())->url($page) }}">{{ $page }}</a>
                        </li>
                    @elseif($page == $salesUsers->currentPage() - 2 || $page == $salesUsers->currentPage() + 2)
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    @endif
                @endforeach

                @if($salesUsers->hasMorePages())
                    <li class="page-item">
                        <a class="page-link" href="{{ $salesUsers->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                    </li>
                @else
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                    </li>
                @endif
            </ul>
        </nav>
    </div>
</div>

<!-- Create/Edit Modal -->
<div class="modal fade" id="formModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formModalTitle">
                    <i class="bi bi-people me-2"></i>
                    <span id="modalTitleText">Tambah Sales</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="salesForm" method="POST" action="{{ route('super-admin.sales.store') }}">
                    @csrf
                    <input type="hidden" name="_method" id="methodInput" value="POST">
                    <input type="hidden" id="salesId" name="sales_id" value="">
                    <div class="row g-4">
                        <!-- Sales Information -->
                        <div class="col-12">
                            <h6 class="mb-3 text-primary fw-bold">
                                <i class="bi bi-person me-2"></i>
                                Informasi Sales
                            </h6>

                            <div class="col-12 mb-3">
                                <label class="form-label">Nama Sales <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="salesName" class="form-control" required placeholder="Contoh: Budi Santoso" value="{{ old('name') }}">
                                <div class="invalid-feedback" id="nameError"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="salesEmail" class="form-control" required placeholder="Contoh: budi@sales.com" value="{{ old('email') }}">
                                <div class="invalid-feedback" id="emailError"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">No HP <span class="text-danger">*</span></label>
                                <input type="tel" name="phone" id="salesPhone" class="form-control" required placeholder="Contoh: 081234567890" value="{{ old('phone') }}">
                                <div class="invalid-feedback" id="phoneError"></div>
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Fee (%) <span class="text-danger">*</span></label>
                                <input type="number" name="fee_percentage" id="feePercentage" class="form-control" required min="0" max="100" step="0.1" placeholder="Contoh: 15" value="{{ old('fee_percentage') }}">
                                <div class="form-text">Persentase komisi dari setiap transaksi token</div>
                            </div>

                            <div class="col-12 mb-3" id="passwordField">
                                <label class="form-label">Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" name="password" id="salesPassword" class="form-control" placeholder="Masukkan password" value="{{ old('password') }}">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('salesPassword')">
                                        <i class="bi bi-eye" id="salesPasswordIcon"></i>
                                    </button>
                                </div>
                                <div class="form-text">Minimal 6 karakter</div>
                            </div>

                            <div class="col-12 mb-3" id="statusField" style="display: none;">
                                <label class="form-label">Status</label>
                                <select name="status" id="salesStatus" class="form-select">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
                
                <!-- Info Box -->
                <div class="card bg-light mt-4 mb-0">
                    <div class="card-body">
                        <h6 class="mb-3 fw-bold">
                            <i class="bi bi-info-circle me-2 text-primary"></i>
                            Informasi Tambahan
                        </h6>
                        <ul class="mb-0">
                            <li class="mb-2">
                                <strong>Komisi Sales:</strong> Dihitung dari total token yang di-inject ke LBB yang ditangani.
                            </li>
                            <li class="mb-2">
                                <strong>Password Default:</strong> Password minimal 6 karakter untuk keamanan.
                            </li>
                            <li class="mb-0">
                                <strong>Status:</strong> Sales dengan status Active dapat menangani LBB dan menerima komisi.
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i>
                    Batal
                </button>
                <button type="button" class="btn btn-primary" onclick="submitSalesForm()">
                    <i class="bi bi-check-lg me-1"></i>
                    Simpan Sales
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Filter Form (Hidden) -->
<form id="filterForm" method="GET" action="{{ route('super-admin.sales.index') }}" style="display: none;">
    @csrf
    <input type="hidden" name="per_page" id="filterPerPage">
</form>

<script>
function changePerPage(perPage) {
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.set('per_page', perPage);
    if (urlParams.has('page')) {
        urlParams.delete('page');
    }
    const newUrl = window.location.pathname + '?' + urlParams.toString();
    window.location.href = newUrl;
}

// Store Sales data for editing
let salesData = {};
@foreach($salesUsers as $sales)
salesData[{{ $sales->id }}] = {
    id: {{ $sales->id }},
    name: '{{ $sales->user->name ?? '' }}',
    email: '{{ $sales->user->email ?? '' }}',
    phone: '{{ $sales->user->phone ?? '' }}',
    fee_percentage: {{ $sales->fee_percentage }},
    status: '{{ $sales->status }}'
};
@endforeach

// Open modal for create or edit
function openModal(mode, salesId = null) {
    const modal = new bootstrap.Modal(document.getElementById('formModal'));
    const form = document.getElementById('salesForm');
    
    if (mode === 'create') {
        document.getElementById('modalTitleText').textContent = 'Tambah Sales';
        document.getElementById('salesForm').action = '{{ route('super-admin.sales.store') }}';
        document.getElementById('salesId').value = '';
        document.getElementById('methodInput').value = 'POST';
        form.reset();
        document.getElementById('passwordField').style.display = 'block';
        document.getElementById('statusField').style.display = 'none';
        document.getElementById('salesPassword').required = true;
    } else if (mode === 'edit' && salesId && salesData[salesId]) {
        document.getElementById('modalTitleText').textContent = 'Edit Sales';
        const updateUrl = '{{ route('super-admin.sales.update', ['id' => '__ID__']) }}';
        document.getElementById('salesForm').action = updateUrl.replace('__ID__', salesId);
        document.getElementById('salesId').value = salesId;
        document.getElementById('methodInput').value = 'PUT';
        
        const data = salesData[salesId];
        document.getElementById('salesName').value = data.name;
        document.getElementById('salesEmail').value = data.email;
        document.getElementById('salesPhone').value = data.phone;
        document.getElementById('feePercentage').value = data.fee_percentage;
        document.getElementById('salesStatus').value = data.status;
        
        // Hide password field in edit mode
        document.getElementById('passwordField').style.display = 'none';
        document.getElementById('salesPassword').required = false;
        document.getElementById('statusField').style.display = 'block';
    }
    
    modal.show();
}

// Submit Sales form
function submitSalesForm() {
    const form = document.getElementById('salesForm');
    
    // Simple validation
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const salesName = document.getElementById('salesName').value;
    const salesId = document.getElementById('salesId').value;
    
    // Check if it's create or edit mode
    if (salesId) {
        // Edit mode - use update
        AppAlert.update(
            'Update Sales?',
            `Apakah Anda yakin ingin mengupdate data Sales ${salesName}?`,
            () => form.submit()
        );
    } else {
        // Create mode - use create
        AppAlert.create(
            'Tambah Sales Baru?',
            `Apakah Anda yakin ingin menambahkan Sales ${salesName}?`,
            () => form.submit()
        );
    }
}

// Confirm status update with AppAlert
function confirmStatusUpdate(url, newStatus) {
    let title = '';
    let text = '';
    
    if (newStatus === 'inactive') {
        title = 'Nonaktifkan Sales?';
        text = 'Sales ini tidak akan bisa menangani LBB setelah dinonaktifkan.';
    } else {
        title = 'Aktifkan Sales?';
        text = 'Sales ini akan dapat menangani LBB kembali setelah diaktifkan.';
    }
    
    AppAlert.update(title, text, function() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
        
        const statusInput = document.createElement('input');
        statusInput.type = 'hidden';
        statusInput.name = 'status';
        statusInput.value = newStatus;
        form.appendChild(statusInput);
        
        document.body.appendChild(form);
        form.submit();
    });
}

// Confirm delete with AppAlert
function confirmDelete(url, name) {
    AppAlert.delete(
        'Hapus Sales?',
        `Apakah Anda yakin ingin menghapus Sales ${name}? Tindakan ini tidak dapat dibatalkan.`,
        function() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    );
}

// Toggle password visibility
function togglePassword(fieldId) {
    const input = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + 'Icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    }
}
</script>
@endsection