@extends($layout)
@section('content')
    @if (Auth::user()->hasRole('customer'))
        <div class="container">
    @endif

    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Profile</h4>
                <h6>User Profile</h6>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="profile-set">
                    <div class="profile-head"></div>
                    <div class="profile-top">
                        <div class="profile-content">
                            <div class="profile-contentimg">
                                <img src="{{ $user->profile_picture ? asset('img/profiles/' . $user->profile_picture) : asset('img/customer/customer5.jpg') }}"
                                    alt="img" id="blah" />

                                <form action="{{ route('profile.updatePhoto', $user->id) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="profileupload">
                                        <input type="file" id="imgInp" name="profile_picture" accept="image/*" />
                                        <a href="javascript:void(0);">
                                            <img src="{{ asset('img/icons/edit-set.svg') }}" alt="img" />
                                        </a>
                                    </div>
                            </div>
                            <div class="profile-contentname">
                                <h2>{{ $user->name }}</h2>
                                <h4>Updates Your Photo and Personal Details.</h4>
                            </div>

                        </div>
                        <div class="ms-auto">
                            <button type="submit" class="btn btn-submit me-2">Save</button>
                            {{-- <a href="javascript:void(0);" class="btn btn-cancel">Cancel</a> --}}
                        </div>
                        </form>
                    </div>
                </div>
                <form action="{{ route('profile.storeOrUpdate', $user->id) }}" method="POST">
                    @csrf
                    @method('PUT') <!-- Method spoofing untuk update -->


                    <div class="row">
                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" value="{{ old('name', $user->name ?? '') }}"
                                    placeholder="William" class="form-control" required />
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" value="{{ old('email', $user->email ?? '') }}"
                                    placeholder="william@example.com" class="form-control" required />
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" name="phone" value="{{ old('phone', $user->phone ?? '') }}"
                                    placeholder="+1452 876 5432" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Foto KTP -->
                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>Foto KTP</label>
                                @if (!empty($user->ktp_photo))
                                    <img src="{{ asset('img/ktp/' . $user->ktp_photo) }}" alt="KTP Photo"
                                        class="img-thumbnail mb-2" width="200">
                                @else
                                    <p class="text-muted">Belum ada foto KTP</p>
                                @endif
                                <input type="file" name="ktp_photo" class="form-control" disabled />
                            </div>
                        </div>

                        <!-- Foto NPWP -->
                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>Foto NPWP</label>
                                @if (!empty($user->npwp_photo))
                                    <img src="{{ asset('img/npwp/' . $user->npwp_photo) }}" alt="NPWP Photo"
                                        class="img-thumbnail mb-2" width="200">
                                @else
                                    <p class="text-muted">Belum ada foto NPWP</p>
                                @endif
                                <input type="file" name="npwp_photo" class="form-control" disabled />
                            </div>
                        </div>
                    </div>



                    <div class="row">
                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>Old Password</label>
                                <div class="pass-group">
                                    <input type="password" name="old_password" class="pass-input" id="old_password" />
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label>New Password</label>
                                <div class="pass-group">
                                    <input type="password" name="password" class="pass-input" id="new_password" />

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


                        <div class="col-12">
                            <button type="submit" class="btn btn-submit me-2">Submit</button>
                            @if (Auth::user()->hasRole(['admin', 'karyawan']))
                                <a href="{{ route('user.index') }}" class="btn btn-cancel">Cancel</a>
                            @else
                                <a href="{{ '/' }}" class="btn btn-cancel">Cancel</a>
                            @endif
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    </div>
    @if (Auth::user()->hasRole('customer'))
        </div>
    @endif
    <script>
        document.getElementById("new_password").addEventListener("input", function() {
            document.getElementById("old_password").required = this.value.length > 0;
        });
    </script>

    @if (session('success'))
        @push('scripts')
            <script>
                Swal.fire({
                    title: "{{ session('success') }}",
                    icon: "success",
                    draggable: true,
                    timer: 1500,
                    showConfirmButton: false
                });
            </script>
        @endpush
    @elseif (session('error'))
        @push('scripts')
            <script>
                Swal.fire({
                    title: "Oops...",
                    text: "{{ session('error') }}",
                    icon: "error",
                    draggable: true,
                    showConfirmButton: true
                });
            </script>
        @endpush
    @endif

    <script>
        document.getElementById('imgInp').onchange = function(evt) {
            const [file] = this.files;
            if (file) {
                document.getElementById('blah').src = URL.createObjectURL(file);
            }
        };
    </script>
@endsection