@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Edit User</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-user.index') }}">Data User</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="row">
            <div class="col-xl-12">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @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

                @if (session()->has('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

                <div class="card">
                    <div class="card-body pt-3">
                        <form action="{{ route('data-user.update', $user->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            
                            <div class="row">
                                <!-- Informasi Dasar -->
                                <div class="col-md-6">
                                    <h5 class="card-title">Informasi Dasar</h5>
                                    
                                    <div class="form-group p-2">
                                        <label for="name">Nama <span class="text-danger">*</span></label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            placeholder="Masukkan nama" value="{{ old('name', $user->name) }}" required>
                                    </div>

                                    <div class="form-group p-2">
                                        <label for="email">Email <span class="text-danger">*</span></label>
                                        <input type="email" name="email" id="email" class="form-control"
                                            placeholder="Masukkan email" value="{{ old('email', $user->email) }}" required>
                                    </div>

                                    <div class="form-group p-2">
                                        <label for="username">No HP</label>
                                        <input type="text" name="username" id="username" class="form-control"
                                            placeholder="Masukkan nomor HP" value="{{ old('username', $user->username) }}">
                                    </div>

                                    <!-- Hidden role field dengan value user -->
                                    <input type="hidden" name="role" value="user">
                                    
                                    <!-- Hidden default values -->
                                    <input type="hidden" name="status_worker_default" value="0">
                                    <input type="hidden" name="category_jasa_id_default" value="0">
                                    <input type="hidden" name="deskripsi_pekerjaan_default" value="">
                                    <input type="hidden" name="tools_default" value="">
                                    <input type="hidden" name="skills_default" value="">
                                    <input type="hidden" name="reject_reason_default" value="">

                                    <div class="form-group p-2">
                                        <label for="password">Password</label>
                                        <input type="password" name="password" id="password" class="form-control"
                                            placeholder="Kosongkan jika tidak ingin mengubah password">
                                        <small class="form-text text-muted">Kosongkan field ini jika tidak ingin mengubah password</small>
                                    </div>

                                    <div class="form-group p-2">
                                        <label for="profile">Upload Foto Profile</label>
                                        <input type="file" name="profile" id="profile" class="form-control" accept="image/*">
                                        <small class="form-text text-muted">Format: JPG, PNG, JPEG (Max: 2MB)</small>
                                        @if($user->profile)
                                            <div class="mt-2">
                                                <small class="text-success">Foto saat ini:</small><br>
                                                <img src="{{ asset('uploads/user/' . $user->id . '/' . $user->profile) }}" 
                                                     alt="Current Profile" 
                                                     class="img-fluid" 
                                                     style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;"
                                                     data-bs-toggle="modal" 
                                                     data-bs-target="#profileModal"
                                                     title="Klik untuk memperbesar">
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <!-- Informasi Worker -->
                                <div class="col-md-6">
                                    <h5 class="card-title">Informasi Worker</h5>

                                    <div class="form-group p-2">
                                        <label for="is_worker">Status Worker</label>
                                        @if($user->is_worker == 1)
                                            <input type="text" class="form-control" value="{{ $user->is_worker == 1 ? 'Worker' : 'Bukan Worker' }}" readonly>
                                            <input type="hidden" name="is_worker" value="{{ $user->is_worker }}">
                                            <small class="form-text text-muted">Status worker tidak dapat diubah di admin panel. Harus melalui aplikasi mobile.</small>
                                        @else
                                            <input type="text" class="form-control" value="Bukan Worker" readonly>
                                            <input type="hidden" name="is_worker" value="0">
                                            <small class="form-text text-muted">User belum mendaftar sebagai worker melalui aplikasi mobile.</small>
                                        @endif
                                    </div>

                                    @if($user->is_worker == 1)
                                        <div class="form-group p-2">
                                            <label for="status_worker">Status Verifikasi</label>
                                            <select name="status_worker" id="status_worker" class="form-control">
                                                <option value="0" {{ old('status_worker', $user->status_worker ?? 0) == '0' ? 'selected' : '' }}>Pending</option>
                                                <option value="1" {{ old('status_worker', $user->status_worker ?? 0) == '1' ? 'selected' : '' }}>Approved</option>
                                                <option value="2" {{ old('status_worker', $user->status_worker ?? 0) == '2' ? 'selected' : '' }}>Rejected</option>
                                            </select>
                                        </div>

                                        <div class="form-group p-2">
                                            <label for="category_jasa_id">Kategori Jasa</label>
                                            <select name="category_jasa_id" id="category_jasa_id" class="form-control">
                                                <option value="0">Belum ditentukan</option>
                                                <!-- Options akan diisi dari database -->
                                            </select>
                                        </div>

                                        <div class="form-group p-2">
                                            <label for="deskripsi_pekerjaan">Deskripsi Pekerjaan</label>
                                            <textarea name="deskripsi_pekerjaan" id="deskripsi_pekerjaan" class="form-control" rows="3" 
                                                      placeholder="Masukkan deskripsi pekerjaan">{{ old('deskripsi_pekerjaan', $user->deskripsi_pekerjaan) }}</textarea>
                                        </div>

                                        <div class="form-group p-2">
                                            <label for="tools">Tools/Alat Kerja</label>
                                            <textarea name="tools" id="tools" class="form-control" rows="2" 
                                                      placeholder="Contoh: Bor listrik, Tang, Obeng, dll">{{ old('tools', $user->tools) }}</textarea>
                                        </div>

                                        <div class="form-group p-2">
                                            <label for="skills">Skills/Keahlian</label>
                                            <textarea name="skills" id="skills" class="form-control" rows="2" 
                                                      placeholder="Contoh: Instalasi listrik, Perbaikan AC, dll">{{ old('skills', $user->skills) }}</textarea>
                                        </div>

                                        <div class="form-group p-2">
                                            <label for="img_ktp">Upload Foto KTP</label>
                                            <input type="file" name="img_ktp" id="img_ktp" class="form-control" accept="image/*">
                                            <small class="form-text text-muted">Format: JPG, PNG, JPEG (Max: 2MB)</small>
                                            @if($user->img_ktp)
                                                <div class="mt-2">
                                                    <small class="text-success">KTP saat ini:</small><br>
                                                    <img src="{{ asset('uploads/user/' . $user->id . '/' . $user->img_ktp) }}" 
                                                         alt="Current KTP" 
                                                         class="img-fluid" 
                                                         style="max-width: 150px; max-height: 100px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;"
                                                         data-bs-toggle="modal" 
                                                         data-bs-target="#ktpModal"
                                                         title="Klik untuk memperbesar">
                                                </div>
                                            @endif
                                        </div>

                                        @if($user->status_worker == 2)
                                            <div class="form-group p-2">
                                                <label for="reject_reason">Alasan Reject</label>
                                                <textarea name="reject_reason" id="reject_reason" class="form-control" rows="2" 
                                                          placeholder="Masukkan alasan reject">{{ old('reject_reason', $user->reject_reason) }}</textarea>
                                            </div>
                                        @endif
                                    @else
                                        <!-- Hidden inputs untuk non-worker -->
                                        <input type="hidden" name="status_worker" value="0">
                                        <input type="hidden" name="category_jasa_id" value="0">
                                        <input type="hidden" name="deskripsi_pekerjaan" value="">
                                        <input type="hidden" name="tools" value="">
                                        <input type="hidden" name="skills" value="">
                                        <input type="hidden" name="reject_reason" value="">
                                        
                                        <div class="alert alert-info">
                                            <i class="bi bi-info-circle"></i>
                                            <strong>Info:</strong> User ini belum mendaftar sebagai worker melalui aplikasi mobile. 
                                            Field worker tidak tersedia untuk diedit di admin panel.
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <a href="{{ route('data-user.index') }}" class="btn btn-secondary">
                                            <i class="bi bi-arrow-left"></i> Kembali
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle"></i> Update User
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if($user->is_worker == 1)
                const statusWorkerSelect = document.getElementById('status_worker');
                const rejectReasonGroup = document.getElementById('reject-reason-group');

                function toggleRejectReason() {
                    const statusWorker = statusWorkerSelect.value;
                    // Show reject reason only if status is rejected (2)
                    if (rejectReasonGroup) {
                        rejectReasonGroup.style.display = (statusWorker == '2') ? 'block' : 'none';
                        
                        // Clear reject reason if not rejected
                        if (statusWorker != '2') {
                            const rejectReasonField = document.getElementById('reject_reason');
                            if (rejectReasonField) {
                                rejectReasonField.value = '';
                            }
                        }
                    }
                }

                statusWorkerSelect.addEventListener('change', toggleRejectReason);

                // Load kategori jasa options
                fetch('/api/category-jasa')
                    .then(response => response.json())
                    .then(data => {
                        const categorySelect = document.getElementById('category_jasa_id');
                        categorySelect.innerHTML = '<option value="0">Belum ditentukan</option>';
                        
                        data.forEach(category => {
                            const option = document.createElement('option');
                            option.value = category.id;
                            option.textContent = category.name;
                            option.selected = {{ $user->category_jasa_id ?? 0 }} == category.id;
                            categorySelect.appendChild(option);
                        });
                    })
                    .catch(error => {
                        console.error('Error loading categories:', error);
                        document.getElementById('category_jasa_id').innerHTML = '<option value="0">Belum ditentukan</option>';
                    });

                // Initialize reject reason visibility
                toggleRejectReason();
            @endif
        });
    </script>

    <!-- Profile Image Modal -->
    @if($user->profile)
    <div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="profileModalLabel">Foto Profile - {{ $user->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('uploads/user/' . $user->id . '/' . $user->profile) }}" 
                         alt="Profile Image" 
                         class="img-fluid" 
                         style="max-width: 100%; max-height: 80vh;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <a href="{{ asset('uploads/user/' . $user->id . '/' . $user->profile) }}" 
                       target="_blank" 
                       class="btn btn-primary">
                        <i class="bi bi-download"></i> Download
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- KTP Image Modal -->
    @if($user->img_ktp)
    <div class="modal fade" id="ktpModal" tabindex="-1" aria-labelledby="ktpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ktpModalLabel">Foto KTP - {{ $user->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('uploads/user/' . $user->id . '/' . $user->img_ktp) }}" 
                         alt="Foto KTP" 
                         class="img-fluid" 
                         style="max-width: 100%; max-height: 80vh;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <a href="{{ asset('uploads/user/' . $user->id . '/' . $user->img_ktp) }}" 
                       target="_blank" 
                       class="btn btn-primary">
                        <i class="bi bi-download"></i> Download
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection