@extends('layouts.app')

@section('title', 'Edit Student')

@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;
    width: 100%;
}

.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-textarea {
    resize: vertical;
    min-height: 100px;
}

.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;
    padding: 6px 8px;
    background: #fef2f2;
    border-left: 2px solid #dc2626;
    border-radius: 4px;
    animation: scr-slideDown 0.2s ease;
}

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

@keyframes scr-slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.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; }

/* ── gender & shift buttons ── */
.scr-btn-group {
    display: flex;
    gap: 8px;
}

.scr-toggle-btn {
    flex: 1;
    padding: 11px 4px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #9099b8;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.scr-toggle-btn:hover {
    border-color: #414662;
    color: #414662;
}

.scr-toggle-btn.active {
    background: #414662;
    border-color: #414662;
    color: #ffffff;
}

/* ── custom dropdown ── */
.scr-custom-select {
    position: relative;
    width: 100%;
}

.scr-custom-trigger {
    height: 46px;
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 13px;
}

.scr-custom-trigger:hover {
    border-color: #f5a623;
    background: #fff;
}

.scr-custom-select.active .scr-custom-trigger {
    border-color: #f5a623;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
}

.scr-custom-trigger .scr-selected-text {
    font-weight: 500;
    color: #9099b8;
}

.scr-custom-trigger .scr-selected-text.has-value {
    color: #2d2f45;
}

.scr-custom-options {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden auto;
    max-height: 220px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 999;
}

.scr-custom-select.active .scr-custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scr-custom-option {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #2d2f45;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scr-custom-option:hover {
    background: #414662;
    color: #fff;
}

/* ── photo preview ── */
.scr-photo-preview {
    margin-top: 8px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid #eceef6;
}

