@extends('layouts.app')

@section('title', 'Edit Staff Member')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.scr-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

/* ── header row ── */
.scr-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 1.6rem;
}
.scr-title-group { display: flex; align-items: center; gap: 14px; }
.scr-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.scr-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.scr-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.scr-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #414662;
    text-decoration: none; padding: 8px 14px;
    border: 1.5px solid #dde0ef; border-radius: 9px;
    background: #fff; transition: all .18s;
    font-family: 'Poppins', sans-serif;
}
.scr-back:hover { background: #414662; color: #fff; border-color: #414662; }

/* ── card ── */
.scr-card {
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.scr-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
    background-size: 200% 100%;
    animation: scr-shimmer 3s linear infinite;
}
@keyframes scr-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.scr-body { padding: 2rem 2.2rem; }

/* section head */
.scr-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.scr-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; flex-shrink: 0; }
.scr-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.scr-hr { border: none; border-top: 1.5px solid #f0f1f7; margin: 1.8rem 0; }

/* ── form grid ── */
.scr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 1.6rem;
}

.scr-form-group {
    display: flex;
    flex-direction: column;
}

.scr-label {
    font-size: 12px;
    font-weight: 600;
    color: #414662;
    letter-spacing: .04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.scr-label span.scr-req { color: #dc2626; }

.scr-input, .scr-select, .scr-textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    padding: 12px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
    color: #2d2f45;
    transition: border-color .2s, background .2s;
}

.scr-input:focus, .scr-select:focus, .scr-textarea:focus {
    outline: none;
    border-color: #f5a623;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
}

/* invalid state */
.scr-input.is-invalid,
.scr-select.is-invalid,
.scr-textarea.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.scr-input.is-invalid:focus,
.scr-select.is-invalid:focus,
.scr-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.scr-input::placeholder { color: #9099b8; }

.scr-file-input { display: none; }

.scr-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
    color: #414662;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.scr-file-label:hover {
    border-color: #f5a623;
    background: #fef9f4;
    color: #f5a623;
}

.scr-file-hint {
    font-size: 11px;
    color: #9099b8;
    margin-top: 6px;
}

.scr-error {
    display: none;
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    gap: 4px;
    align-items: center;
}

.scr-error.show {
    display: flex;
}

.scr-alert {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 1.2rem;
    font-size: 12px;
    color: #991b1b;
    line-height: 1.6;
}

.scr-alert strong { display: block; margin-bottom: 8px; }
.scr-alert ul { margin: 0; padding-left: 20px; }
.scr-alert li { margin-bottom: 4px; }

.scr-current-photo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #f5a623;
    margin-bottom: 8px;
}

/* ── form actions ── */
.scr-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-top: 1.5px solid #f0f1f7;
}

.scr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border: 1.5px solid;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

.scr-btn-cancel {
    border-color: #dde0ef;
    background: #fff;
    color: #414662;
}

.scr-btn-cancel:hover {
    background: #f0f1f7;
    border-color: #c5cce0;
}

.scr-btn-submit {
    border-color: #f5a623;
    background: #f5a623;
    color: #fff;
}

.scr-btn-submit:hover {
    background: #e89600;
    border-color: #e89600;
    box-shadow: 0 4px 12px rgba(245,166,35,.35);
}

/* Responsive */
@media (max-width: 768px) {
    .scr-form-grid { grid-template-columns: 1fr; }
    .scr-body { padding: 1.4rem; }
}
</style>

