@extends('adminlte::page')

@section('title', 'Profil Saya')

@section('content_header')
    <h1><i class="fas fa-user-circle mr-2"></i>Profil Saya</h1>
@stop

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <i class="fas fa-check-circle mr-1"></i>{{ session('success') }}
        </div>
    @endif

    <div class="row">
        {{-- Kad Maklumat Pengguna --}}
        <div class="col-md-4">
            <div class="card card-primary card-outline">
                <div class="card-body text-center pt-4">
                    <div class="mb-3 position-relative d-inline-block">
                        @if ($user->foto_profil)
                            <img src="{{ asset('storage/' . $user->foto_profil) }}" alt="Foto Profil" id="previewFoto"
                                class="img-circle elevation-2"
                                style="width:110px;height:110px;object-fit:cover;cursor:pointer"
                                onclick="document.getElementById('inputFoto').click()">
                        @else
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=007bff&color=fff&size=110"
                                alt="Avatar" id="previewFoto" class="img-circle elevation-2"
                                style="width:110px;height:110px;object-fit:cover;cursor:pointer"
                                onclick="document.getElementById('inputFoto').click()">
                        @endif
                        <span class="position-absolute" style="bottom:0;right:0">
                            <button type="button" class="btn btn-sm btn-primary rounded-circle p-1"
                                style="width:28px;height:28px;line-height:1"
                                onclick="document.getElementById('inputFoto').click()" title="Tukar gambar">
                                <i class="fas fa-camera" style="font-size:12px"></i>
                            </button>
                        </span>
                    </div>
                    <p class="text-muted small mb-2">Klik gambar untuk tukar foto</p>
                    <h4 class="font-weight-bold mb-1">{{ $user->name }}</h4>
                    <span
                        class="badge badge-{{ $user->role === 'admin' ? 'danger' : ($user->role === 'supervisor' ? 'warning' : ($user->role === 'checker' ? 'info' : 'success')) }} px-3 py-1 mb-2">
                        {{ strtoupper($user->role) }}
                    </span>
                    <p class="text-muted mt-2 mb-0"><i class="fas fa-envelope mr-1"></i>{{ $user->email }}</p>
                    @if ($user->foto_profil)
                        <form action="{{ route('profile.hapus-foto') }}" method="POST" class="mt-2"
                            onsubmit="return confirm('Padam gambar profil?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger">
                                <i class="fas fa-trash mr-1"></i>Padam Foto
                            </button>
                        </form>
                    @endif
                </div>
                <div class="card-footer text-center text-muted small">
                    Ahli sejak {{ $user->created_at->translatedFormat('d F Y') }}
                </div>
            </div>

            {{-- Kad Maklumat Sekolah --}}
            @if ($user->kod_sekolah || $user->nama_sekolah || $user->daerah)
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-school mr-1"></i> Maklumat Sekolah</h3>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <tr>
                                <td class="text-muted pl-3" width="45%">Kod Sekolah</td>
                                <td><strong>{{ $user->kod_sekolah ?? '—' }}</strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted pl-3">Nama Sekolah</td>
                                <td><strong>{{ $user->nama_sekolah ?? '—' }}</strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted pl-3">Jenis Sekolah</td>
                                <td><strong>{{ is_array($user->jenis_sekolah) ? implode(', ', $user->jenis_sekolah) : $user->jenis_sekolah ?? '—' }}</strong>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted pl-3">Daerah</td>
                                <td><strong>{{ $user->daerah ?? '—' }}</strong></td>
                            </tr>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        {{-- Borang Kemaskini --}}
        <div class="col-md-8">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-edit mr-1"></i> Kemaskini Maklumat</h3>
                </div>
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    {{-- Input file tersembunyi --}}
                    <input type="file" id="inputFoto" name="foto_profil"
                        accept="image/jpg,image/jpeg,image/png,image/webp" class="d-none">
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- Maklumat Akaun --}}
                        <h6 class="text-primary font-weight-bold border-bottom pb-2 mb-3">
                            <i class="fas fa-id-card mr-1"></i> Maklumat Akaun
                        </h6>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">Nama Penuh</label>
                            <div class="col-md-8">
                                <input type="text" name="name"
                                    class="form-control @error('name') is-invalid @enderror"
                                    value="{{ old('name', $user->name) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">E-mel</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control bg-light" value="{{ $user->email }}" disabled>
                                <small class="text-muted">E-mel tidak boleh diubah.</small>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">Peranan</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control bg-light" value="{{ strtoupper($user->role) }}"
                                    disabled>
                            </div>
                        </div>

                        {{-- Maklumat Sekolah (read-only) --}}
                        @if ($user->kod_sekolah || $user->nama_sekolah || $user->daerah)
                            <h6 class="text-info font-weight-bold border-bottom pb-2 mb-3 mt-4">
                                <i class="fas fa-school mr-1"></i> Maklumat Sekolah
                            </h6>
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Kod Sekolah</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control bg-light"
                                        value="{{ $user->kod_sekolah ?? '—' }}" disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Nama Sekolah</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control bg-light"
                                        value="{{ $user->nama_sekolah ?? '—' }}" disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Jenis Sekolah</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control bg-light"
                                        value="{{ is_array($user->jenis_sekolah) ? implode(', ', $user->jenis_sekolah) : $user->jenis_sekolah ?? '—' }}"
                                        disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Daerah</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control bg-light"
                                        value="{{ $user->daerah ?? '—' }}" disabled>
                                </div>
                            </div>
                        @endif

                        {{-- Tukar Kata Laluan --}}
                        <h6 class="text-warning font-weight-bold border-bottom pb-2 mb-3 mt-4">
                            <i class="fas fa-lock mr-1"></i> Tukar Kata Laluan
                            <small class="text-muted font-weight-normal">(biarkan kosong jika tidak ingin tukar)</small>
                        </h6>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">Kata Laluan Baru</label>
                            <div class="col-md-8">
                                <input type="password" name="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Minimum 8 aksara" autocomplete="new-password">
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label">Sahkan Kata Laluan</label>
                            <div class="col-md-8">
                                <input type="password" name="password_confirmation" class="form-control"
                                    placeholder="Ulang kata laluan baru" autocomplete="new-password">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        document.getElementById('inputFoto').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // Semak saiz fail (max 2MB)
            if (file.size > 2 * 1024 * 1024) {
                alert('Saiz fail melebihi 2MB. Sila pilih gambar yang lebih kecil.');
                this.value = '';
                return;
            }

            // Preview gambar sebelum upload
            const reader = new FileReader();
            reader.onload = function(ev) {
                document.getElementById('previewFoto').src = ev.target.result;
            };
            reader.readAsDataURL(file);

            // Auto-submit nota: tidak auto-submit, pengguna klik "Simpan Perubahan"
            // Tunjuk notis
            const notis = document.createElement('div');
            notis.className = 'alert alert-info alert-sm mt-1 mb-0 py-1 px-2';
            notis.style.fontSize = '0.8em';
            notis.innerHTML =
                '<i class="fas fa-info-circle mr-1"></i>Gambar dipilih. Klik <strong>Simpan Perubahan</strong> untuk upload.';
            const sedia = document.querySelector('.alert.alert-info.mt-1');
            if (!sedia) {
                document.getElementById('previewFoto').closest('.card-body').appendChild(notis);
            }
        });
    </script>
@stop
