@extends('layouts.web')

@section('content')
<div class="container-fluid px-3">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-lg">
                <div class="card-header bg-gradient-primary text-white py-3">
                    <h4 class="mb-0 d-flex align-items-center">
                        <i class="fas fa-user-edit fa-lg me-3"></i>Edit Profil Peserta
                    </h4>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <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="fas fa-exclamation-circle me-2"></i>
                            <strong>Terjadi 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

                    <!-- Foto Profil Card -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body text-center py-4">
                            <div class="position-relative d-inline-block">
                                @php
                                    // Determine the correct profile image path with better error handling
                                    $defaultImagePath = asset('assets/images/profilefoto/default-profile.png');
                                    $profileImagePath = $defaultImagePath;
                                    
                                    if ($user->profile && $user->profile->foto) {
                                        $photoPath = public_path('assets/images/profilefoto/' . $user->profile->foto);
                                        if (file_exists($photoPath)) {
                                            $profileImagePath = asset('assets/images/profilefoto/' . $user->profile->foto);
                                        }
                                    }
                                @endphp
                                <img id="preview-foto" 
                                    src="{{ $profileImagePath }}" 
                                    class="rounded-circle shadow-sm mb-3" 
                                    style="width: 150px; height: 150px; object-fit: cover; border: 4px solid #fff;"
                                    onerror="this.src='{{ $defaultImagePath }}'">
                                <div class="position-absolute bottom-0 end-0 d-flex gap-2">
                                    <button type="button" class="btn btn-sm btn-primary rounded-circle" 
                                            data-bs-toggle="modal" data-bs-target="#modalFoto"
                                            style="width: 35px; height: 35px; padding: 0;">
                                        <i class="fas fa-camera"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-info rounded-circle" 
                                            onclick="document.getElementById('file-input').click()"
                                            style="width: 35px; height: 35px; padding: 0;">
                                        <i class="fas fa-upload"></i>
                                    </button>
                                    @if($user->profile && $user->profile->foto && file_exists(public_path('assets/images/profilefoto/' . $user->profile->foto)))
                                    <button type="button" class="btn btn-sm btn-danger rounded-circle delete-photo" 
                                            style="width: 35px; height: 35px; padding: 0;">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('users.update', $user->id) }}" method="POST" id="editUserForm" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="activity_id" value="{{ request('activity_id') ?? $activity_id ?? 1 }}">
                        <input type="hidden" name="foto_data" id="foto-input">
                        <input type="file" name="foto_file" id="file-input" class="d-none" accept="image/*">

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">ID</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control bg-light" value="{{ $user->id }}" disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                            name="name" value="{{ old('name', $user->name) }}" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Field NPA dihapus karena tidak digunakan lagi -->

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Email <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                            name="email" value="{{ old('email', $user->email) }}" required
                                            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" 
                                            title="Masukkan alamat email yang valid">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">No. HP</label>
                                    <div class="col-sm-9">
                                        <input type="tel" class="form-control @error('no_hp') is-invalid @enderror" 
                                            name="no_hp" value="{{ old('no_hp', optional($user->profile)->no_hp) }}"
                                            pattern="[0-9]{10,13}" 
                                            title="Masukkan nomor HP yang valid (10-13 digit angka)" 
                                            maxlength="13"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                            onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                        @error('no_hp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Pekerjaan</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control @error('pekerjaan') is-invalid @enderror" 
                                            name="pekerjaan" value="{{ old('pekerjaan', optional($user->profile)->pekerjaan) }}"
                                            maxlength="100">
                                        @error('pekerjaan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Jabatan</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control @error('jabatan') is-invalid @enderror" 
                                            name="jabatan" value="{{ old('jabatan', optional($user->profile)->jabatan) }}"
                                            maxlength="100">
                                        @error('jabatan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Alamat <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                            name="alamat" rows="3" maxlength="255" required>{{ old('alamat', optional($user->profile)->alamat) }}</textarea>
                                        @error('alamat')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Provinsi <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <select class="form-select @error('province_id') is-invalid @enderror" 
                                            name="province_id" id="province_id" required>
                                            <option value="" disabled selected>Pilih Provinsi</option>
                                            @foreach($provinces as $province)
                                                <option value="{{ $province->id }}" 
                                                    {{ old('province_id', optional($user->profile)->province_id) == $province->id ? 'selected' : '' }}>
                                                    {{ $province->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('province_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Kabupaten/Kota <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <select class="form-select @error('regency_id') is-invalid @enderror" 
                                            name="regency_id" id="regency_id" required>
                                            <option value="" disabled selected>Pilih Kabupaten/Kota</option>
                                            @foreach($regencies as $regency)
                                                <option value="{{ $regency->id }}" 
                                                    {{ old('regency_id', optional($user->profile)->regency_id) == $regency->id ? 'selected' : '' }}>
                                                    {{ $regency->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('regency_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Kecamatan <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        <select class="form-select @error('district_id') is-invalid @enderror" 
                                            name="district_id" id="district_id" required>
                                            <option value="" disabled selected>Pilih Kecamatan</option>
                                            @foreach($districts as $district)
                                                <option value="{{ $district->id }}" 
                                                    {{ old('district_id', optional($user->profile)->district_id) == $district->id ? 'selected' : '' }}>
                                                    {{ $district->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('district_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                    <div class="col-sm-9">
                                        @php
                                            $jenisKelaminRaw = old('jenis_kelamin', optional($user->profile)->jenis_kelamin);
                                            $jenisKelamin = null;
                                            if (in_array(strtolower($jenisKelaminRaw), ['l', 'laki-laki', 'laki-laki', 'laki-laki', 'laki-laki'])) {
                                                $jenisKelamin = 'Laki-laki';
                                            } elseif (in_array(strtolower($jenisKelaminRaw), ['p', 'perempuan'])) {
                                                $jenisKelamin = 'Perempuan';
                                            }
                                        @endphp
                                        <select class="form-select @error('jenis_kelamin') is-invalid @enderror" 
                                            name="jenis_kelamin" required>
                                            <option value="" disabled selected>Pilih Jenis Kelamin</option>
                                            <option value="Laki-laki" {{ $jenisKelamin == 'Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                                            <option value="Perempuan" {{ $jenisKelamin == 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
                                        </select>
                                        @error('jenis_kelamin')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Tanggal Lahir</label>
                                    <div class="col-sm-9">
                                        <input type="date" 
                                               class="form-control @error('tanggal_lahir') is-invalid @enderror" 
                                               name="tanggal_lahir" 
                                               value="{{ old('tanggal_lahir', optional($user->profile)->tanggal_lahir ? optional($user->profile)->tanggal_lahir->format('Y-m-d') : '') }}"
                                               max="{{ date('Y-m-d') }}">
                                        @error('tanggal_lahir')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row mb-0 mt-4">
                            <div class="col-sm-9 offset-sm-3">
                                <button type="submit" class="btn btn-primary" id="submitBtn">
                                    <i class="fas fa-save me-1"></i> <span id="submitText">Simpan Perubahan</span>
                                </button>
                                @if(request('activity_id'))
                                    <a href="{{ route('activity.detail', ['activity' => request('activity_id')]) }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i> Kembali ke Detail Kegiatan
                                    </a>
                                @else
                                    <a href="{{ url()->previous() }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i> Kembali
                                    </a>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Kamera -->
<div class="modal fade" id="modalFoto" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ambil Foto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <video id="camera" class="w-100 mb-3" style="display: none;"></video>
                    <canvas id="canvas" class="w-100 mb-3" style="display: none;"></canvas>
                </div>
                <div class="d-flex justify-content-center gap-2">
                    <button id="start-camera" class="btn btn-primary">
                        <i class="fas fa-camera me-1"></i> Buka Kamera
                    </button>
                    <button id="take-photo" class="btn btn-success" style="display: none;">
                        <i class="fas fa-camera-retro me-1"></i> Ambil Foto
                    </button>
                    <button id="retake-photo" class="btn btn-warning" style="display: none;">
                        <i class="fas fa-redo me-1"></i> Ulangi
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="save-photo">Simpan Foto</button>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* Tambahkan CSS untuk memperbaiki tampilan di mobile */
    @media (max-width: 576px) {
        .col-form-label {
            text-align: left;
            margin-bottom: 0.5rem;
        }
        .offset-sm-3 {
            margin-left: 0;
        }
        .form-group.row {
            margin-bottom: 1rem;
        }
    }

    /* Styling untuk tombol foto */
    .btn-foto {
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .btn-foto:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }

    /* Animasi untuk preview foto */
    #preview-foto {
        transition: all 0.3s ease;
    }

    #preview-foto:hover {
        transform: scale(1.05);
    }

    .bg-gradient-primary {
        background: linear-gradient(45deg, #4e73df, #224abe);
    }

    .card-hover {
        transition: all 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
    }

    .rounded-pill {
        border-radius: 50rem !important;
    }

    .btn-lg {
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .fa-lg {
        font-size: 1.5em;
    }

    .card-body {
        background-color: #fff;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    let camera_stream = null;
    let video = document.getElementById('camera');
    let canvas = document.getElementById('canvas');
    let photoTaken = false;

    // Start camera
    document.getElementById('start-camera').addEventListener('click', async function() {
        try {
            camera_stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
            video.srcObject = camera_stream;
            video.style.display = 'block';
            canvas.style.display = 'none';
            this.style.display = 'none';
            document.getElementById('take-photo').style.display = 'block';
            video.play();
        } catch (err) {
            alert('Error accessing camera: ' + err.message);
        }
    });

    // Take photo
    document.getElementById('take-photo').addEventListener('click', function() {
        // Set ukuran canvas agar hasil tidak buram
        canvas.width = 400;
        canvas.height = 400;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        video.style.display = 'none';
        canvas.style.display = 'block';
        this.style.display = 'none';
        document.getElementById('retake-photo').style.display = 'block';
        photoTaken = true;
    });

    // Retake photo
    document.getElementById('retake-photo').addEventListener('click', function() {
        video.style.display = 'block';
        canvas.style.display = 'none';
        this.style.display = 'none';
        document.getElementById('take-photo').style.display = 'block';
        photoTaken = false;
    });

    // File input change
    document.getElementById('file-input').addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview-foto').src = e.target.result;
            }
            reader.readAsDataURL(this.files[0]);
        }
    });

    // Save photo from camera
    document.getElementById('save-photo').addEventListener('click', function() {
        if (photoTaken) {
            const image_data_url = canvas.toDataURL('image/jpeg');
            document.getElementById('preview-foto').src = image_data_url;
            document.getElementById('foto-input').value = image_data_url;
        }
        
        if (camera_stream) {
            camera_stream.getTracks().forEach(track => track.stop());
        }
        
        bootstrap.Modal.getInstance(document.getElementById('modalFoto')).hide();
    });

    // Clean up on modal close
    document.getElementById('modalFoto').addEventListener('hidden.bs.modal', function () {
        if (camera_stream) {
            camera_stream.getTracks().forEach(track => track.stop());
        }
        video.style.display = 'none';
        canvas.style.display = 'none';
        document.getElementById('start-camera').style.display = 'block';
        document.getElementById('take-photo').style.display = 'none';
        document.getElementById('retake-photo').style.display = 'none';
    });

    // Delete photo
    document.querySelector('.delete-photo')?.addEventListener('click', function() {
        if(confirm('Apakah Anda yakin ingin menghapus foto profil?')) {
            document.getElementById('preview-foto').src = '{{ asset("assets/images/profilefoto/default-profile.png") }}';
            document.getElementById('foto-input').value = 'delete';
        }
    });

    // Handle form submission
    $('#editUserForm').on('submit', function() {
        $('#submitBtn').prop('disabled', true);
        $('#submitText').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Menyimpan...');
    });

    // Handle province change
    $('#province_id').on('change', function() {
        var provinceId = $(this).val();
        $('#regency_id').empty().append('<option value="" disabled selected>Pilih Kabupaten/Kota</option>');
        $('#district_id').empty().append('<option value="" disabled selected>Pilih Kecamatan</option>');
        
        if(provinceId) {
            $.ajax({
                url: '/api/provinces/' + provinceId + '/regencies',
                type: "GET",
                dataType: "json",
                beforeSend: function() {
                    $('#regency_id').prop('disabled', true);
                    $('#regency_id').html('<option value="" disabled selected>Loading...</option>');
                },
                success: function(data) {
                    $('#regency_id').empty();
                    $('#regency_id').append('<option value="" disabled selected>Pilih Kabupaten/Kota</option>');
                    $.each(data, function(key, value) {
                        $('#regency_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });
                    $('#regency_id').val(null).trigger('change');
                    $('#regency_id').select2({
                        placeholder: 'Pilih Kabupaten/Kota',
                        width: '100%'
                    });

                    // Jika ada nilai regency yang tersimpan, pilih nilai tersebut
                    const selectedRegency = '{{ old("regency_id", optional($user->profile)->regency_id) }}';
                    if (selectedRegency && provinceId == '{{ old("province_id", optional($user->profile)->province_id) }}') {
                        $('#regency_id').val(selectedRegency).trigger('change');
                    }
                },
                error: function(xhr, status, error) {
                    
                    alert('Gagal memuat data kabupaten/kota. Silakan coba lagi.');
                },
                complete: function() {
                    $('#regency_id').prop('disabled', false);
                }
            });
        }
    });

    // Handle regency change
    $('#regency_id').on('change', function() {
        var regencyId = $(this).val();
        $('#district_id').empty().append('<option value="" disabled selected>Pilih Kecamatan</option>');
        
        if(regencyId) {
            $.ajax({
                url: '/api/regencies/' + regencyId + '/districts',
                type: "GET",
                dataType: "json",
                beforeSend: function() {
                    $('#district_id').prop('disabled', true);
                    $('#district_id').html('<option value="" disabled selected>Loading...</option>');
                },
                success: function(data) {
                    $('#district_id').empty();
                    $('#district_id').append('<option value="" disabled selected>Pilih Kecamatan</option>');
                    $.each(data, function(key, value) {
                        $('#district_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });
                    $('#district_id').val(null).trigger('change');
                    $('#district_id').select2({
                        placeholder: 'Pilih Kecamatan',
                        width: '100%'
                    });

                    // Jika ada nilai district yang tersimpan, pilih nilai tersebut
                    const selectedDistrict = '{{ old("district_id", optional($user->profile)->district_id) }}';
                    if (selectedDistrict && regencyId == '{{ old("regency_id", optional($user->profile)->regency_id) }}') {
                        $('#district_id').val(selectedDistrict);
                    }
                },
                error: function(xhr, status, error) {
                    
                    alert('Gagal memuat data kecamatan. Silakan coba lagi.');
                },
                complete: function() {
                    $('#district_id').prop('disabled', false);
                }
            });
        }
    });

    // Load initial values with better error handling
    $(document).ready(function() {
        const initialProvince = '{{ old("province_id", optional($user->profile)->province_id) }}';
        const initialRegency = '{{ old("regency_id", optional($user->profile)->regency_id) }}';
        const initialDistrict = '{{ old("district_id", optional($user->profile)->district_id) }}';
        
        // Set initial province if available
        if (initialProvince) {
            $('#province_id').val(initialProvince);
            
            // If we have initial regency and district, trigger the cascade loading
            if (initialRegency) {
                // Trigger province change to load regencies
                $('#province_id').trigger('change');
                
                // Wait a bit for the AJAX to complete, then set regency
                setTimeout(function() {
                    if (initialRegency) {
                        $('#regency_id').val(initialRegency);
                        
                        // If we have initial district, trigger regency change
                        if (initialDistrict) {
                            $('#regency_id').trigger('change');
                            
                            // Wait a bit for the AJAX to complete, then set district
                            setTimeout(function() {
                                if (initialDistrict) {
                                    $('#district_id').val(initialDistrict);
                                }
                            }, 500);
                        }
                    }
                }, 500);
            }
        }
        
        // Bersihkan: hilangkan output debugging

        // Inisialisasi Select2 pada dropdown provinsi, kabupaten/kota, kecamatan
        $('#province_id').select2({
            placeholder: 'Pilih Provinsi',
            width: '100%'
        });
        $('#regency_id').select2({
            placeholder: 'Pilih Kabupaten/Kota',
            width: '100%'
        });
        $('#district_id').select2({
            placeholder: 'Pilih Kecamatan',
            width: '100%'
        });
    });
</script>
@endpush
@endsection