@extends('layouts.app')
@section('content')

<div class="modal fade" id="modalGantiPassword" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="{{route('profile.ganti_password')}}" method="POST" autocomplete="off" id="change-password-form">
            @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">Ganti Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="fv-row mb-7 fv-plugins-icon-container">
                    <!--begin::Label-->
                    <label class="required fw-bold fs-6 mb-2">Password Lama</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input type="password" name="old_password" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Password Lama">
                    <!--end::Input-->
                <div class="fv-plugins-message-container invalid-feedback"></div></div>
                <div class="fv-row mb-7 fv-plugins-icon-container">
                    <!--begin::Label-->
                    <label class="required fw-bold fs-6 mb-2">Password Baru</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input type="password" name="password" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Password Baru">
                    <!--end::Input-->
                <div class="fv-plugins-message-container invalid-feedback"></div></div>
                <div class="fv-row mb-7 fv-plugins-icon-container">
                    <!--begin::Label-->
                    <label class="required fw-bold fs-6 mb-2">Ulangi Password Baru</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input type="password" name="password_confirmation" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Ulangi Password Baru">
                    <!--end::Input-->
                <div class="fv-plugins-message-container invalid-feedback"></div></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    
                    <!--begin::Submit-->
                    <button type="submit" id="kt_submit" class="btn btn-danger">
                        <!--begin::Indicator-->
                        <span class="indicator-label">Reset Password</span>
                        <span class="indicator-progress">Please wait...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        <!--end::Indicator-->
                    </button>
                    <!--begin::Submit-->
                </div>
            </div>
        </form>
    </div>
</div>

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            @include('layouts.success_error')
            <!--begin::Row-->
            <div class="row g-5 g-xl-8">
                <div class="col-xl-12">
                    <!--begin::List Widget 3-->
                    <div class="card card-xl-stretch mb-xl-8">
                        <!--begin::Header-->

                        <div class="card-header py-5">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="text-dark fw-bolder fs-1">Profile Saya</span>
                                <span class="text-muted mt-1 fw-bold fs-7">Biodata User</span>
                            </h3>
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        <div class="card-body pt-2">
                            <table class="table table-bordered table-md">
                                <tbody>
                                    <tr>
                                        <th width="30%">NIP / USERNAME</th>
                                        <td>{{auth()->user()->nip}}</td>
                                    </tr>
                                    <tr>
                                        <th>Nama</th>
                                        <td>{{auth()->user()->name}}</td>
                                    </tr>
                                    <tr>
                                        <th>Jabatan</th>
                                        <td>{{auth()->user()->jabatan}}</td>
                                    </tr>
                                    <tr>
                                        <th>Satker</th>
                                        <td>{{auth()->user()->satker->nama}}</td>
                                    </tr>
                                    <tr>
                                        <th>Hak Aplikasi</th>
                                        <td>{{auth()->user()->jabatan_satker}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="alert bg-light-danger border border-danger border border-dashed w-100 p-5 mb-10">
                                <!--begin::Content-->
                                    <div class="d-flex justify-content-between mb-3">
                                        <div>
                                            <span class="text-muted fs-7 fw-bold">Ubah password lama dengan password baru</span>
                                            <h6 class="mb-1">Ganti Password</h6>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#modalGantiPassword">GANTI PASSWORD</button>
                                        </div>
                                    </div>
                                <!--end::Content-->
                              </div>

                            <div class="d-flex justify-content-end">
                                <!--begin::Submit-->
                                <a type="button" class="btn btn-light me-2" href="{{route('satker.index')}}">
                                    <!--begin::Indicator-->
                                    <span class="indicator-label">Tutup</span>
                                    <!--end::Indicator-->
                                </a>
                                <!--begin::Submit-->
                            </div>

                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end:List Widget 3-->
                </div>
            </div>
            <!--end::Row-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
</div>
<!--end::Content-->
@endsection

{{-- @section('js')
<script>
    $(document).ready(function() {
        $('#change-password-form').submit(function(e) {
            e.preventDefault();

            // Get the form data
            var formData = $(this).serialize();

            // Send the Ajax request
            $.ajax({
                type: 'POST',
                url: '{{ route("profile.ganti_password") }}',
                data: formData,
                success: function(response) {
                    // Handle the success response
                    console.log(response);
                    alert(response.success);
                },
                error: function(response) {
                    // Handle the error response
                    console.log(response);
                    alert(response);
                }
            });
        });
    });
</script>
@endsection --}}