/* ── 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);
}

.scr-btn-submit:disabled {
    background: #999;
    border-color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

/* 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 Student</p>
                <p class="scr-sub">Update student information</p>
            </div>
        </div>
        <a href="{{ route('student.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('student.update', $student->id) }}" method="POST" enctype="multipart/form-data" id="studentEditForm" 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" for="f_name">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', $student->user->name) }}" autocomplete="off">
                        <div class="scr-error @error('name') show @enderror" id="err_name">
                            ⚠️ <span>@error('name'){{ $message }}@else Please enter a valid name @enderror</span>
                        </div>
                    </div>

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

                    {{-- Mobile --}}
                    <div class="scr-form-group">
                        <label class="scr-label" for="f_mobile">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', $student->mobile) }}" maxlength="10" autocomplete="off">
                        <div class="scr-error @error('mobile') show @enderror" id="err_mobile">
                            ⚠️ <span>@error('mobile'){{ $message }}@else Please enter a valid mobile number @enderror</span>
                        </div>
                    </div>

                    {{-- Gender (buttons) --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Gender <span class="scr-req">*</span></label>
                        <div class="scr-btn-group">
                            <button type="button" class="scr-toggle-btn gender-btn {{ old('gender', $student->gender)=='male' ? 'active' : '' }}" onclick="selectGender('male', this)">♂ Male</button>
                            <button type="button" class="scr-toggle-btn gender-btn {{ old('gender', $student->gender)=='female' ? 'active' : '' }}" onclick="selectGender('female', this)">♀ Female</button>
                            <button type="button" class="scr-toggle-btn gender-btn {{ old('gender', $student->gender)=='other' ? 'active' : '' }}" onclick="selectGender('other', this)">Other</button>
                        </div>
                        <input type="hidden" name="gender" id="f_gender" value="{{ old('gender', $student->gender) }}">
                        <div class="scr-error @error('gender') show @enderror" id="err_gender">
                            ⚠️ <span>@error('gender'){{ $message }}@else Please select a gender @enderror</span>
                        </div>
                    </div>

                    {{-- Roll No --}}
                    <div class="scr-form-group">
                        <label class="scr-label" for="f_roll_no">Roll Number <span class="scr-req">*</span></label>
                        <input type="text" name="roll_no" id="f_roll_no" disabled
                            class="scr-input"
                            placeholder="e.g., STU001" value="{{ $student->roll_no }}">
                        <div class="scr-file-hint">Roll number cannot be changed</div>
                    </div>

                    {{-- Trade (custom dropdown) --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Trade <span class="scr-req">*</span></label>
                        <div class="scr-custom-select">
                            <div class="scr-custom-trigger" onclick="toggleDropdown(this)">
                                <span id="selected-trade" class="scr-selected-text {{ old('trade', $student->trade) ? 'has-value' : '' }}">
                                    {{ old('trade', $student->trade) ?: '-- Select Trade --' }}
                                </span>
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9099b8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="6 9 12 15 18 9"></polyline>
                                </svg>
                            </div>
                            <div class="scr-custom-options">
                                @foreach($trades as $trade)
                                    <div class="scr-custom-option"
                                        data-value="{{ $trade->trade_name }}"
                                        onclick="selectOption(this, 'f_trade', 'selected-trade')">
                                        {{ $trade->trade_name }}
                                    </div>
                                @endforeach
                            </div>
                            <input type="hidden" name="trade" id="f_trade" value="{{ old('trade', $student->trade) }}">
                        </div>
                        <div class="scr-error @error('trade') show @enderror" id="err_trade">
                            ⚠️ <span>@error('trade'){{ $message }}@else Please select a trade @enderror</span>
                        </div>
                    </div>


                    {{-- Photo --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Photo</label>
                        <label for="photo-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="photo-label-text">Choose Photo</span>
                        </label>
                        <input type="file" id="photo-input" name="photo" accept="image/jpeg,image/png,image/jpg,image/gif" class="scr-file-input" onchange="previewPhoto(event)">
                        <div class="scr-file-hint">JPG, PNG (Max 2MB)</div>
                        @if($student->photo)
                            <img id="photo-preview" class="scr-photo-preview" src="{{ asset('storage/' . $student->photo) }}" alt="Photo">
                        @else
                            <img id="photo-preview" class="scr-photo-preview" src="" alt="Preview" style="display: none;">
                        @endif
                        <div class="scr-error @error('photo') show @enderror" id="err_photo">
                            ⚠️ <span>@error('photo'){{ $message }}@enderror</span>
                        </div>
                    </div>

                    {{-- Shift (buttons - full width) --}}
                    <div class="scr-form-group" style="grid-column: 1 / -1;">
                        <label class="scr-label">Shift <span class="scr-req">*</span></label>
                        <div class="scr-btn-group">
                            <button type="button" class="scr-toggle-btn shift-btn {{ old('shift', $student->shift)=='morning' ? 'active' : '' }}" onclick="selectShift('morning', this)">First (8AM – 04:30PM)</button>
                            <button type="button" class="scr-toggle-btn shift-btn {{ old('shift', $student->shift)=='afternoon' ? 'active' : '' }}" onclick="selectShift('afternoon', this)">Second (10AM – 06:30PM)</button>
                            <button type="button" class="scr-toggle-btn shift-btn {{ old('shift', $student->shift)=='night' ? 'active' : '' }}" onclick="selectShift('night', this)">General (9AM – 5PM)</button>
                        </div>
                        <input type="hidden" name="shift" id="f_shift" value="{{ old('shift', $student->shift) }}">
                        <div class="scr-error @error('shift') show @enderror" id="err_shift">
                            ⚠️ <span>@error('shift'){{ $message }}@else Please select a shift @enderror</span>
                        </div>
                    </div>

                </div>

                    {{-- Address (Full width) --}}
                    <div class="scr-form-group" style="grid-column: 1 / -1;">
                        <label class="scr-label" for="f_address">Address <span class="scr-req">*</span></label>
                        <textarea name="address" id="f_address"
                            class="scr-textarea @error('address') is-invalid @enderror"
                            placeholder="Enter complete address" autocomplete="off">{{ old('address', $student->address) }}</textarea>
                        <div class="scr-error @error('address') show @enderror" id="err_address">
                            ⚠️ <span>@error('address'){{ $message }}@else Please enter address @enderror</span>
                        </div>
                    </div>

                </div>

                {{-- Form Actions --}}
                <div class="scr-actions mr-10 pt-6">
                    <a href="{{ route('student.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" id="submitBtn">
                        <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 Student
                    </button>
                </div>

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

<script>
// ═══════════════════════════════════════════════════════════════
// VALIDATION HELPERS
// ═══════════════════════════════════════════════════════════════

function showError(fieldId, message) {
    const errorEl = document.getElementById(`err_${fieldId}`);
    const inputEl = document.getElementById(`f_${fieldId}`);

    if (errorEl) {
        const span = errorEl.querySelector('span');
        if (span) span.textContent = message;
        errorEl.classList.add('show');
    }
    if (inputEl) {
        inputEl.classList.add('is-invalid');
    }
}

function clearError(fieldId) {
    const errorEl = document.getElementById(`err_${fieldId}`);
    const inputEl = document.getElementById(`f_${fieldId}`);

    if (errorEl) errorEl.classList.remove('show');
    if (inputEl) inputEl.classList.remove('is-invalid');
}

// ═══════════════════════════════════════════════════════════════
// GENDER & SHIFT SELECTION
// ═══════════════════════════════════════════════════════════════

function selectGender(value, element) {
    document.querySelectorAll('.gender-btn').forEach(btn => btn.classList.remove('active'));
    element.classList.add('active');
    document.getElementById('f_gender').value = value;
    clearError('gender');
}

function selectShift(value, element) {
    document.querySelectorAll('.shift-btn').forEach(btn => btn.classList.remove('active'));
    element.classList.add('active');
    document.getElementById('f_shift').value = value;
    clearError('shift');
}

// ═══════════════════════════════════════════════════════════════
// CUSTOM DROPDOWN
// ═══════════════════════════════════════════════════════════════

function toggleDropdown(element) {
    const customSelect = element.closest('.scr-custom-select');
    customSelect.classList.toggle('active');
}

function selectOption(element, fieldName, displayId) {
    const value = element.getAttribute('data-value');
    const customSelect = element.closest('.scr-custom-select');

    document.getElementById(fieldName).value = value;
    document.getElementById(displayId).textContent = element.textContent;
    document.getElementById(displayId).classList.add('has-value');
    customSelect.classList.remove('active');
    clearError('trade');
}

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('.scr-custom-select')) {
        document.querySelectorAll('.scr-custom-select.active').forEach(select => {
            select.classList.remove('active');
        });
    }
});

// ═══════════════════════════════════════════════════════════════
// PHOTO PREVIEW
// ═══════════════════════════════════════════════════════════════

function previewPhoto(event) {
    const file = event.target.files[0];
    if (file) {
        const maxSize = 2 * 1024 * 1024; // 2MB
        if (file.size > maxSize) {
            showError('photo', 'File size exceeds 2MB limit');
            return;
        }

        const reader = new FileReader();
        reader.onload = (e) => {
            document.getElementById('photo-preview').src = e.target.result;
            document.getElementById('photo-preview').style.display = 'block';
            clearError('photo');
        };
        reader.readAsDataURL(file);
    }
}

// ═══════════════════════════════════════════════════════════════
// FORM VALIDATION
// ═══════════════════════════════════════════════════════════════

const form = document.getElementById('studentEditForm');

form.addEventListener('submit', function(e) {
    let isValid = true;

    // Validate name
    const nameInput = document.getElementById('f_name');
    if (!nameInput.value.trim() || !/^[a-zA-Z\s]+$/.test(nameInput.value)) {
        showError('name', 'Name must contain only letters and spaces');
        isValid = false;
    } else {
        clearError('name');
    }

    // Validate email
    const emailInput = document.getElementById('f_email');
    if (!emailInput.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) {
        showError('email', 'Please enter a valid email');
        isValid = false;
    } else {
        clearError('email');
    }

    // Validate mobile
    const mobileInput = document.getElementById('f_mobile');
    if (!mobileInput.value.trim() || !/^\d{10}$/.test(mobileInput.value)) {
        showError('mobile', 'Mobile must be a 10-digit number');
        isValid = false;
    } else {
        clearError('mobile');
    }

    // Validate gender
    if (!document.getElementById('f_gender').value) {
        showError('gender', 'Please select a gender');
        isValid = false;
    } else {
        clearError('gender');
    }

    // Validate trade
    if (!document.getElementById('f_trade').value) {
        showError('trade', 'Please select a trade');
        isValid = false;
    } else {
        clearError('trade');
    }



    // Validate shift
    if (!document.getElementById('f_shift').value) {
        showError('shift', 'Please select a shift');
        isValid = false;
    } else {
        clearError('shift');
    }

    // Validate address
    const addressInput = document.getElementById('f_address');
    if (!addressInput.value.trim()) {
        showError('address', 'Please enter address');
        isValid = false;
    } else {
        clearError('address');
    }

    if (!isValid) {
        e.preventDefault();
    }
});
</script>

@endsection