@extends('admin.layouts.app')

@section('title', 'افزودن کاربر جدید')

@section('content')
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">اطلاعات کاربر جدید</h5>
            </div>

            <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="card-body">
                    <div class="row g-3">
                        <!-- Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">نام و نام خانوادگی <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Phone -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label">شماره موبایل <span class="text-danger">*</span></label>
                            <input type="text" class="form-control font-monospace @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" placeholder="09123456789" required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="col-md-6">
                            <label for="email" class="form-label">ایمیل</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}">
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Password -->
                        <div class="col-md-6">
                            <label for="password" class="form-label">رمز عبور <span class="text-danger">*</span></label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Role -->
                        <div class="col-md-6">
                            <label for="role" class="form-label">نقش <span class="text-danger">*</span></label>
                            <select class="form-select @error('role') is-invalid @enderror" id="role" name="role" required>
                                <option value="">انتخاب کنید</option>
                                <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>مدیر</option>
                                <option value="driver" {{ old('role') === 'driver' ? 'selected' : '' }}>راننده</option>
                                <option value="customer" {{ old('role') === 'customer' ? 'selected' : '' }}>مشتری</option>
                            </select>
                            @error('role')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div class="col-md-6">
                            <label for="status" class="form-label">وضعیت <span class="text-danger">*</span></label>
                            <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                <option value="active" {{ old('status') === 'active' ? 'selected' : '' }}>فعال</option>
                                <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>غیرفعال</option>
                                <option value="suspended" {{ old('status') === 'suspended' ? 'selected' : '' }}>معلق</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- National Code -->
                        <div class="col-md-6">
                            <label for="national_code" class="form-label">کد ملی</label>
                            <input type="text" class="form-control font-monospace @error('national_code') is-invalid @enderror" id="national_code" name="national_code" value="{{ old('national_code') }}" maxlength="10">
                            @error('national_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Address -->
                        <div class="col-12">
                            <label for="address" class="form-label">آدرس</label>
                            <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" rows="2">{{ old('address') }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Driver-specific fields -->
                    <div id="driver-fields" class="mt-4 p-3 bg-light rounded" style="display: none;">
                        <h6 class="mb-3">اطلاعات راننده</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="license_number" class="form-label">شماره گواهینامه</label>
                                <input type="text" class="form-control @error('license_number') is-invalid @enderror" id="license_number" name="license_number" value="{{ old('license_number') }}">
                                @error('license_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="license_expiry" class="form-label">تاریخ انقضای گواهینامه</label>
                                <input type="text" class="form-control persian-datepicker @error('license_expiry') is-invalid @enderror" id="license_expiry" name="license_expiry" value="{{ old('license_expiry') }}">
                                @error('license_expiry')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="vehicle_type" class="form-label">نوع وسیله نقلیه</label>
                                <select class="form-select @error('vehicle_type') is-invalid @enderror" id="vehicle_type" name="vehicle_type">
                                    <option value="">انتخاب کنید</option>
                                    <option value="van" {{ old('vehicle_type') === 'van' ? 'selected' : '' }}>ون</option>
                                    <option value="truck" {{ old('vehicle_type') === 'truck' ? 'selected' : '' }}>کامیون</option>
                                    <option value="trailer" {{ old('vehicle_type') === 'trailer' ? 'selected' : '' }}>تریلر</option>
                                </select>
                                @error('vehicle_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="vehicle_plate" class="form-label">پلاک خودرو</label>
                                <input type="text" class="form-control @error('vehicle_plate') is-invalid @enderror" id="vehicle_plate" name="vehicle_plate" value="{{ old('vehicle_plate') }}">
                                @error('vehicle_plate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer d-flex justify-content-between">
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-right me-2"></i>
                        بازگشت
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>
                        ذخیره کاربر
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Show/hide driver fields based on role
    document.getElementById('role').addEventListener('change', function() {
        const driverFields = document.getElementById('driver-fields');
        if (this.value === 'driver') {
            driverFields.style.display = 'block';
        } else {
            driverFields.style.display = 'none';
        }
    });

    // Trigger on page load if driver is pre-selected
    if (document.getElementById('role').value === 'driver') {
        document.getElementById('driver-fields').style.display = 'block';
    }
</script>
@endpush