@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="إضافة مستخدم جديد" />
    
    @if(session('success'))
        <div class="alert alert-success text-center alert-dismissible fade show">{{ session('success') }}</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    @endif

    <form action="{{ route('users.store') }}" method="POST" class="form-floating">
        @csrf

        {{-- الاسم --}}
        <div class="form-floating mb-3">
            <input type="text" name="name" id="name" value="{{ old('name')}}" class="form-control @error('name') is-invalid @enderror">
            <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"
                    value="{{ old('phone')}}"
                    class="form-control @error('phone') is-invalid @enderror 
                    @if(old('phone') && !$errors->has('phone')) is-valid @endif" >
            <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" value="{{ old('NID')}}" class="form-control @error('NID') is-invalid @enderror">
            <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" value="{{old('email')}}" class="form-control @error('email') is-invalid @enderror">
            <label for="email">البريد الإلكتروني (اختياري)</label>
            @error('email')
                <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') == '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') == 'منسق القطاع' ? 'selected' : '' }}>منسق القطاع</option>
                            <option value="مدخل بيانات" {{ old('job_title') == 'مدخل بيانات' ? 'selected' : '' }}>مدخل بيانات</option>
                            <option value="منسق كنيسة" {{ old('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') }}" 
                            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="alert alert-warning alert-dismissible fade show text-center" role="alert">
            كلمة المرور الإفتراضية للمستخدم الجديد هي <strong>123456789</strong>. يُرجى تغييرها بعد تسجيل الدخول لأول مرة.
        </div>

        <div class="row">
            <!-- الأدوار -->
            <div class="form-group col-md-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') == $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'))->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-success text-center">إضافة</button>
        </div>
    </form>
</div>
@endsection