@extends('portofolio::layout.user')
@section('content')
<main id="main" class="main">

    <div class="pagetitle">
      <h1>Edit Profile</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item">Profil</li>
          <li class="breadcrumb-item active">Edit Profil</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
      <div class="row justify-content-center">

        <div class="col-xl-11" >

          <div class="card">
            <div class="card-body pt-3">
                
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>⚠️ Perhatian!</strong> Mohon periksa kembali input Anda. Data **gagal disimpan** karena ada kolom yang belum terisi atau tidak valid:
                    <ul class="mt-2 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('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>Berhasil!</strong> {{ 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">
                    <strong>Gagal!</strong> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
              
              <h5 class="card-title center" align="center">Ubah Data</h5>
              <div class="tab-content pt-2">

                <div class="tab-pane fade show active profile-edit pt-3" id="profile-edit">

                  <!-- Profile Edit Form -->
                  <form method="POST" action="{{ route('eporto.profile_edit_camaba', $calon_mahasiswa->id) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row mb-3">
                        <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                        <div class="col-md-8 col-lg-9">
                            @php
                                $imagePath = $calon_mahasiswa->foto 
                                            ? asset('Data/profile_pict_camaba/' . $calon_mahasiswa->foto)
                                            : asset('assets/img/profile-img.jpg'); // Path gambar default jika kosong
                            @endphp
                            
                            <img src="{{ $imagePath }}" 
                                alt="Profile" 
                                style="max-width: 120px; border-radius: 50%;" 
                                id="currentProfileImage"> <div class="pt-2">
                                <input type="file" class="form-control-file" id="foto" name="foto"> </div>
                            
                            {{-- Opsional: Menampilkan error validasi spesifik foto di bawah input --}}
                            @error('foto')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                      <label for="nama" class="col-md-4 col-lg-3 col-form-label">Nama Calon</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="nama" name="nama" value="{{ $calon_mahasiswa->nama }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="tempat_lahir" class="col-md-4 col-lg-3 col-form-label">Tempat Lahir</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="tempat_lahir" type="text" class="form-control" id="tempat_lahir" value="{{ $calon_mahasiswa->tempat_lahir }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="tanggal_lahir" class="col-md-4 col-lg-3 col-form-label">Tanggal Lahir</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="tanggal_lahir" type="date" class="form-control" id="tanggal_lahir" value="{{ $calon_mahasiswa->tanggal_lahir }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="nomor_telepon" class="col-md-4 col-lg-3 col-form-label">Nomor Telepon</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="nomor_telepon" type="text" class="form-control" id="nomor_telepon" value="{{ $calon_mahasiswa->nomor_telepon }}" required>
                      </div>
                    </div>
                    
                    <div class="row mb-3">
                      <label for="nomor_rumah" class="col-md-4 col-lg-3 col-form-label">Nomor Telepon Rumah</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="nomor_rumah" type="text" class="form-control" id="nomor_rumah" value="{{ $calon_mahasiswa->nomor_rumah }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="no_whatsapp" class="col-md-4 col-lg-3 col-form-label">Nomor Whatsapp</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="no_whatsapp" type="text" class="form-control" id="no_whatsapp" value="{{ $calon_mahasiswa->no_whatsapp }}" required>
                      </div>
                    </div>
                    
                    <div class="row mb-3">
                      <label for="nomor_kantor" class="col-md-4 col-lg-3 col-form-label">Nomor Kantor</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="nomor_kantor" name="nomor_kantor" value="{{ old('nomor_kantor', $calon_mahasiswa->nomor_kantor) }}">
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="kelamin" class="col-md-4 col-lg-3 col-form-label">Jenis Kelamin</label>
                      <div class="col-md-8 col-lg-9">
                        <select class="form-select" id="kelamin" name="kelamin" required>
                          <option value="laki-laki" {{ $calon_mahasiswa->kelamin == 'laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                          <option value="perempuan" {{ $calon_mahasiswa->kelamin == 'perempuan' ? 'selected' : '' }}>Perempuan</option>
                        </select>
                      </div>
                    </div>
                    
                    <div class="row mb-3">
                      <label for="status" class="col-md-4 col-lg-3 col-form-label">
                          Status Pernikahan
                      </label>
                      <div class="col-md-8 col-lg-9">
                        <select name="status" id="status" class="form-select" required>
                            <option value="lajang" {{ $calon_mahasiswa->status == 'lajang' ? 'selected' : '' }}>
                                Lajang
                            </option>
                            <option value="menikah" {{ $calon_mahasiswa->status == 'menikah' ? 'selected' : '' }}>
                                Menikah
                            </option>
                            <option value="pernah menikah" {{ $calon_mahasiswa->status == 'pernah menikah' ? 'selected' : '' }}>
                                Pernah Menikah
                            </option>
                        </select>
                      </div>
                    </div>


                    <div class="row mb-3">
                      <label for="alamat" class="col-md-4 col-lg-3 col-form-label">Alamat</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="alamat" name="alamat" value="{{ $calon_mahasiswa->alamat }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="kota" class="col-md-4 col-lg-3 col-form-label">Kota</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="kota" name="kota" value="{{ $calon_mahasiswa->kota }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="inputProvinsi" class="col-md-4 col-lg-3 col-form-label">Provinsi</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="inputProvinsi" name="provinsi" value="{{ $calon_mahasiswa->provinsi }}" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="inputKodePos" class="col-md-4 col-lg-3 col-form-label">Kode Pos</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="inputKodePos" name="kode_pos" value="{{ $calon_mahasiswa->kode_pos }}" required>
                      </div>
                    </div>
                    
                    <div class="row mb-3">
                      <label for="inputKebangsaan" class="col-md-4 col-lg-3 col-form-label">Kebangsaan</label>
                      <div class="col-md-8 col-lg-9">
                        <input type="text" class="form-control" id="inputKebangsaan" name="kebangsaan" value="{{ $calon_mahasiswa->kebangsaan }}" required>
                      </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered" role="document">
                          <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLongTitle">Peringatan!</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              Apakah Kamu Yakin ingin mengirim?
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              <button type="submit" class="btn btn-primary">Submit</button>
                          </div>
                          </div>
                      </div>
                    </div>

                    <div class="text-end">
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Submit</button>
                    </div>
                  </form><!-- End Profile Edit Form -->

                </div>

              </div><!-- End Bordered Tabs -->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main><!-- End #main -->
  
  <script>
    const fotoInput = document.getElementById('foto');
    const profileImage = document.getElementById('currentProfileImage');
    const defaultImagePath = profileImage.src;

    // Tambahkan event listener saat file dipilih
    if (fotoInput) {
        fotoInput.onchange = function (evt) {
            const [file] = evt.target.files;
            
            // Jika file dipilih, tampilkan pratinjau
            if (file) {
                // Membuat URL objek sementara untuk menampilkan gambar tanpa perlu upload
                profileImage.src = URL.createObjectURL(file);
            } else {
                // Jika user membatalkan pilihan file, kembalikan ke gambar sebelumnya (atau default)
                profileImage.src = defaultImagePath;
            }
        }
    }
  </script> 

@endsection