@extends('layouts.app')

@section('title', 'Profil & Ubah Password')

@section('breadcrumb')
<nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-2">
        <li class="inline-flex items-center">
            <a href="#"
                class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 dark:text-gray-400 dark:hover:text-white">Dashboard</a>
        </li>
        <li aria-current="page">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd" />
                </svg>
                <span class="ml-1 text-sm font-medium text-gray-500 dark:text-gray-400">Profil</span>
            </div>
        </li>
    </ol>
</nav>
@endsection

@section('content')
<div x-data="{ tab: '{{ old('_tab', 'info') }}' }">

    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Profil & Pengaturan Akun</h1>

    {{-- Session Messages --}}
    @if (session('success'))
    <x-alert type="success">{{ session('success') }}</x-alert>
    @endif
    @if (session('error'))
    <x-alert type="danger">{{ session('error') }}</x-alert>
    @endif

    {{-- TAB NAVIGATION --}}
    <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
            <li class="mr-2">
                <button @click="tab = 'info'" :class="tab === 'info' ?
                            'text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500 border-b-2' :
                            'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'"
                    class="inline-flex items-center gap-2 p-4 rounded-t-lg">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                            clip-rule="evenodd" />
                    </svg>
                    Info Profil
                </button>
            </li>
            <li class="mr-2">
                <button @click="tab = 'password'" :class="tab === 'password' ?
                            'text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500 border-b-2' :
                            'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'"
                    class="inline-flex items-center gap-2 p-4 rounded-t-lg">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                            clip-rule="evenodd" />
                    </svg>
                    Ubah Password
                </button>
            </li>
        </ul>
    </div>

    {{-- TAB: INFO PROFIL --}}
    <div x-show="tab === 'info'" x-cloak>
        <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <div class="flex items-center gap-6 mb-6">
                <div
                    class="w-20 h-20 rounded-full bg-primary-600 flex items-center justify-center text-white text-3xl font-bold flex-shrink-0">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div>
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ auth()->user()->name }}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ auth()->user()->email }}</p>
                    <x-badge
                        color="{{ auth()->user()->role->value === 'super_admin' ? 'red' : (auth()->user()->role->value === 'operator' ? 'indigo' : (auth()->user()->role->value === 'teacher' ? 'green' : 'yellow')) }}"
                        class="mt-1">
                        {{ ucfirst(str_replace('_', ' ', auth()->user()->role->value)) }}
                    </x-badge>
                </div>
            </div>

            <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-5">
                @csrf
                @method('PATCH')
                <input type="hidden" name="_tab" value="info">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama
                            Lengkap</label>
                        <input type="text" name="name" id="name" value="{{ old('name', auth()->user()->name) }}"
                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white @error('name') border-red-500 @enderror"
                            required>
                        @error('name')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="email"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
                        <input type="email" name="email" id="email" value="{{ old('email', auth()->user()->email) }}"
                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white @error('email') border-red-500 @enderror"
                            required>
                        @error('email')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                @if (auth()->user()->role->value === 'teacher' || auth()->user()->role->value === 'student')
                <div>
                    <label for="photo" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Foto
                        Profil</label>
                    <input type="file" name="photo" id="photo" accept="image/*"
                        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600">
                    @error('photo')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
                @endif

                <div class="flex justify-end">
                    <button type="submit"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- TAB: UBAH PASSWORD --}}
    <div x-show="tab === 'password'" x-cloak x-data="{
            newPass: '',
            confirmPass: '',
            get mismatch() { return this.confirmPass.length > 0 && this.newPass !== this.confirmPass; }
        }">
        <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-5">Ubah Password</h3>

            <form method="POST" action="{{ route('profile.password') }}" class="space-y-5">
                @csrf
                @method('PUT')
                <input type="hidden" name="_tab" value="password">

                <div>
                    <label for="current_password"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password Lama</label>
                    <input type="password" name="current_password" id="current_password"
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white @error('current_password') border-red-500 @enderror"
                        placeholder="••••••••" required>
                    @error('current_password')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="new_password"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password Baru</label>
                    <input type="password" name="password" id="new_password" x-model="newPass"
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white @error('password') border-red-500 @enderror"
                        placeholder="••••••••" required minlength="8">
                    @error('password')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="password_confirmation"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Konfirmasi Password
                        Baru</label>
                    <input type="password" name="password_confirmation" id="password_confirmation" x-model="confirmPass"
                        :class="mismatch ? 'border-red-500' : ''"
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                        placeholder="••••••••" required>
                    <p x-show="mismatch" x-cloak class="mt-1 text-sm text-red-600 dark:text-red-400">Password tidak
                        cocok</p>
                </div>

                <div class="flex justify-end">
                    <button type="submit" :disabled="mismatch" :class="mismatch ? 'opacity-50 cursor-not-allowed' : ''"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700">
                        Ubah Password
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection