@php
    $isRequested = Session::has('settings_phone_number') && Session::has('settings_phone_otp');
@endphp

<div class="settings-form">
    <form id="settings-phone-form" method="POST" action="{{ route('student.settings.phone') }}">
        @csrf
        <div class="form-body">

            <!-- Current Phone Field -->
            @if ($isRequested)
                <fieldset class="form-group">
                    <label for="current-phone" class="form-label">Current Phone</label>
                    <input type="text" name="current_phone" id="current-phone" class="form-control numbers-only"
                        placeholder="Enter your phone number" value="{{ $user->phone }}" readonly>
                </fieldset>
            @endif
            
            <!-- Phone Field -->
            <fieldset class="form-group">
                <label for="phone" class="form-label">{{ $isRequested ? 'New Phone' : 'Phone' }}</label>
                <input type="text" name="phone" id="phone" class="form-control numbers-only"
                    placeholder="Enter your phone number" value="{{ $isRequested ? Session::get('settings_phone_number') : $user->phone }}" readonly required>
            </fieldset>

            <!-- Change Phone Button -->
            <fieldset class="form-group" style="display: {{ $isRequested ? 'none' : 'block' }};">
                <button type="button" id="change-phone-btn" class="btn btn-dark btn-sm">
                    <i class="bx bx-sync"></i>
                    <span>Change Phone</span>
                </button>
            </fieldset>

            <!-- Request OTP Button -->
            <fieldset class="form-group" style="display: none;">
                <button type="button" id="request-otp-btn" class="btn btn-dark btn-sm" disabled>
                    <i class="bx bx-dialpad"></i>
                    <span>Request OTP</span>
                </button>
            </fieldset>

            <!-- OTP Field -->
            <fieldset class="form-group" style="display: {{ $isRequested ? 'block' : 'none' }};">
                <label for="otp" class="form-label">OTP</label>
                <input type="text" name="otp" id="otp" class="form-control numbers-only"
                    placeholder="Enter your OTP" required>
            </fieldset>

            <!-- Save Button -->
            <fieldset class="form-group" style="display: {{ $isRequested ? 'block' : 'none' }};">
                <button type="submit" id="save-btn" class="btn btn-main btn-sm" @disabled(!$isRequested)>
                    <i class="bx bx-save"></i>
                    <span>Save Phone</span>
                </button>
                <button type="button" id="cancel-btn" class="btn btn-dark btn-sm">
                    <span>Cancel</span>
                </button>
            </fieldset>
        </div>
    </form>
</div>