<div class="scr-wrap">
    <div class="scr-top-row">
        <div class="scr-title-group">
            <div class="scr-icon-box">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div>
                <p class="scr-title uppercase">Edit Staff Member</p>
                <p class="scr-sub">Update staff information</p>
            </div>
        </div>
        <a href="{{ route('staff.list') }}" class="scr-back">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
            Back
        </a>
    </div>

    {{-- ── Main card ── --}}
    <div class="scr-card">
        <div class="scr-bar"></div>
        <div class="scr-body">

            {{-- Server-side errors summary --}}
            @if ($errors->any())
                <div class="scr-alert">
                    <strong>⚠️ Please correct the following errors:</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('staff.update', $user->id) }}" method="POST" enctype="multipart/form-data" id="staffEditForm" novalidate>
                @csrf
                @method('PUT')

                {{-- Section: Personal Information --}}
                <div class="scr-sh"><div class="scr-dot"></div><span class="scr-stitle">👤 Personal Information</span></div>

                <div class="scr-form-grid">
                    <!-- Name -->
                    <div class="scr-form-group">
                        <label class="scr-label">Name <span class="scr-req">*</span></label>
                        <input type="text" name="name" id="f_name" class="scr-input @error('name') is-invalid @enderror" placeholder="Full name" value="{{ old('name', $user->name) }}" autocomplete="off">
                        <div class="scr-error @error('name') show @enderror" id="err_name">
                            ⚠️ <span>@error('name'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="scr-form-group">
                        <label class="scr-label">Email <span class="scr-req">*</span></label>
                        <input type="email" name="email" id="f_email" class="scr-input @error('email') is-invalid @enderror" placeholder="user@gmail.com" value="{{ old('email', $user->email) }}" autocomplete="off">
                        <div class="scr-error @error('email') show @enderror" id="err_email">
                            ⚠️ <span>@error('email'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Mobile -->
                    <div class="scr-form-group">
                        <label class="scr-label">Mobile <span class="scr-req">*</span></label>
                        <input type="tel" name="mobile" id="f_mobile" class="scr-input @error('mobile') is-invalid @enderror" placeholder="10 digit number" value="{{ old('mobile', $user->mobile) }}" maxlength="10" autocomplete="off">
                        <div class="scr-error @error('mobile') show @enderror" id="err_mobile">
                            ⚠️ <span>@error('mobile'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="scr-form-group">
                        <label class="scr-label">Location <span class="scr-req">*</span></label>
                        <input type="text" name="location" id="f_location" class="scr-input @error('location') is-invalid @enderror" placeholder="e.g., Block A" value="{{ old('location', $user->location) }}" autocomplete="off">
                        <div class="scr-error @error('location') show @enderror" id="err_location">
                            ⚠️ <span>@error('location'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Role -->
                    <div class="scr-form-group">
                        <label class="scr-label">Role <span class="scr-req">*</span></label>
                        <select name="role" id="f_role" class="scr-select @error('role') is-invalid @enderror">
                            <option value="">-- Select Role --</option>
                            @foreach ($roles as $role)
                                <option value="{{ $role }}" @selected(old('role', $user->role) == $role)>
                                    {{ ucfirst(str_replace('_', ' ', $role)) }}
                                </option>
                            @endforeach
                        </select>
                        <div class="scr-error @error('role') show @enderror" id="err_role">
                            ⚠️ <span>@error('role'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Photo -->
                    <div class="scr-form-group">
                        <label class="scr-label">Photo</label>
                        @if ($user->img)
                            <div style="margin-bottom: 10px;">
                                <img src="{{ asset('storage/' . $user->img) }}" alt="{{ $user->name }}" class="scr-current-photo">
                                <p style="font-size: 11px; color: #9099b8; margin: 0;">Current photo</p>
                            </div>
                        @endif
                        <label for="img-input" class="scr-file-label">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                            <span id="img-label-text">Choose Photo</span>
                        </label>
                        <input type="file" id="img-input" name="img" accept="image/jpeg,image/png,image/jpg,image/gif" class="scr-file-input">
                        <div class="scr-file-hint">JPG, PNG (Max 2MB)</div>
                        <div class="scr-error @error('img') show @enderror" id="err_img">
                            ⚠️ <span>@error('img'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>

                <hr class="scr-hr">

                {{-- Section: Professional Information --}}
                <div class="scr-sh"><div class="scr-dot"></div><span class="scr-stitle">💼 Professional Information</span></div>

                <div class="scr-form-grid">

                    {{-- Trade — only shown for role "training_officer" — hidden by default --}}
                    <div class="scr-form-group" id="trade-group" style="display: none;">
                        <label class="scr-label">
                            Trade <span class="scr-req" id="trade-req"></span>
                        </label>
                        <select name="trade_id" id="f_trade_id" class="scr-select @error('trade_id') is-invalid @enderror">
                            <option value="">-- Select Trade --</option>
                            @foreach($trades as $trade)
                                <option value="{{ $trade->trade_name }}" @selected(old('trade_id', $user->trade_id) == $trade->trade_name)>
                                    {{ $trade->trade_name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="scr-error @error('trade_id') show @enderror" id="err_trade_id">
                            ⚠️ <span>@error('trade'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="scr-form-group">
                        <label class="scr-label">Status <span class="scr-req">*</span></label>
                        <select name="status" id="f_status" class="scr-select @error('status') is-invalid @enderror">
                            <option value="">-- Select Status --</option>
                            <option value="active" @selected(old('status', $user->status) === 'active')>Active</option>
                            <option value="inactive" @selected(old('status', $user->status) === 'inactive')>Inactive</option>
                        </select>
                        <div class="scr-error @error('status') show @enderror" id="err_status">
                            ⚠️ <span>@error('status'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    <!-- Hostel Type (for Warden only) -->
                    <div class="scr-form-group" id="hostel-type-group" style="display: none;">
                        <label class="scr-label">Hostel Type <span class="scr-req" id="hostel-req"></span></label>
                        <select name="hostel_type" id="f_hostel_type" class="scr-select @error('hostel_type') is-invalid @enderror">
                            <option value="">-- Select Hostel --</option>
                            <option value="boys" @selected(old('hostel_type', $user->hostel_type) === 'boys')>Boys Hostel</option>
                            <option value="girls" @selected(old('hostel_type', $user->hostel_type) === 'girls')>Girls Hostel</option>
                        </select>
                        <div class="scr-error @error('hostel_type') show @enderror" id="err_hostel_type">
                            ⚠️ <span>@error('hostel_type'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="scr-actions pt-10">
                    <a href="{{ route('staff.list') }}" class="scr-btn scr-btn-cancel">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
                        Cancel
                    </a>
                    <button type="submit" class="scr-btn scr-btn-submit">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                        Update Staff
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const userRole = '{{ $user->role }}';
    const roleSelect = document.getElementById('f_role');
    const tradeGroup = document.getElementById('trade-group');
    const hostelTypeGroup = document.getElementById('hostel-type-group');
    const staffEditForm = document.getElementById('staffEditForm');

    // Show/hide conditional fields based on role
    function updateConditionalFields(role) {
        // Show trade for training_officer
        if (role === 'training_officer') {
            tradeGroup.style.display = 'flex';
            document.getElementById('trade-req').textContent = '*';
        } else {
            tradeGroup.style.display = 'none';
            document.getElementById('trade-req').textContent = '';
            document.getElementById('f_trade_id').value = '';
        }

        // Show hostel type for warden
        if (role === 'warden') {
            hostelTypeGroup.style.display = 'flex';
            document.getElementById('hostel-req').textContent = '*';
        } else {
            hostelTypeGroup.style.display = 'none';
            document.getElementById('hostel-req').textContent = '';
            document.getElementById('f_hostel_type').value = '';
        }
    }

    // Initialize on page load
    updateConditionalFields(userRole);

    // Update conditional fields when role changes
    roleSelect.addEventListener('change', function() {
        updateConditionalFields(this.value);
    });

    // Image input validation
    const imgInput = document.getElementById('img-input');
    if (imgInput) {
        imgInput.addEventListener('change', function(e) {
            const file = this.files[0];
            if (file) {
                if (file.size > 2097152) {
                    alert('❌ File size must be less than 2MB');
                    this.value = '';
                    return;
                }
                const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
                if (!allowedTypes.includes(file.type)) {
                    alert('❌ Only JPG, PNG, and GIF images are allowed');
                    this.value = '';
                    return;
                }
                document.getElementById('img-label-text').textContent = 'File selected ✓';
            }
        });
    }

    // Mobile field - Only 10 digits allowed
    const mobileInput = document.getElementById('f_mobile');
    if (mobileInput) {
        mobileInput.addEventListener('input', function(e) {
            const value = e.target.value;
            const filtered = value.replace(/[^0-9]/g, '').slice(0, 10);
            e.target.value = filtered;
        });
    }

    // Form submit handler - disable button to prevent duplicate submissions
    if (staffEditForm) {
        staffEditForm.addEventListener('submit', function(e) {
            console.log('[STAFF EDIT FORM] Form submit clicked');

            // Find submit button
            const submitBtn = staffEditForm.querySelector('button[type="submit"]');
            if (submitBtn && !submitBtn.disabled) {
                console.log('[STAFF EDIT FORM] Disabling submit button to prevent duplicate submissions');

                // Store original text and state
                const originalText = submitBtn.textContent;
                const originalHTML = submitBtn.innerHTML;

                // Disable button
                submitBtn.disabled = true;
                submitBtn.style.opacity = '0.6';
                submitBtn.style.cursor = 'not-allowed';
                submitBtn.textContent = '⏳ Updating...';

                // Re-enable after 30 seconds (in case of failure)
                setTimeout(function() {
                    if (submitBtn.disabled) {
                        submitBtn.disabled = false;
                        submitBtn.style.opacity = '1';
                        submitBtn.style.cursor = 'pointer';
                        submitBtn.innerHTML = originalHTML;
                        console.log('[STAFF EDIT FORM] Submit button re-enabled (30s timeout)');
                    }
                }, 30000);
            }
        });
    }
});
</script>

@endsection