@extends('layouts.backoffice.index', ['title' => 'Profil'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <h5><b>Profil</b></h5>
            </div>
            <div class="card-body">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('backoffice.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label><b> Nama </b> <span class="text-danger"><b>*</b></span></label>
                            <input type="text" class="form-control" name="name"
                                value="{{ old('name', $user->full_name ?? ($user->name ?? '')) }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b> Email </b> <span class="text-danger"><b>*</b></span></label>
                            <input type="email" class="form-control" name="email"
                                value="{{ old('email', $user->email ?? '') }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b> Nomor Telepon </b></label>
                            <input type="text" class="form-control" name="phone"
                                value="{{ old('phone', $user->phone ?? '') }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b> Alamat </b></label>
                            <textarea class="form-control" name="address">{{ old('address', $user->address ?? '') }}</textarea>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b> Foto </b></label>

                            {{-- show current photo preview --}}
                            @if (!empty($user->photo))
                                <div class="mb-2">
                                    <img src="{{ asset('storage/' . $user->photo) }}" alt="avatar"
                                        style="max-width:250px;border-radius:8px;" />
                                </div>
                            @endif

                            <div class="upload-area">
                                <input type="file" name="photo" class="upload-input mt-2" id="photo-add"
                                    accept="image/*">
                                <div class="upload-message">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                    <p class="mt-2 mb-0">Klik atau tarik foto ke sini</p>
                                    <small class="text-muted">Format: jpg, png, jpeg</small>
                                </div>
                            </div>
                            <div id="preview-photo-add" class="mt-3 ml-1 text-center row">
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="">&emsp;</label>

                            <div class="alert alert-warning">
                                Peringatan : Kosongi jika tidak ingin ubah password
                            </div>

                            <div class="form-group">
                                <label><b>Password</b></label>
                                <input type="password" id="password" name="password" class="form-control">
                            </div>

                            <div class="form-group">
                                <label><b>Konfirmasi Password</b></label>
                                <input type="password" id="password_confirmation" name="password_confirmation"
                                    class="form-control">
                                <div class="invalid-feedback">
                                    Password tidak cocok
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 text-left">
                            <span><b> Catatan : </b></span>
                            <p>Masukan dengan tanda bintang merah ( <span class="text-danger">*</span> ) wajib diisi / dipilih</p>
                        </div>
                        <div class="col-md-6 text-right">
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-save"></i> Simpan Data
                            </button>
                            <button class="btn btn-danger">
                                <i class="fa fa-times"></i> Batal
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </section>
@endsection

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/css/select2.min.css" rel="stylesheet" />
    <style>
        /* Styling Custom Input File agar terlihat seperti Dropzone */
        .upload-area {
            position: relative;
            width: 100%;
            min-height: 150px;
            border: 2px dashed #6777ef;
            /* Warna primary theme */
            border-radius: 10px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .upload-area:hover {
            background-color: #eef0ff;
            border-color: #4c59d6;
        }

        /* Sembunyikan input file asli tapi buat memenuhi area agar bisa diklik */
        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .upload-message {
            z-index: 1;
            pointer-events: none;
            /* Agar klik tembus ke input */
        }

        /* Styling Preview Image */
        .preview-single img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .preview-gallery-item {
            position: relative;
            margin-bottom: 15px;
        }

        .preview-gallery-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
        }


        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
@endpush
@push('scripts')
    {{-- CKEDITOR --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>
    <script>
        const password = document.getElementById('password');
        const confirm = document.getElementById('password_confirmation');

        function validatePassword() {
            if (confirm.value === '') {
                confirm.classList.remove('is-invalid');
                return;
            }

            if (password.value !== confirm.value) {
                confirm.classList.add('is-invalid');
            } else {
                confirm.classList.remove('is-invalid');
            }
        }

        password.addEventListener('keyup', validatePassword);
        confirm.addEventListener('keyup', validatePassword);
    </script>

    <script>
        function handleFileSelect(event, previewId, isMultiple = false) {
            const files = event.target.files;
            const previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = '';

            if (files.length === 0) return;

            if (isMultiple) {
                Array.from(files).forEach(file => {
                    if (file.type.match('image.*')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const colDiv = document.createElement('div');
                            colDiv.className = 'col-4 preview-gallery-item fade-in';
                            colDiv.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                            previewContainer.appendChild(colDiv);
                        }
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                const file = files[0];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = 'preview-single fade-in';
                        div.innerHTML = `<img src="${e.target.result}" alt="Preview Thumbnail">`;
                        previewContainer.appendChild(div);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }


        document.getElementById('photo-add').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-photo-add', false);
        });
    </script>
@endpush