<!doctype html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="{{ asset('static/patients/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
    <link href="{{ asset('static/my_auth/font.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('static/patients/css/spur.css') }}">

    <title>پنل مدیریت - ویرایش اطلاعات بیمار</title>

    <style>
        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
        
        .required-field::after {
            content: " *";
            color: #dc3545;
        }
        
        .form-section {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            border-right: 4px solid #0d6efd;
        }
        
        .form-section h5 {
            color: #0d6efd;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        
        .form-note {
            background-color: #e7f3ff;
            border-radius: 6px;
            padding: 12px;
            margin-top: 15px;
            border-right: 3px solid #0d6efd;
            font-size: 0.9rem;
        }
        
        .form-note i {
            color: #0d6efd;
            margin-left: 5px;
        }
        
        .phone-hint {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 5px;
        }
        
        .char-counter {
            font-size: 0.85rem;
            color: #6c757d;
            text-align: left;
            margin-top: 5px;
        }
        
        .char-counter.warning {
            color: #dc3545;
        }
        
        .form-actions {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-top: 30px;
        }
        
        .form-help {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 10px;
        }
        
        .real-time-validation {
            font-size: 0.85rem;
            margin-top: 5px;
            min-height: 20px;
        }
        
        .validation-valid {
            color: #28a745;
        }
        
        .validation-invalid {
            color: #dc3545;
        }
    </style>
</head>

<body>
<div class="dash">
    <div class="dash-nav dash-nav-dark" style="right: 0">
        <header>
            <a href="#!" class="menu-toggle">
                <i class="fa fa-bars"></i>
            </a>
            <a href="{{ route('patients.index') }}" class="spur-logo">
                <span>پنل مدیریت</span>
            </a>
        </header>
        <nav class="dash-nav-list">
            <a href="{{ route('patients.index') }}" class="dash-nav-item active">
                <i class="fa fa-list ml-2"></i>
                مدیریت بیماران
            </a>
            <a href="{{ route('diagnose.clinical') }}" class="dash-nav-item">
                <i class="fa fa-file-text ml-2"></i>
                تشخیص با داده های بالینی
            </a>
            <a href="{{ route('diagnose.scan') }}" class="dash-nav-item">
                <i class="fa fa-camera ml-2"></i>
                تشخیص با تصویر
            </a>
        </nav>
    </div>
    <div class="dash-app">
        <header class="dash-toolbar d-flex justify-content-around">
            <a href="#!" class="menu-toggle">
                <i class="fa fa-bars"></i>
            </a>
            <span>پنل مدیریت - ویرایش اطلاعات بیمار</span>

            <div class="tools">
                <div class="dropdown tools-item">
                    <a href="#" class="" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-user"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item" href="{{ route('logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            خروج
                        </a>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
        </header>
        <main class="dash-content text-right" style="direction: rtl">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card spur-card">
                            <div class="card-header">
                                <div class="spur-card-icon">
                                    <i class="fas fa-user-edit"></i>
                                </div>
                                <div class="spur-card-title">ویرایش اطلاعات بیمار</div>
                            </div>
                            <div class="card-body">
                                <!-- Flash Messages -->
                                @if(session('success'))
                                    <div style="direction: rtl" class="alert alert-success alert-dismissible shadow fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <i class="fa fa-check-circle"></i> {{ session('success') }}
                                    </div>
                                @endif

                                @if(session('error'))
                                    <div style="direction: rtl" class="alert alert-danger alert-dismissible shadow fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <i class="fa fa-exclamation-circle"></i> {{ session('error') }}
                                    </div>
                                @endif

                                @if($errors->any())
                                    <div style="direction: rtl" class="alert alert-danger alert-dismissible shadow fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <strong><i class="fa fa-exclamation-triangle"></i> لطفا خطاهای زیر را اصلاح کنید:</strong>
                                        <ul class="mb-0 mt-2">
                                            @foreach($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <!-- Patient Edit Form -->
                                <form method="post" action="{{ route('patients.update', $patient->id) }}" id="patientForm">
                                    @csrf
                                    @method('PUT')

                                    <div class="form-section">
                                        <h5><i class="fa fa-id-card"></i> اطلاعات هویتی</h5>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="first_name" class="required-field">نام</label>
                                                <input type="text" name="first_name" class="form-control rounded" 
                                                       id="first_name" placeholder="نام بیمار" 
                                                       value="{{ old('first_name', $patient->first_name) }}" required
                                                       maxlength="50">
                                                <div class="char-counter" id="firstNameCounter">0/50</div>
                                                <div class="real-time-validation" id="firstNameValidation"></div>
                                                @error('first_name')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="last_name" class="required-field">نام خانوادگی</label>
                                                <input name="last_name" type="text" class="form-control rounded" 
                                                       id="last_name" placeholder="نام خانوادگی بیمار"
                                                       value="{{ old('last_name', $patient->last_name) }}" required
                                                       maxlength="50">
                                                <div class="char-counter" id="lastNameCounter">0/50</div>
                                                <div class="real-time-validation" id="lastNameValidation"></div>
                                                @error('last_name')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="national_code" class="required-field">کد ملی</label>
                                                <input name="national_code" type="text" class="form-control" 
                                                       id="national_code" placeholder="۱۰ رقم کد ملی"
                                                       value="{{ old('national_code', $patient->national_code) }}" required
                                                       maxlength="10" pattern="[0-9]{10}">
                                                <div class="real-time-validation" id="nationalCodeValidation"></div>
                                                @error('national_code')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-note">
                                            <i class="fa fa-info-circle"></i>
                                            کد ملی باید ۱۰ رقم و منحصربه‌فرد باشد. از صحت آن اطمینان حاصل کنید.
                                        </div>
                                    </div>

                                    <div class="form-section">
                                        <h5><i class="fa fa-user"></i> اطلاعات شخصی</h5>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="sex" class="required-field">جنسیت</label>
                                                <select name="sex" class="form-control" id="sex" required>
                                                    <option value="">-- انتخاب کنید --</option>
                                                    <option value="مرد" {{ old('sex', $patient->sex) == 'مرد' ? 'selected' : '' }}>مرد</option>
                                                    <option value="زن" {{ old('sex', $patient->sex) == 'زن' ? 'selected' : '' }}>زن</option>
                                                </select>
                                                @error('sex')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="age" class="required-field">سن</label>
                                                <input name="age" type="number" class="form-control" 
                                                       id="age" placeholder="سن بیمار" min="1" max="110"
                                                       value="{{ old('age', $patient->age) }}" required>
                                                <div class="real-time-validation" id="ageValidation"></div>
                                                @error('age')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="phone_number" class="required-field">تلفن همراه</label>
                                                <input name="phone_number" type="tel" class="form-control" 
                                                       id="phone_number" placeholder="۰۹۱۲۳۴۵۶۷۸۹"
                                                       value="{{ old('phone_number', $patient->phone_number) }}" required
                                                       maxlength="11" pattern="09[0-9]{9}">
                                                <div class="phone-hint">شماره باید ۱۱ رقمی و با ۰۹ شروع شود</div>
                                                <div class="real-time-validation" id="phoneValidation"></div>
                                                @error('phone_number')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-section">
                                        <h5><i class="fa fa-map-marker"></i> اطلاعات تماس</h5>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label for="address" class="required-field">آدرس کامل</label>
                                                <textarea name="address" class="form-control" id="address" 
                                                          rows="3" placeholder="آدرس کامل محل سکونت بیمار" 
                                                          required maxlength="100">{{ old('address', $patient->address) }}</textarea>
                                                <div class="char-counter" id="addressCounter">0/100</div>
                                                <div class="real-time-validation" id="addressValidation"></div>
                                                @error('address')
                                                    <span class="validation-invalid">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-note">
                                            <i class="fa fa-info-circle"></i>
                                            آدرس باید دقیق و کامل باشد تا در صورت نیاز بتوان با بیمار تماس گرفت.
                                        </div>
                                    </div>

                                    <div class="form-actions">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                                                    <i class="fa fa-save"></i> به‌روزرسانی اطلاعات
                                                </button>
                                                <a href="{{ route('patients.show', $patient->id) }}" class="btn btn-secondary btn-lg mr-2">
                                                    <i class="fa fa-times"></i> انصراف
                                                </a>
                                            </div>
                                            <div class="form-help">
                                                <i class="fa fa-lightbulb"></i>
                                                تغییرات پس از ذخیره‌سازی، بلافاصله اعمال می‌شوند.
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    // DOM Elements
    const form = document.getElementById('patientForm');
    const firstNameInput = document.getElementById('first_name');
    const lastNameInput = document.getElementById('last_name');
    const nationalCodeInput = document.getElementById('national_code');
    const ageInput = document.getElementById('age');
    const phoneInput = document.getElementById('phone_number');
    const addressInput = document.getElementById('address');
    const submitBtn = document.getElementById('submitBtn');
    
    // Character counters
    const firstNameCounter = document.getElementById('firstNameCounter');
    const lastNameCounter = document.getElementById('lastNameCounter');
    const addressCounter = document.getElementById('addressCounter');
    
    // Validation elements
    const firstNameValidation = document.getElementById('firstNameValidation');
    const lastNameValidation = document.getElementById('lastNameValidation');
    const nationalCodeValidation = document.getElementById('nationalCodeValidation');
    const ageValidation = document.getElementById('ageValidation');
    const phoneValidation = document.getElementById('phoneValidation');
    const addressValidation = document.getElementById('addressValidation');
    
    // Update character counters
    function updateCharCounter(input, counter) {
        const length = input.value.length;
        const maxLength = input.maxLength;
        counter.textContent = `${length}/${maxLength}`;
        
        if (length > maxLength * 0.9) {
            counter.classList.add('warning');
        } else {
            counter.classList.remove('warning');
        }
    }
    
    // Real-time validation functions
    function validateFirstName() {
        const value = firstNameInput.value.trim();
        if (value.length < 2) {
            showValidation(firstNameValidation, 'نام باید حداقل ۲ کاراکتر باشد', false);
            return false;
        } else if (!/^[\u0600-\u06FF\s]+$/.test(value)) {
            showValidation(firstNameValidation, 'نام باید فارسی باشد', false);
            return false;
        } else {
            showValidation(firstNameValidation, 'نام معتبر است', true);
            return true;
        }
    }
    
    function validateLastName() {
        const value = lastNameInput.value.trim();
        if (value.length < 2) {
            showValidation(lastNameValidation, 'نام خانوادگی باید حداقل ۲ کاراکتر باشد', false);
            return false;
        } else if (!/^[\u0600-\u06FF\s]+$/.test(value)) {
            showValidation(lastNameValidation, 'نام خانوادگی باید فارسی باشد', false);
            return false;
        } else {
            showValidation(lastNameValidation, 'نام خانوادگی معتبر است', true);
            return true;
        }
    }
    
    function validateNationalCode() {
        const value = nationalCodeInput.value.trim().replace(/-/g, '');
        
        if (!/^\d{10}$/.test(value)) {
            showValidation(nationalCodeValidation, 'کد ملی باید ۱۰ رقم باشد', false);
            return false;
        } else {
            const check = parseInt(value[9]);
            let sum = 0;
            for (let i = 0; i < 9; i++) {
                sum += parseInt(value[i]) * (10 - i);
            }
            const remainder = sum % 11;
            const isValid = (remainder < 2 && check === remainder) || (remainder >= 2 && check === 11 - remainder);
            
            if (isValid) {
                showValidation(nationalCodeValidation, 'کد ملی معتبر است', true);
                return true;
            } else {
                showValidation(nationalCodeValidation, 'کد ملی صحیح نیست', false);
                return false;
            }
        }
    }
    
    function validateAge() {
        const value = parseInt(ageInput.value);
        if (isNaN(value) || value < 1 || value > 110) {
            showValidation(ageValidation, 'سن باید بین ۱ تا ۱۱۰ سال باشد', false);
            return false;
        } else {
            showValidation(ageValidation, 'سن معتبر است', true);
            return true;
        }
    }
    
    function validatePhone() {
        const rawValue = phoneInput.value.trim().replace(/\D/g, '');
        
        if (!/^09\d{9}$/.test(rawValue)) {
            showValidation(phoneValidation, 'شماره تلفن باید ۱۱ رقمی و با ۰۹ شروع شود', false);
            return false;
        } else {
            showValidation(phoneValidation, 'شماره تلفن معتبر است', true);
            return true;
        }
    }
    
    function validateAddress() {
        const value = addressInput.value.trim();
        if (value.length < 10) {
            showValidation(addressValidation, 'آدرس باید حداقل ۱۰ کاراکتر باشد', false);
            return false;
        } else {
            showValidation(addressValidation, 'آدرس معتبر است', true);
            return true;
        }
    }
    
    function showValidation(element, message, isValid) {
        element.textContent = message;
        element.className = 'real-time-validation ' + (isValid ? 'validation-valid' : 'validation-invalid');
    }
    
    function validateForm() {
        const phoneRaw = phoneInput.value.replace(/\D/g, '');
        const nationalCodeRaw = nationalCodeInput.value.replace(/\D/g, '');
        
        const originalPhone = phoneInput.value;
        const originalNationalCode = nationalCodeInput.value;
        
        phoneInput.value = phoneRaw;
        nationalCodeInput.value = nationalCodeRaw;
        
        const isFirstNameValid = validateFirstName();
        const isLastNameValid = validateLastName();
        const isNationalCodeValid = validateNationalCode();
        const isAgeValid = validateAge();
        const isPhoneValid = true;
        const isAddressValid = validateAddress();
        
        phoneInput.value = originalPhone;
        nationalCodeInput.value = originalNationalCode;
        
        return isFirstNameValid && isLastNameValid && isNationalCodeValid && 
               isAgeValid && isPhoneValid && isAddressValid;
    }
    
    function updateSubmitButton() {
        const isValid = validateFirstName() && validateLastName() && 
                       validateNationalCode() && validateAge() && 
                       validatePhone() && validateAddress();
        submitBtn.disabled = !isValid;
    }
    
    // Event Listeners
    firstNameInput.addEventListener('input', () => {
        updateCharCounter(firstNameInput, firstNameCounter);
        validateFirstName();
        updateSubmitButton();
    });
    
    lastNameInput.addEventListener('input', () => {
        updateCharCounter(lastNameInput, lastNameCounter);
        validateLastName();
        updateSubmitButton();
    });
    
    nationalCodeInput.addEventListener('input', () => {
        nationalCodeInput.value = nationalCodeInput.value.replace(/\D/g, '');
        validateNationalCode();
        updateSubmitButton();
    });
    
    ageInput.addEventListener('input', () => {
        if (ageInput.value < 1) ageInput.value = 1;
        if (ageInput.value > 110) ageInput.value = 110;
        validateAge();
        updateSubmitButton();
    });
    
    phoneInput.addEventListener('input', () => {
        phoneInput.value = phoneInput.value.replace(/\D/g, '');
        validatePhone();
        updateSubmitButton();
    });
    
    addressInput.addEventListener('input', () => {
        updateCharCounter(addressInput, addressCounter);
        validateAddress();
        updateSubmitButton();
    });
    
    form.addEventListener('submit', (e) => {
        if (!validateForm()) {
            e.preventDefault();
            alert('لطفا تمام فیلدها را به درستی پر کنید!');
            return false;
        }
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> در حال به‌روزرسانی...';
        
        phoneInput.value = phoneInput.value.replace(/\D/g, '');
        nationalCodeInput.value = nationalCodeInput.value.replace(/\D/g, '');
        
        return true;
    });
    
    document.addEventListener('DOMContentLoaded', () => {
        updateCharCounter(firstNameInput, firstNameCounter);
        updateCharCounter(lastNameInput, lastNameCounter);
        updateCharCounter(addressInput, addressCounter);
        
        validateFirstName();
        validateLastName();
        validateNationalCode();
        validateAge();
        validatePhone();
        validateAddress();
        updateSubmitButton();
        
        firstNameInput.focus();
    });
    
    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.key === 'Enter') {
            e.preventDefault();
            form.submit();
        }
        
        if (e.key === 'Escape') {
            e.preventDefault();
            window.location.href = "{{ route('patients.show', $patient->id) }}";
        }
    });
</script>

<script src="{{ asset('static/my_auth/jquery.min.js') }}"></script>
<script src="{{ asset('static/my_auth/popper.js') }}"></script>
<script src="{{ asset('static/my_auth/bootstrap.min.js') }}"></script>
<script src="{{ asset('static/patients/js/spur.js') }}"></script>

</body>
</html>