@extends('layouts.super_admin')

@section('title', 'Manajemen LBB')

@section('content')
<!-- Page Header -->
<div class="page-header">
    <h1 class="page-title">Manajemen LBB</h1>
    <p class="page-subtitle">Kelola semua Lembaga Bimbingan Belajar yang terdaftar di platform</p>
</div>

<!-- Search & Filter -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('super-admin.lbb.index') }}" id="filterForm">
            <div class="row g-3 align-items-end">
                <div class="col-lg-4">
                    <label class="form-label">Cari LBB</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" name="search" class="form-control form-control-lg" placeholder="Masukkan nama LBB..." value="{{ request()->query('search') }}">
                    </div>
                </div>
                <div class="col-lg-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select form-select-lg">
                        <option value="">Semua Status</option>
                        @foreach($statusList as $status)
                            <option value="{{ $status }}" {{ request()->query('status') === $status ? 'selected' : '' }}>
                                {{ ucfirst($status) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3">
                    <label class="form-label">Sales</label>
                    <select name="sales_id" class="form-select form-select-lg">
                        <option value="">Semua Sales</option>
                        @foreach($salesList as $sales)
                            <option value="{{ $sales->id }}" {{ request()->query('sales_id') == $sales->id ? 'selected' : '' }}>
                                {{ $sales->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2">
                    <button type="submit" class="btn btn-primary btn-lg w-100">
                        <i class="bi bi-search me-2"></i>
                        Search
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- LBB Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <i class="bi bi-building me-2"></i>
            Daftar LBB
            <span class="badge badge-info ms-2">{{ $lbbs->total() }}</span>
        </div>
        <button class="btn btn-success" onclick="openModal('create')">
            <i class="bi bi-plus-lg me-1"></i>
            Tambah LBB
        </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>Nama LBB</th>
                        <th>Sales</th>
                        <th>Token Balance</th>
                        <th>Status</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @if($lbbs->count() > 0)
                        @foreach($lbbs as $lbb)
                        <tr>
                            <td>
                                {{ $loop->iteration }}
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    @if($lbb->logo_url)
                                        <img src="{{ $lbb->logo_url }}" alt="{{ $lbb->name }}" class="rounded" style="width: 50px; height: 50px; object-fit: cover; border: 2px solid #dee2e6;">
                                    @else
                                        <div class="d-flex align-items-center justify-content-center rounded bg-light text-muted" style="width: 50px; height: 50px; border: 2px solid #dee2e6; font-size: 1.2rem; font-weight: bold;">
                                            {{ strtoupper(substr($lbb->name, 0, 2)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <div class="fw-bold">{{ $lbb->name }}</div>
                                        <div class="text-muted small">{{ $lbb->address ? $lbb->address->city : 'Indonesia' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $lbb->sales ? $lbb->sales->name : '-' }}</td>
                            <td>
                                <div class="fw-bold {{ $lbb->token_balance > 1000 ? 'text-success' : ($lbb->token_balance > 0 ? 'text-warning' : 'text-danger') }}">
                                    {{ number_format($lbb->token_balance) }}
                                </div>
                                <div class="text-muted small">tokens</div>
                            </td>
                            <td>
                                @switch($lbb->status)
                                    @case('active')
                                        <span class="badge badge-success">Active</span>
                                        @break
                                    @case('suspended')
                                        <span class="badge badge-danger">Suspended</span>
                                        @break
                                    @case('pending')
                                        <span class="badge badge-warning">Pending</span>
                                        @break
                                    @default
                                        <span class="badge badge-secondary">{{ ucfirst($lbb->status) }}</span>
                                @endswitch
                            </td>
                            <td class="text-end">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary" onclick="openModal('edit', {{ $lbb->id }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    @if($lbb->status === 'active')
                                        <button class="btn btn-sm btn-warning" onclick="confirmStatusUpdate('{{ route('super-admin.lbb.update-status', $lbb->id) }}', 'suspended')">
                                            <i class="bi bi-pause-circle"></i>
                                        </button>
                                    @elseif($lbb->status === 'pending')
                                        <button class="btn btn-sm btn-success" onclick="confirmStatusUpdate('{{ route('super-admin.lbb.update-status', $lbb->id) }}', 'active')">
                                            <i class="bi bi-check-circle"></i>
                                        </button>
                                    @else
                                        <button class="btn btn-sm btn-success" onclick="confirmStatusUpdate('{{ route('super-admin.lbb.update-status', $lbb->id) }}', 'active')">
                                            <i class="bi bi-play-circle"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <i class="bi bi-inbox fs-1 text-muted"></i>
                                <p class="text-muted mt-3">Tidak ada data LBB</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($lbbs->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="{{ $lbbs->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                    </li>
                @endif
                
                @foreach($lbbs->getUrlRange(1, $lbbs->lastPage()) as $page => $url)
                    @if($page == $lbbs->currentPage())
                        <li class="page-item active">
                            <span class="page-link">{{ $page }}</span>
                        </li>
                    @elseif($page == 1 || $page == $lbbs->lastPage() || ($page >= $lbbs->currentPage() - 1 && $page <= $lbbs->currentPage() + 1))
                        <li class="page-item">
                            <a class="page-link" href="{{ $lbbs->appends(request()->query())->url($page) }}">{{ $page }}</a>
                        </li>
                    @elseif($page == $lbbs->currentPage() - 2 || $page == $lbbs->currentPage() + 2)
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    @endif
                @endforeach

                @if($lbbs->hasMorePages())
                    <li class="page-item">
                        <a class="page-link" href="{{ $lbbs->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-building me-2"></i>
                    <span id="modalTitleText">Tambah LBB</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="lbbForm" method="POST" action="{{ route('super-admin.lbb.store') }}">
                    @csrf
                    <input type="hidden" name="_method" id="methodInput" value="POST">
                    <input type="hidden" id="lbbId" name="lbb_id" value="">
                    <div class="row g-4">
                        <!-- LBB Information -->
                        <div class="col-12">
                            <h6 class="mb-3 text-primary fw-bold">
                                <i class="bi bi-building me-2"></i>
                                Informasi LBB
                            </h6>

                            <div class="row g-3">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Nama LBB <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="lbbName" class="form-control" required placeholder="Contoh: Bimbel Tugas" value="{{ old('name') }}">
                                    <div class="invalid-feedback" id="nameError"></div>
                                </div>
                                
                                <div class="col-6 mb-3">
                                    <label class="form-label">Domain LBB <span class="text-danger">*</span></label>
                                    <input type="text" name="subdomain" id="lbbsubdomain" class="form-control" required placeholder="Contoh: bimbeltugas" value="{{ old('subdomain') }}">
                                    <div class="invalid-feedback" id="subdomainError"></div>
                                </div>

                                <div class="col-6 mb-3">
                                    <label class="form-label">Sales <span class="text-danger">*</span></label>
                                    <select name="sales_id" id="salesId" class="form-select" required style="padding:0.75rem 1rem;">
                                        <option value="">Pilih Sales</option>
                                        @foreach($salesList as $sales)
                                            <option value="{{ $sales->id }}" {{ old('sales_id') == $sales->id ? 'selected' : '' }}>
                                                {{ $sales->user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-6 mb-3">
                                    <label class="form-label">Token Awal <span class="text-danger">*</span></label>
                                    <input type="number" name="initial_tokens" id="initialTokens" class="form-control" required min="0" placeholder="Contoh: 100" value="{{ old('initial_tokens') }}">
                                </div>
                            </div>
                        </div>

                        <!-- Admin Information -->
                        <div class="col-6">
                            <h6 class="mb-3 text-primary fw-bold">
                                <i class="bi bi-person me-2"></i>
                                Informasi Admin LBB
                            </h6>
                        
                            <div class="col-12 mb-3">
                                <label class="form-label">Nama Admin <span class="text-danger">*</span></label>
                                <input type="text" name="admin_name" id="adminName" class="form-control" required placeholder="Contoh: Ahmad Yasin" value="{{ old('admin_name') }}">
                                <div class="invalid-feedback" id="adminNameError"></div>
                            </div>

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

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

                        <!-- Address Information -->
                        <div class="col-6">
                            <h6 class="mb-3 text-primary fw-bold">
                                <i class="bi bi-geo-alt me-2"></i>
                                Alamat LBB
                            </h6>

                            <div class="col-12 mb-3">
                                <label class="form-label">Alamat Jalan</label>
                                <input type="text" name="street_address" id="streetAddress" class="form-control" placeholder="Contoh: Jl. Sudirman No. 123" value="{{ old('street_address') }}">
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Kota</label>
                                <input type="text" name="city" id="city" class="form-control" placeholder="Contoh: Jakarta Selatan" value="{{ old('city') }}">
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Provinsi</label>
                                <input type="text" name="province" id="province" class="form-control" placeholder="Contoh: DKI Jakarta" value="{{ old('province') }}">
                            </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>Sistem Token:</strong> Setiap ujian akan mengkonsumsi 1 token per siswa.
                            </li>
                            <li class="mb-2">
                                <strong>Free Trial:</strong> LBB baru akan mendapatkan free trial selama 30 hari.
                            </li>
                            <li class="mb-0">
                                <strong>Password Default:</strong> Password default untuk admin LBB adalah <code>password123</code>.
                            </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="submitLbbForm()">
                    <i class="bi bi-check-lg me-1"></i>
                    Simpan LBB
                </button>
            </div>
        </div>
    </div>
</div>

<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 LBB data for editing
let lbbData = {};
@foreach($lbbs as $lbb)
lbbData[{{ $lbb->id }}] = {
    id: {{ $lbb->id }},
    name: '{{ $lbb->name }}',
    subdomain: '{{ $lbb->subdomain }}',
    admin_name: '{{ $lbb->adminUser ? $lbb->adminUser->name : '' }}',
    admin_email: '{{ $lbb->adminUser ? $lbb->adminUser->email : '' }}',
    admin_phone: '{{ $lbb->adminUser ? $lbb->adminUser->phone : '' }}',
    sales_id: {{ $lbb->sales_id }},
    token_balance: {{ $lbb->token_balance }},
    street_address: '{{ $lbb->address ? $lbb->address->street_address : '' }}',
    city: '{{ $lbb->address ? $lbb->address->city : '' }}',
    province: '{{ $lbb->address ? $lbb->address->province : '' }}',
};
@endforeach

// Open modal for create or edit
function openModal(mode, lbbId = null) {
    const modal = new bootstrap.Modal(document.getElementById('formModal'));
    const form = document.getElementById('lbbForm');
    
    if (mode === 'create') {
        document.getElementById('modalTitleText').textContent = 'Tambah LBB';
        document.getElementById('lbbForm').action = '{{ route('super-admin.lbb.store') }}';
        document.getElementById('lbbId').value = '';
        document.getElementById('methodInput').value = 'POST';
        form.reset();
    } else if (mode === 'edit' && lbbId && lbbData[lbbId]) {
        document.getElementById('modalTitleText').textContent = 'Edit LBB';
        const updateUrl = '{{ route('super-admin.lbb.update', ['id' => '__ID__']) }}';
        document.getElementById('lbbForm').action = updateUrl.replace('__ID__', lbbId);
        document.getElementById('lbbId').value = lbbId;
        document.getElementById('methodInput').value = 'PUT';
        
        const data = lbbData[lbbId];
        document.getElementById('lbbName').value = data.name;
        document.getElementById('lbbsubdomain').value = data.subdomain;
        document.getElementById('adminName').value = data.admin_name;
        document.getElementById('adminEmail').value = data.admin_email;
        document.getElementById('adminPhone').value = data.admin_phone;
        document.getElementById('salesId').value = data.sales_id;
        document.getElementById('initialTokens').value = data.token_balance;
        document.getElementById('streetAddress').value = data.street_address || '';
        document.getElementById('city').value = data.city || '';
        document.getElementById('province').value = data.province || '';
    }
    
    modal.show();
}

// Submit LBB form
function submitLbbForm() {
    const form = document.getElementById('lbbForm');
    
    // Simple validation
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const lbbId = document.getElementById('lbbId').value;
    
    // Check if it's create or edit mode
    if (lbbId) {
        // Edit mode - use update
        AppAlert.update(
            'Update LBB?',
            'Apakah Anda yakin ingin mengupdate data LBB ini?',
            function() {
                form.submit();
            }
        );
    } else {
        // Create mode - use create
        AppAlert.create(
            'Tambah LBB Baru?',
            'Apakah Anda yakin ingin menambahkan LBB baru?',
            function() {
                form.submit();
            }
        );
    }
}

// Confirm status update with AppAlert
function confirmStatusUpdate(url, newStatus) {
    let title = '';
    let text = '';
    
    if (newStatus === 'suspended') {
        title = 'Suspend LBB?';
        text = 'LBB ini tidak akan bisa mengakses sistem setelah di-suspend.';
    } else if (newStatus === 'active') {
        title = 'Aktifkan LBB?';
        text = 'LBB ini akan dapat mengakses 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();
    });
}
</script>
@endsection