@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Tambah Rombongan</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('rombongan.index') }}">Rombongan</a></li>
                <li class="breadcrumb-item active">Tambah Baru</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <!-- Alert Messages -->
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-circle me-1"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-circle me-1"></i>
                <strong>Terdapat kesalahan:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <!-- Form Card -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Form Tambah Rombongan</h5>

                        <form action="{{ route('rombongan.store') }}" method="POST" id="rombonganForm" class="row g-3">
                            @csrf
                            
                            <!-- Informasi Dasar -->
                            <div class="col-md-6">
                                <label for="name" class="form-label">Nama Rombongan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" 
                                       placeholder="Contoh: Rombongan Pak Ahsan A1" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="code" class="form-label">Kode Rombongan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                       id="code" name="code" value="{{ old('code') }}" 
                                       placeholder="Contoh: A1, B2, C3" maxlength="10" required>
                                @error('code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Kode unik untuk identifikasi rombongan (max 10 karakter)</div>
                            </div>

                            <div class="col-md-6">
                                <label for="ketua_id" class="form-label">Ketua Rombongan <span class="text-danger">*</span></label>
                                <select class="form-select @error('ketua_id') is-invalid @enderror" 
                                        id="ketua_id" name="ketua_id" required>
                                    <option value="">-- Pilih Ketua --</option>
                                    @foreach($availableKetua as $user)
                                        <option value="{{ $user->id }}" {{ old('ketua_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} - {{ $user->email }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('ketua_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Hanya teknisi yang belum tergabung di rombongan lain</div>
                            </div>

                            <div class="col-md-6">
                                <label for="max_members" class="form-label">Kapasitas Maksimal <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('max_members') is-invalid @enderror" 
                                       id="max_members" name="max_members" value="{{ old('max_members', 5) }}" 
                                       min="2" max="10" required>
                                @error('max_members')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Jumlah maksimal anggota (termasuk ketua): 2-10 orang</div>
                            </div>

                            <div class="col-12">
                                <label for="description" class="form-label">Deskripsi</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="3" 
                                          placeholder="Deskripsi opsional tentang rombongan...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Anggota Tambahan -->
                            <div class="col-12">
                                <label class="form-label">Anggota Tambahan (Opsional)</label>
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <div id="anggotaContainer">
                                            <div class="row mb-3">
                                                <div class="col-md-10">
                                                    <select class="form-select" name="anggota[]">
                                                        <option value="">-- Pilih Anggota --</option>
                                                        @foreach($availableAnggota as $user)
                                                            <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->email }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-success w-100" onclick="addAnggota()">
                                                        <i class="bi bi-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-text">
                                            <i class="bi bi-info-circle me-1"></i>
                                            Anda dapat menambahkan anggota sekarang atau nanti. Teknisi bisa menjadi anggota di beberapa rombongan.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Buttons -->
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('rombongan.index') }}" class="btn btn-secondary">
                                        <i class="bi bi-x-circle me-1"></i>Batal
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle me-1"></i>Simpan Rombongan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Info Card -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Informasi Rombongan</h5>
                        
                        <div class="mb-3">
                            <h6 class="text-primary">Apa itu Rombongan?</h6>
                            <p class="small text-muted">
                                Rombongan adalah grup kerja teknisi yang terdiri dari seorang ketua dan beberapa anggota. 
                                Ketua bertanggung jawab untuk login ke aplikasi mobile dan mengupdate progress pekerjaan.
                            </p>
                        </div>

                        <div class="mb-3">
                            <h6 class="text-success">Aturan Ketua:</h6>
                            <ul class="small text-muted">
                                <li>Hanya ketua yang bisa login ke aplikasi mobile</li>
                                <li>Ketua bertanggung jawab mengupdate progress kerja</li>
                                <li>Ketua mewakili seluruh anggota rombongan</li>
                                <li>Satu orang tidak bisa menjadi ketua di beberapa rombongan</li>
                            </ul>
                        </div>

                        <div class="mb-3">
                            <h6 class="text-warning">Aturan Anggota:</h6>
                            <ul class="small text-muted">
                                <li>Anggota tidak bisa login ke aplikasi mobile</li>
                                <li>Anggota mengikuti arahan ketua</li>
                                <li>Satu teknisi bisa menjadi anggota di beberapa rombongan</li>
                                <li><strong>NEW:</strong> Teknisi bisa jadi ketua di beberapa rombongan sekaligus</li>
                                <li><strong>Sistem Sangat Fleksibel:</strong> Tidak ada batasan membership</li>
                            </ul>
                        </div>

                        <div class="alert alert-success">
                            <small>
                                <i class="bi bi-check-circle me-1"></i>
                                <strong>Update:</strong> Sistem sekarang sangat fleksibel - teknisi bisa jadi ketua di multiple rombongan dan anggota di rombongan lain secara bersamaan!
                            </small>
                        </div>

                        <div class="alert alert-info">
                            <small>
                                <i class="bi bi-lightbulb me-1"></i>
                                <strong>Tips:</strong> Gunakan nama yang mudah diidentifikasi seperti 
                                "Rombongan Pak Ahsan A1" atau "Tim Teknisi Zona Utara"
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Available Workers Card -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Teknisi Tersedia</h5>
                        
                        <div class="text-center mb-3">
                            <h4 class="text-success">{{ $availableKetua->count() }}</h4>
                            <small class="text-muted">teknisi belum tergabung</small>
                        </div>
                        
                        @if($availableKetua->count() > 0)
                            <div style="max-height: 200px; overflow-y: auto;">
                                @foreach($availableKetua->take(5) as $user)
                                    <div class="d-flex align-items-center mb-2">
                                        @if($user->photo)
                                            <img src="{{ asset('storage/photos/' . $user->photo) }}" 
                                                 style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" alt="{{ $user->name }}">
                                        @else
                                            <div style="width: 32px; height: 32px; background: #4154f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;">
                                                {{ strtoupper(substr($user->name, 0, 2)) }}
                                            </div>
                                        @endif
                                        <div class="ms-2 flex-grow-1">
                                            <div class="small fw-bold">{{ $user->name }}</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                @endforeach
                                
                                @if($availableKetua->count() > 5)
                                    <div class="text-center">
                                        <small class="text-muted">dan {{ $availableKetua->count() - 5 }} teknisi lainnya</small>
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="text-center text-muted">
                                <i class="bi bi-people-fill display-6 mb-2"></i>
                                <p class="mb-0">Tidak ada teknisi aktif tersedia</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
let anggotaCount = 1;

function addAnggota() {
    if (anggotaCount >= 9) { // Max 10 total (1 ketua + 9 anggota)
        alert('Maksimal 9 anggota tambahan (10 total termasuk ketua)');
        return;
    }
    
    const container = document.getElementById('anggotaContainer');
    const newRow = document.createElement('div');
    newRow.className = 'row mb-3';
    newRow.innerHTML = `
        <div class="col-md-10">
            <select class="form-select" name="anggota[]">
                <option value="">-- Pilih Anggota --</option>
                @foreach($availableAnggota as $user)
                    <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->email }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-danger w-100" onclick="removeAnggota(this)">
                <i class="bi bi-dash"></i>
            </button>
        </div>
    `;
    
    container.appendChild(newRow);
    anggotaCount++;
}

function removeAnggota(button) {
    button.closest('.row').remove();
    anggotaCount--;
}

// Auto generate code based on name
document.getElementById('name').addEventListener('input', function() {
    const name = this.value;
    const codeInput = document.getElementById('code');
    
    if (name && !codeInput.value) {
        // Extract letters and numbers for code
        const matches = name.match(/[A-Za-z]+|\d+/g);
        if (matches) {
            let code = '';
            for (let match of matches) {
                if (/[A-Za-z]/.test(match)) {
                    code += match.charAt(0).toUpperCase();
                } else {
                    code += match;
                }
                if (code.length >= 5) break;
            }
            codeInput.value = code.substring(0, 10);
        }
    }
});

// Form validation
document.getElementById('rombonganForm').addEventListener('submit', function(e) {
    const ketuaId = document.getElementById('ketua_id').value;
    const anggotaSelects = document.querySelectorAll('select[name="anggota[]"]');
    const selectedIds = [ketuaId];
    
    // Check for duplicate selections
    for (let select of anggotaSelects) {
        if (select.value) {
            if (selectedIds.includes(select.value)) {
                e.preventDefault();
                alert('Tidak boleh memilih orang yang sama sebagai ketua dan anggota!');
                return false;
            }
            selectedIds.push(select.value);
        }
    }
});
</script>
@endsection