@extends('layouts.app')

@section("user-image")
    <img src="{{ $user->gambar_profile_url }}" onerror="this.src = `{{ asset('images/hipp.jpeg') }}`" alt="profile" />
@endsection

@section("user")
    <div class="user-name">{{ $user->name }}</div>
    <div class="user-level">{{ $user->role_name }}</div>
@endsection

@section('menu')
    <li class="nav-item"><a href="{{ route('home') }}" class=""><i class="fa-solid fa-house"></i>Home</a></li>
    @if($user->is_pembimbing)
    <li class="nav-item"><a href="{{ route('mahasiswa.penilaian') }}" class=""><i class="fa-solid fa-circle-info"></i>Penilaian Mahasiswa</a></li>
    @else
    <li class="nav-item"><a href="{{ route('mitra.info') }}" class=""><i class="fa-solid fa-circle-info"></i>Informasi Mitra</a></li>
    @endif
    @if($user->is_superadmin)
    <li class="nav-item"><a href="{{ route('data_validasi') }}" class=""><i class="fa-solid fa-gear"></i>Validasi Data</a></li>
    @endif
    <li class="nav-item"><a href="{{ route('pengaturan.index') }}" class="active"><i class="fa-solid fa-gear"></i>Pengaturan</a></li>
    <li class="nav-item"><a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i class="fa-solid fa-power-off"></i>Keluar</a></li>

    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
        @csrf
    </form>
@endsection

@section('body')
    <div class="content border">
        <div class="panel">

            <table>
                <tr>
                    <td>1.</td>
                    <td>Ganti Foto Profil:</td>
                    <td>
                        <label class="btn btn-upload" for="profile-img">Upload File</label>
                        <input type="file" class="d-none profile-img" id="profile-img" accept="image/*">
                    </td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Password Lama:</td>
                    <td><input type="password" class="form-control old-password" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Password Baru:</td>
                    <td><input type="password" class="form-control new-password" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>Konfirmasi Password:</td>
                    <td><input type="password" class="form-control confirm-password" /></td>
                </tr>
            </table>
            <div class="text-end"><button class="btn btn-success save-btn">Simpan</button></div>
        </div>
    </div>
@endsection

@section('css')
    <style>
        .form-control {
            border-color: #333;
        }
    </style>
@endsection

@section('script')
    <script>
        $(function() {
            $('.save-btn').click(function() {
                const formData = new FormData()
                formData.append('_token', '{{ csrf_token() }}')
                
                if ($('.profile-img')[0].files.length > 0) {
                    formData.append('profile_img', $('.profile-img')[0].files[0])
                }

                formData.append('old_password', $('.old-password').val())
                formData.append('new_password', $('.new-password').val())
                formData.append('confirm_password', $('.confirm-password').val())

                $.ajax({
                    url: '{{ route("pengaturan.update") }}',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500)
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }

                        modal.hide()
                    }
                })
            })
        })
        function simpan() {
            swal({
                title: '',
                type: 'success',
                text: 'Data berhasil disimpan kedalam system',
                confirmButtonClass: 'btn-secondary'
            })
        }
    </script>
@endsection