@extends('layouts.app')

@section('content')
<style>
    /* لمسة فنية لربط العناصر ببعضها بشكل احترافي في الـ Input Group */
    .input-group > .form-floating:not(:last-child) > .form-control,
    .input-group > .form-floating:not(:last-child) > .form-select {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
    }

    .input-group > .form-floating:not(:first-child) > .form-control,
    .input-group > .form-floating:not(:first-child) > .form-select {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
</style>

<div class="container">
    <x-header title="تعديل المستخدم: {{ $user->name }}" />

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form action="{{ route('users.update', $user) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="form-floating mb-3">
            <input type="text" name="name" id="name" class="form-control" value="{{ old('name', $user->name) }}" >
            <label for="name">الاسم</label>
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-floating mb-3">
            <input type="number" name="phone" id="phone" class="form-control" value="{{ old('phone', $user->phone) }}" >
            <label for="phone">الهاتف</label>
            @error('phone')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-floating mb-3">
            <input type="number" name="NID" id="NID" class="form-control" value="{{ old('NID', $user->NID) }}" >
            <label for="NID">الرقم القومي</label>
            @error('NID')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-floating mb-3">
            <input type="email" name="email" id="email" class="form-control" value="{{ old('email', $user->email) }}" autocomplete="off">
            <label for="email">البريد الإلكتروني (اختياري)</label>
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-floating mb-3">
            <input type="password" name="password" id="password" class="form-control" autocomplete="off">
            <label for="password">كلمة المرور الجديدة (اختياري)</label>
            @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-floating mb-3">
            <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" autocomplete="off">
            <label for="password_confirmation">تأكيد كلمة المرور</label>
            @error('password_confirmation')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="row">
            <div class="col-md-12">
                <!-- الحقل المخفي لضمان إرسال قيمة 0 -->
                <input type="hidden" name="is_staff" value="0">

                <div class="input-group mb-3">
                    
                    <!-- 1. جزء الزر (موظف) في البداية -->
                    <input type="checkbox" 
                        class="btn-check" 
                        id="is_staff" 
                        name="is_staff" 
                        value="1" 
                        autocomplete="off"
                        @if(old('is_staff', $user->is_staff) == '1') checked @endif>
                    <label class="btn btn-outline-primary d-flex align-items-center" for="is_staff" style="min-width: 100px; justify-content: center;">
                        <i class="fa-solid fa-user-tie me-2"></i> موظف
                    </label>

                    <!-- 2. قائمة الوظيفة مع Floating Label -->
                    <div class="form-floating flex-grow-1">
                        <select class="form-select @error('job_title') is-invalid @enderror tom-select" name="job_title" id="job_title">
                            <option value="" selected disabled>إختار الوظيفة</option>
                            <option value="منسق القطاع" {{ old('job_title', $user->job_title) == 'منسق القطاع' ? 'selected' : '' }}>منسق القطاع</option>
                            <option value="مدخل بيانات" {{ old('job_title', $user->job_title) == 'مدخل بيانات' ? 'selected' : '' }}>مدخل بيانات</option>
                            <option value="منسق كنيسة" {{ old('job_title', $user->job_title) == 'منسق كنيسة' ? 'selected' : '' }}>منسق كنيسة</option>
                        </select>
                        <label for="job_title">الوظيفة</label>
                    </div>

                    <!-- 3. حقل الراتب الأساسي مع Floating Label -->
                    <div class="form-floating flex-grow-1">
                        <input type="number" 
                            name="basic_salary" 
                            id="basic_salary" 
                            value="{{ old('basic_salary', $user->basic_salary) }}" 
                            class="form-control @error('basic_salary') is-invalid @enderror" 
                            placeholder="الراتب الأساسي"
                            step="0.01">
                        <label for="basic_salary">الراتب الأساسي</label>
                    </div>

                </div>

                <!-- رسائل الخطأ تظهر تحت الـ Group بالكامل لضمان التنسيق -->
                @error('basic_salary')
                    <div class="text-danger small mb-2">{{ $message }}</div>
                @enderror
                @error('job_title')
                    <div class="text-danger small mb-2">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- الأدوار --}}
        <div class="row">
            <!-- الأدوار -->
            <div class="form-group col-3">
                <label class="mb-2">اختر الدور:</label>
                <div class="d-flex flex-column gap-2">
                        <input type="radio" 
                            class="btn-check" 
                            name="role" 
                            id="role_null" 
                            value="" 
                            autocomplete="off"
                            @if(old('role') == '') checked @endif>
                        <label class="btn btn-outline-success" for="role_null">
                            إيقاف الحساب
                        </label>
                    @foreach($roles as $role)
                        <input type="radio" 
                            class="btn-check" 
                            name="role" 
                            id="role_{{ $role->id }}" 
                            value="{{ $role->name }}" 
                            autocomplete="off"
                              @if(old('role', $user->roles->pluck('name')->first()) == $role->name) checked @endif>
                        <label class="btn btn-outline-success" for="role_{{ $role->id }}">
                            {{ $role->name }}
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- الكنائس -->
            <div class="form-group col-9">
                <label class="mb-2">اختر الكنائس المرتبطة:</label>
                <div class="row">
                    @foreach($churches as $church)
                        <div class="col-md-4 mb-2">
                            <input type="checkbox" 
                                class="btn-check" 
                                id="church_{{ $church->id }}" 
                                name="churches[]" 
                                value="{{ $church->id }}" 
                                autocomplete="off"
                                 @if(collect(old('churches', $user->churches->pluck('id')->toArray()))->contains($church->id)) checked @endif>
                            <label class="btn btn-outline-primary w-100" for="church_{{ $church->id }}">
                                {{ $church->name }} {{ $church->address ? ' - ' . $church->address : '' }}
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="text-center my-3">
            <button type="submit" class="btn btn-primary">تحديث</button>
        </div>

    </form>
</div>
@endsection