@extends('layouts.division')
@section('title', 'Profile & Settings')
@section('content')

<div class="mb-6">
    <h1 class="text-2xl font-bold text-slate-800">Profile & Settings</h1>
    <p class="text-slate-500 text-sm mt-1">Manage your division's contact information and account password</p>
</div>

<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">

    {{-- Division profile --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h2 class="font-semibold text-slate-800 mb-4 pb-2 border-b border-slate-100">Division Information</h2>
        <form method="POST" action="{{ route('division.profile.update') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Division Name</label>
                <input type="text" value="{{ $division->name }}" disabled
                       class="w-full border border-slate-200 rounded-lg px-3 py-2.5 text-sm bg-slate-50 text-slate-400 cursor-not-allowed">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Person</label>
                <input type="text" name="contact_person" value="{{ old('contact_person', $division->contact_person) }}"
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Email</label>
                <input type="email" name="contact_email" value="{{ old('contact_email', $division->contact_email) }}"
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Contact Phone</label>
                <input type="text" name="contact_phone" value="{{ old('contact_phone', $division->contact_phone) }}"
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Address</label>
                <textarea name="address" rows="3"
                          class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 resize-none">{{ old('address', $division->address) }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Logo</label>
                @if($division->logo_path)
                    <img src="{{ $division->logoUrl() }}" class="w-16 h-16 object-contain rounded-lg border border-slate-200 mb-2">
                @endif
                <input type="file" name="logo" accept="image/*"
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <button type="submit"
                    class="w-full bg-green-600 hover:bg-green-700 text-white text-sm font-semibold py-2.5 rounded-lg transition-colors">
                Save Changes
            </button>
        </form>
    </div>

    {{-- Change password --}}
    <div class="bg-white rounded-xl border border-slate-200 p-6">
        <h2 class="font-semibold text-slate-800 mb-4 pb-2 border-b border-slate-100">Change Password</h2>
        <form method="POST" action="{{ route('division.profile.password') }}" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Current Password</label>
                <input type="password" name="current_password" required
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">New Password</label>
                <input type="password" name="password" required
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Confirm New Password</label>
                <input type="password" name="password_confirmation" required
                       class="w-full border border-slate-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            </div>
            <div class="pt-2">
                <button type="submit"
                        class="w-full bg-slate-800 hover:bg-slate-900 text-white text-sm font-semibold py-2.5 rounded-lg transition-colors">
                    Update Password
                </button>
            </div>
        </form>
    </div>
</div>
@endsection