@extends('layout_dashboard')
@section('title', $title ?? '')
@section('content')

<div class="container-xxl flex-grow-1 container-p-y">

    @include('parts.alert')
    
    <div class="row mb-2">
        <div class="col-12">
            <div class="mb-3">
                <form id="form_general" method="POST" action="{{ route('profile.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-9">
                            <div class="card border shadow-none mb-4">
                                <div class="card-header">
                                    <h4 class="card-title">Edit Profil</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="form-group mb-2">
                                            <label>NIK</label>
                                            <div class="controls">
                                                <input name="nik" value="{{ old('nik', $edit->nik) }}" type="text" class="form-control" autocomplete="off" maxlength="16">
                                                @error('nik')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Nama<span class="text-danger">*</span></label>
                                            <div class="controls">
                                                <input name="name" value="{{ old('name', $edit->name) }}" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                                                @error('name')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Phone</label>
                                            <div class="controls">
                                                <input name="phone" value="{{ old('phone', $edit->phone) }}" type="text" class="form-control" autocomplete="off">
                                                @error('phone')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Alamat</label>
                                            <div class="controls">
                                                <textarea name="address" class="form-control" style="height: 100px;">{!! old('address', $edit->address) !!}</textarea>
                                                @error('address')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card border shadow-none mb-4">
                                <div class="card-header">
                                    <h4 class="card-title">Edit Akun</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="form-group mb-2">
                                            <label>Email</label>
                                            <div class="controls">
                                                <input value="{{ old('email', $edit->email) }}" type="text" class="form-control" autocomplete="off" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Username</label>
                                            <div class="controls">
                                                <input name="username" value="{{ old('username', $edit->username) }}" type="text" class="form-control" autocomplete="off">
                                                @error('username')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Password</label>
                                            <div class="controls">
                                                <input name="password" value="{{ old('password') }}" type="password" class="form-control" autocomplete="off">
                                                @error('password')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Konfirmasi Password</label>
                                            <div class="controls">
                                                <input name="password_confirmation" value="{{ old('password_confirmation') }}" type="password" class="form-control" autocomplete="off">
                                                @error('password_confirmation')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if ($edit->psychologist)
                                <div class="card border shadow-none mb-4">
                                    <div class="card-header">
                                        <h4 class="card-title">Edit Data Psikolog</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body">
                                            <div class="form-group mb-2">
                                                <label>Tipe</label>
                                                <div class="controls">
                                                    <input name="psychologist[type]" value="{{ old('psychologist.type', $edit->psychologist->type ?? '') }}" type="text" class="form-control" autocomplete="off" maxlength="16">
                                                    @error('psychologist.type')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="form-group mb-2">
                                                <label>Keterangan</label>
                                                <div class="controls">
                                                    <textarea name="psychologist[description]" class="form-control" style="height: 200px;">{!! old('psychologist.description', $edit->psychologist->description ?? '') !!}</textarea>
                                                    @error('psychologist.description')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="form-group mb-2">
                                                <label>SIPP</label>
                                                <div class="controls">
                                                    <input name="psychologist[sipp]" value="{{ old('psychologist.sipp', $edit->psychologist->sipp ?? '') }}" type="text" class="form-control" autocomplete="off" maxlength="16">
                                                    @error('psychologist.sipp')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="form-group mb-2">
                                                <label>STR</label>
                                                <div class="controls">
                                                    <input name="psychologist[str]" value="{{ old('psychologist.str', $edit->psychologist->str ?? '') }}" type="text" class="form-control" autocomplete="off" maxlength="16">
                                                    @error('psychologist.str')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="form-group mb-2">
                                                <label>Pengalaman</label>
                                                <div class="controls">
                                                    <input name="psychologist[experience]" value="{{ old('psychologist.experience', $edit->psychologist->experience ?? '') }}" type="text" class="form-control" autocomplete="off" maxlength="16">
                                                    @error('psychologist.experience')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>                                                
                                        </div>
                                    </div>
                                </div>
                             @endif

                             @if ($topics)
                                <div class="card border shadow-none mb-4">
                                    <div class="card-header">
                                        <h4 class="card-title">Edit Topik</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body">
                                            <div class="row">
                                                @foreach ($topics->chunk(5) as $chunk)
                                                    <div class="col-md-3">
                                                        @foreach ($chunk as $tp)
                                                            <div class="form-check form-check-primary">
                                                                <input class="form-check-input" type="checkbox" name="topics[]" value="{{ $tp->id }}" {{ in_array($tp->id, $topics_selected) ? 'checked' : '' }}>
                                                                <label class="form-check-label">{{ $tp->name }}</label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                             @endif
                             @if ($topics)
                                <div class="card border shadow-none mb-4">
                                    <div class="card-header">
                                        <h4 class="card-title">Edit Pendidikan</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div id="education-repeater">
                                                        @foreach ($edit->educations as $index => $education)
                                                            <div class="education-item row g-3 mb-3">
                                                                <input type="hidden" name="educations[{{ $index }}][id]" value="{{ $education->id }}">
                                                                <div class="col-md-3">
                                                                    <input type="text" name="educations[{{ $index }}][university]" class="form-control" placeholder="University"
                                                                        value="{{ old('educations.' . $index . '.university', $education->university) }}">
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <input type="text" name="educations[{{ $index }}][study_program]" class="form-control" placeholder="Study Program"
                                                                        value="{{ old('educations.' . $index . '.study_program', $education->study_program) }}">
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <input type="number" name="educations[{{ $index }}][year_start]" class="form-control" placeholder="Year Start"
                                                                        value="{{ old('educations.' . $index . '.year_start', $education->year_start) }}">
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <input type="number" name="educations[{{ $index }}][year_end]" class="form-control" placeholder="Year End"
                                                                        value="{{ old('educations.' . $index . '.year_end', $education->year_end) }}">
                                                                </div>
                                                                <div class="col-md-2">
                                                                    <button type="button" class="btn btn-danger remove-education"><i class="ti ti-trash"></i></button>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                            
                                                    <button type="button" id="add-education" class="btn btn-primary mb-3">Tambah Pendidikan</button>
                                                </div>
                                            </div>                                          
                                        </div>
                                    </div>
                                </div>
                             @endif
                        </div>
                        <div class="col-3">
                            <div class="card border shadow-none mb-4">
                                <div class="card-header">
                                    <h4 class="card-title">Foto Profil</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="form-group">
                                            <img src="{{ my_avatar_path($edit) }}" alt="" class="img-thumbnail mb-2">
                                            <div class="custom-file">
                                                <input type="file" name="image_file" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card border shadow-none mb-4">
                                <div class="card-content">
                                    <div class="card-body">
                                        <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center">
                                            <i class="ti ti-device-floppy me-1"></i> Simpan Perubahan
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('css')
@endsection

@section('js')
<script>
    document.getElementById('add-education').addEventListener('click', function () {
        const repeater = document.getElementById('education-repeater');
        const index = repeater.children.length; // Get current count of education items
        const newItem = `
            <div class="education-item row g-3 mb-3">
                <input type="hidden" name="educations[${index}][id]" value="">
                <div class="col-md-3">
                    <input type="text" name="educations[${index}][university]" class="form-control" placeholder="University">
                </div>
                <div class="col-md-3">
                    <input type="text" name="educations[${index}][study_program]" class="form-control" placeholder="Study Program">
                </div>
                <div class="col-md-2">
                    <input type="number" name="educations[${index}][year_start]" class="form-control" placeholder="Year Start">
                </div>
                <div class="col-md-2">
                    <input type="number" name="educations[${index}][year_end]" class="form-control" placeholder="Year End">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-education">Remove</button>
                </div>
            </div>`;
        repeater.insertAdjacentHTML('beforeend', newItem);
    });

    document.addEventListener('click', function (e) {
        if (e.target && e.target.classList.contains('remove-education')) {
            e.target.closest('.education-item').remove();
        }
    });
</script>  
@endsection