@extends('layouts.index')
@section('title')
Pengaturan Akun
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css"
    integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css">
    <style>

    .kbw-signature { width: 200px; height: 200px;}
    label.error {
        color: #F94687;
        font-size: 13px;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 5px;
        padding: 0;
    }

    small.error {
        color: #F94687;
        font-size: 13px;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 5px;
        padding: 0;
    }

    input.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    .dropify-wrapper {
        border: 1px solid #e2e7f1;
        border-radius: .3rem;
        height: 150px;
        margin-bottom: 10px;
    }

    .dropify-wrapper .dropify-message p {
        margin: 5px 410px 0 !important;
    }

</style>
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="{{url('/dashboard')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Account
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Account Setting</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<!-- Container fluid  -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->
    <div class="row">
        <!-- Column -->
        <div class="col-lg-4 col-xlg-3 col-md-5">
            <div class="card">
                <div class="card-body">
                    @php $path=isset(Auth::user()->pegawai) ? asset(Auth::user()->pegawai->foto) : 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80';
                                if (Storage::exists(Auth::user()->photos)) {
                                $path = Storage::url(Auth::user()->photos);
                                }
                                @endphp
                    <center class="mt-4">
                        <img src="{{$path}}" class="rounded-circle" width="150" height="150" style="object-fit: cover;">
                        <h4 class="mt-2">{{ ucwords(Auth::user()->name) }}</h4>
                    </center>
                </div>
                <div>
                    <hr>
                </div>
                <div class="card-body">
                    <small class="text-muted">Name </small>
                    <h6>{{ Auth::user()->name }}</h6>
                    <small class="text-muted">Email </small><br>
                    <h6>{{ Auth::user()->email }}</h6>
                </div>
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-8 col-xlg-9 col-md-7">
            <div class="card overflow-hidden">
                <!-- Tabs -->
                <ul class="nav nav-pills" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pills-setting-tab" data-bs-toggle="pill" href="#previous-month"
                            role="tab" aria-controls="pills-setting" aria-selected="true">Setting</a>
                    </li>
                </ul>
                <!-- Tabs -->
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="previous-month" role="tabpanel"
                        aria-labelledby="pills-setting-tab">
                        <div class="card-body">
                              <form action="{{ route('pengaturan-akun.update', Auth::user()->id) }}" method="post" enctype="multipart/form-data" id="editPenggunaForm">
                                @csrf
                                @method('PUT')

                                <div class="form-group mb-3">
                                    <label class="col-md-12">Full Name</label>
                                    <div class="col-md-12">
                                        <input type="text" name="edit_name" value="{{ Auth::user()->name }}"
                                            placeholder="Johnathan Doe" class="form-control form-control-line @error('edit_name') is-invalid @enderror">
                                    </div>
                                    @error('edit_name')
                                        <div class="mt-1">
                                            <span class="text-danger">{{ $message }}</span>
                                        </div>
                                    @enderror
                                </div>
                               
                                <div class="mb-3">
                                    <label for="example-email" class="col-md-12">Email</label>
                                    <div class="col-md-12">
                                        <input type="email" name="edit_email" value="{{ Auth::user()->email }}"
                                            placeholder="johnathan@admin.com" class="form-control form-control-line @error('edit_email') is-invalid @enderror" id="example-email">
                                    </div>
                                    @error('edit_email')
                                        <div class="mt-1">
                                            <span class="text-danger">{{ $message }}</span>
                                        </div>
                                    @enderror
                                </div>
                                
                                <div class="mb-3">
                                    <label for="formFile" class="form-label">Foto</label>
                                    <input type="file" class="dropify" name="edit_foto"
                                        data-allowed-file-extensions="png jpg jpeg svg" data-default-file="@if(isset(Auth::user()->photos) && Storage::exists(Auth::user()->photos)){{ Storage::url(Auth::user()->photos) }}@endif" data-show-remove="false">
                                </div>
                                
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="formFile" class="form-label">Scan TTD (Signature)</label>
                                            <input type="file" class="dropify" name="edit_scan_ttd"
                                                data-allowed-file-extensions="png jpg jpeg svg" data-default-file="@if(isset(Auth::user()->scan_ttd) && Storage::exists(Auth::user()->scan_ttd)){{ Storage::url(Auth::user()->scan_ttd) }}@endif" data-show-remove="false">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <a href="{{ url('ubah-password') }}" class="btn bnt-sm text-danger">
                                        <i data-feather="lock"></i> <span class="ml-3">Change Password ?</span> 
                                    </a>
                                </div>

                                <div class="mb-3">
                                    <div class="col-sm-12">
                                        <button type="submit" class="btn btn-primary" id="simpanPerubahan">
                                            Save Changes
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>

@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"
    integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>

<script>
    $('.dropify').dropify({
      messages: {
        'default': '',
      }
    });
</script>

<script>
    $(document).ready(function(){
        $('a[data-bs-toggle="pill"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        var activeTab = localStorage.getItem('activeTab');
        if(activeTab){
            $('#pills-tab a[href="' + activeTab + '"]').tab('show');
        }
    });
    
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        });
        $("#editPenggunaForm").validate({
            rules: {
                edit_name: {
                    required: true,
                },
                edit_email: {
                    required: true,
                }
            },
            messages: {
                edit_name: {
                    required: "Nama is required!"
                },
                edit_email: {
                    required: "Email is required!"
                }
            },
            submitHandler: function (form) {
                $("#simpanPerubahan").prop('disabled', true);
                form.submit();
            }
        });
    });

    var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
    $('#clear').click(function(e) {
        e.preventDefault();
        sig.signature('clear');
        $("#signature64").val('');
    });
</script>
@endsection