@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Edit 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"><a href="{{ route('rombongan.show', $rombongan) }}">{{ $rombongan->name }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

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

        @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 Edit Rombongan</h5>

                        <form action="{{ route('rombongan.update', $rombongan) }}" method="POST" id="editRombonganForm" class="row g-3">
                            @csrf
                            @method('PUT')
                            
                            <!-- 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', $rombongan->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', $rombongan->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', $rombongan->ketua_id) == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} - {{ $user->email }}
                                            @if($user->id == $rombongan->ketua_id)
                                                (Ketua Saat Ini)
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('ketua_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @if($rombongan->ketua_id != old('ketua_id', $rombongan->ketua_id))
                                    <div class="form-text text-warning">
                                        <i class="bi bi-exclamation-triangle me-1"></i>
                                        Mengganti ketua akan mengubah akses login mobile aplikasi
                                    </div>
                                @endif
                            </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', $rombongan->max_members) }}" 
                                       min="{{ $rombongan->activeMembers->count() }}" max="10" required>
                                @error('max_members')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    Minimal {{ $rombongan->activeMembers->count() }} (anggota saat ini), maksimal 10 orang
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" 
                                        id="status" name="status" required>
                                    <option value="active" {{ old('status', $rombongan->status) == 'active' ? 'selected' : '' }}>
                                        Aktif
                                    </option>
                                    <option value="inactive" {{ old('status', $rombongan->status) == 'inactive' ? 'selected' : '' }}>
                                        Tidak Aktif
                                    </option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Rombongan tidak aktif tidak bisa login ke aplikasi mobile</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', $rombongan->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Submit Buttons -->
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('rombongan.show', $rombongan) }}" 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>Update Rombongan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Member Management Card -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="card-title">Kelola Anggota</h5>
                            @if(!$rombongan->isFull())
                                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addMemberModal">
                                    <i class="bi bi-person-plus me-1"></i>Tambah Anggota
                                </button>
                            @endif
                        </div>

                        @if($rombongan->activeMembers->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Nama</th>
                                            <th>Role</th>
                                            <th>Bergabung</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($rombongan->activeMembers as $member)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($member->user->photo)
                                                        <img src="{{ asset('storage/photos/' . $member->user->photo) }}" 
                                                             style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" alt="{{ $member->user->name }}">
                                                    @else
                                                        <div style="width: 32px; height: 32px; background: {{ $member->role === 'ketua' ? '#ffc107' : '#6c757d' }}; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;">
                                                            {{ strtoupper(substr($member->user->name, 0, 2)) }}
                                                        </div>
                                                    @endif
                                                    <div class="ms-2">
                                                        <div class="fw-bold">{{ $member->user->name }}</div>
                                                        <small class="text-muted">{{ $member->user->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($member->role === 'ketua')
                                                    <span class="badge bg-warning text-dark">
                                                        <i class="bi bi-crown me-1"></i>Ketua
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary">
                                                        <i class="bi bi-person me-1"></i>Anggota
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <small>{{ $member->joined_at->format('d/m/Y') }}</small>
                                            </td>
                                            <td>
                                                @if($member->role !== 'ketua')
                                                    <form action="{{ route('rombongan.remove-member', [$rombongan, $member]) }}" 
                                                          method="POST" style="display: inline;"
                                                          onsubmit="return confirm('Yakin ingin mengeluarkan {{ $member->user->name }} dari rombongan?')">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Keluarkan">
                                                            <i class="bi bi-person-dash"></i>
                                                        </button>
                                                    </form>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center text-muted py-3">
                                <i class="bi bi-people display-6 mb-2"></i>
                                <p class="mb-0">Belum ada anggota</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Info Sidebar -->
            <div class="col-lg-4">
                <!-- Current Rombongan Info -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Info Saat Ini</h5>
                        
                        <div class="text-center mb-3">
                            <div style="width: 60px; height: 60px; background: #4154f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; margin: 0 auto;">
                                {{ strtoupper(substr($rombongan->name, 0, 2)) }}
                            </div>
                            <h6 class="mt-2 mb-1">{{ $rombongan->name }}</h6>
                            <span class="badge bg-info">{{ $rombongan->code }}</span>
                        </div>

                        <div class="row text-center small">
                            <div class="col-4">
                                <div class="fw-bold text-primary">{{ $rombongan->activeMembers->count() }}</div>
                                <div class="text-muted">Anggota</div>
                            </div>
                            <div class="col-4">
                                <div class="fw-bold text-success">{{ $rombongan->max_members }}</div>
                                <div class="text-muted">Kapasitas</div>
                            </div>
                            <div class="col-4">
                                <div class="fw-bold text-{{ $rombongan->status === 'active' ? 'success' : 'secondary' }}">
                                    {{ ucfirst($rombongan->status) }}
                                </div>
                                <div class="text-muted">Status</div>
                            </div>
                        </div>

                        <div class="mt-3">
                            @php
                                $percentage = ($rombongan->activeMembers->count() / $rombongan->max_members) * 100;
                            @endphp
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-{{ $percentage >= 100 ? 'danger' : ($percentage >= 80 ? 'warning' : 'success') }}" style="width: {{ $percentage }}%"></div>
                            </div>
                            <small class="text-muted">{{ $rombongan->activeMembers->count() }}/{{ $rombongan->max_members }} anggota</small>
                        </div>
                    </div>
                </div>

                <!-- Available Workers -->
                @php
                    $availableWorkers = \App\Models\User::where('is_worker', 1)
                        ->where('status_worker', 1)
                        ->where('status', 'active')
                        ->whereNotIn('id', $rombongan->activeMembers->pluck('user_id'))
                        ->get();
                @endphp

                @if($availableWorkers->count() > 0)
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Teknisi Tersedia ({{ $availableWorkers->count() }})</h5>
                        
                        <div style="max-height: 200px; overflow-y: auto;">
                            @foreach($availableWorkers->take(5) as $worker)
                                <div class="d-flex align-items-center mb-2">
                                    @if($worker->photo)
                                        <img src="{{ asset('storage/photos/' . $worker->photo) }}" 
                                             style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" alt="{{ $worker->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($worker->name, 0, 2)) }}
                                        </div>
                                    @endif
                                    <div class="ms-2 flex-grow-1">
                                        <div class="small fw-bold">{{ $worker->name }}</div>
                                        <div class="text-muted" style="font-size: 0.75rem;">{{ $worker->email }}</div>
                                    </div>
                                </div>
                            @endforeach
                            
                            @if($availableWorkers->count() > 5)
                                <div class="text-center">
                                    <small class="text-muted">dan {{ $availableWorkers->count() - 5 }} teknisi lainnya</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif

                <!-- Important Notes -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-warning">Penting</h5>
                        
                        <div class="alert alert-warning">
                            <small>
                                <i class="bi bi-info-circle me-1"></i>
                                <strong>Mengganti Ketua:</strong> Ketua lama akan kehilangan akses login mobile, 
                                dan ketua baru akan mendapat akses login mobile.
                            </small>
                        </div>
                        
                        <div class="alert alert-info">
                            <small>
                                <i class="bi bi-people me-1"></i>
                                <strong>Anggota Fleksibel:</strong> Teknisi bisa menjadi anggota di beberapa rombongan, 
                                tapi hanya bisa jadi ketua di satu rombongan.
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Add Member Modal -->
    @if(!$rombongan->isFull() && $availableWorkers->count() > 0)
    <div class="modal fade" id="addMemberModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-person-plus me-2"></i>Tambah Anggota
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('rombongan.add-member', $rombongan) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="user_id" class="form-label">Pilih Teknisi</label>
                            <select class="form-select" id="user_id" name="user_id" required>
                                <option value="">-- Pilih Teknisi --</option>
                                @foreach($availableWorkers as $worker)
                                    <option value="{{ $worker->id }}">{{ $worker->name }} - {{ $worker->email }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="notes" class="form-label">Catatan (Opsional)</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3" 
                                      placeholder="Catatan khusus untuk anggota ini..."></textarea>
                        </div>
                        <div class="alert alert-info">
                            <small>
                                <i class="bi bi-info-circle me-1"></i>
                                Anggota yang ditambahkan akan langsung aktif dalam rombongan ini
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-plus me-1"></i>Tambah Anggota
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif
@endsection

@section('scripts')
<script>
// Warning when changing ketua
document.getElementById('ketua_id').addEventListener('change', function() {
    const currentKetua = {{ $rombongan->ketua_id }};
    const newKetua = this.value;
    
    if (currentKetua != newKetua && newKetua) {
        const confirmMsg = 'Anda akan mengganti ketua rombongan. Ketua lama akan kehilangan akses login mobile, dan ketua baru akan mendapat akses. Lanjutkan?';
        if (!confirm(confirmMsg)) {
            this.value = currentKetua;
        }
    }
});

// Warning when reducing capacity
document.getElementById('max_members').addEventListener('change', function() {
    const currentMembers = {{ $rombongan->activeMembers->count() }};
    const newCapacity = parseInt(this.value);
    
    if (newCapacity < currentMembers) {
        alert('Kapasitas tidak bisa dikurangi di bawah jumlah anggota saat ini (' + currentMembers + ')');
        this.value = currentMembers;
    }
});

// Form validation
document.getElementById('editRombonganForm').addEventListener('submit', function(e) {
    const currentKetua = {{ $rombongan->ketua_id }};
    const newKetua = document.getElementById('ketua_id').value;
    
    if (currentKetua != newKetua) {
        if (!confirm('Yakin ingin mengganti ketua rombongan? Ini akan mengubah akses login mobile.')) {
            e.preventDefault();
            return false;
        }
    }
});
</script>
@endsection